/* ==========================================================================
   TopClicker — arkusz strony

   Dwie warstwy, celowo rozdzielone:

   1. STRONA (sekcje 1–12) — własny język wizualny: szeroka miara, duże
      odznaki sekcji, pulpit modułów. Kolory w OKLCH, bo miksowanie jasności
      w tej przestrzeni nie robi szarych dziur jak w sRGB.

   2. PODGLĄD PROGRAMU (sekcja 13) — nie ma tu nic „w stylu” aplikacji.
      Wszystkie wartości są przepisane z src/main/resources/app.css
      i z geometrii kontrolek w com.topclicker.fx.*, co do piksela.
      Skalę trzyma jedna zmienna --u (patrz komentarz przy .tcapp), więc
      okno powiększa się proporcjonalnie i pozostaje ostre — nie ma tu
      ani jednego transform: scale() i ani jednej bitmapy.

   Ostrość: zero PNG. Każda ikona to ścieżka SVG, każda ramka ma pełny
   piksel, cienie są miękkie tylko tam, gdzie mają oderwać element od tła.
   ========================================================================== */

/* ── 1. tokeny ─────────────────────────────────────────────────────────── */

:root {
  /* miara — strona rozlewa się szeroko, treść pisana zostaje wąska */
  --shell: 1560px;
  --pad: clamp(20px, 3.2vw, 48px);

  /* tło i płaszczyzny */
  --bg: oklch(11% 0.018 292);
  --bg-2: oklch(13.5% 0.022 292);
  --card: oklch(15% 0.018 292 / 0.72);
  --well: oklch(100% 0 0 / 0.045);

  /* krawędzie — jedna cienka linia to podstawowy budulec całej strony */
  --edge: oklch(100% 0 0 / 0.08);
  --edge-2: oklch(100% 0 0 / 0.14);
  --edge-3: oklch(100% 0 0 / 0.22);

  /* tekst */
  --ink: oklch(97% 0.004 292);
  --ink-2: oklch(78% 0.012 292);
  --ink-3: oklch(62% 0.015 292);

  /* akcent — dokładnie ten fiolet, który program ma w app.css (#8b5cf6) */
  --acc: oklch(62.7% 0.213 293.7);
  --acc-hi: oklch(72% 0.19 293.7);
  --acc-deep: oklch(52% 0.22 288);
  --acc-w: oklch(62.7% 0.213 293.7 / 0.14);
  --acc-e: oklch(62.7% 0.213 293.7 / 0.34);

  --live: oklch(80% 0.19 148);
  --warm: oklch(80% 0.16 75);

  /* ruch — jedna krzywa na wejścia, druga na reakcje */
  --e: cubic-bezier(0.22, 1, 0.36, 1);
  --e-in: cubic-bezier(0.4, 0, 0.2, 1);

  --lift: 0 24px 60px -20px oklch(0% 0 0 / 0.7);
  --r: 18px;
}

/* Animowalny kąt gradientu — bez @property przeglądarka traktuje kąt jak
   tekst i obrót ramki kafelka nie ma czego interpolować. */
@property --spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ── 2. baza ───────────────────────────────────────────────────────────── */

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

* { margin: 0; }

html {
  scroll-behavior: smooth;
  /* nagłówek jest przyklejony, więc kotwice muszą zatrzymywać się niżej */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink-2);
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.62;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: clip;
}

h1, h2, h3 {
  color: var(--ink);
  font-family: Archivo, "Instrument Sans", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

svg { display: block; }

::selection { background: var(--acc-e); color: #fff; }

:focus-visible {
  outline: 2px solid var(--acc-hi);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--acc);
  color: #0b0b14;
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform 0.25s var(--e);
}

.skip-link:focus { transform: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Ikony strony rysują się tą samą kreską co glify programu: siatka 24×24,
   obrys 1.7, zaokrąglone końce (com.topclicker.fx.Icon). */
.ico {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ico .fill { fill: currentColor; stroke: none; }

.dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.55;
}

.dot--acc { background: var(--acc-hi); opacity: 1; }

.dot--live {
  background: var(--live);
  opacity: 1;
  animation: blink 2.6s var(--e-in) infinite;
}

@keyframes blink { 50% { opacity: 0.35; } }

/* ── 3. mgławica ────────────────────────────────────────────────────────
   Poświata w tle, w duchu FxBackground spod interfejsu programu.

   UWAGA NA WYDAJNOŚĆ — pierwsza wersja tej sekcji zbijała stronę do kilku
   klatek na sekundę i to jest jedyny powód, dla którego wygląda tak, jak
   wygląda:

   - ZERO `filter: blur()`. Rozmycie o promieniu 80 px na warstwie wielkości
     pół ekranu przeglądarka liczy od nowa przy każdej zmianie kształtu tej
     warstwy. Radialny gradient jest miękki SAM Z SIEBIE — rozmycie nic tu
     nie dodawało wizualnie, a kosztowało wszystko.
   - ZERO animacji `scale`. Przesunięcie gotowej warstwy jest darmowe
     (robi to kompozytor), ale jej przeskalowanie wymusza ponowne
     narysowanie każdego piksela.
   - Jedna warstwa, nie trzy. Trzy plamy są tu trzema gradientami w jednym
     `background`, więc powstaje jedna tekstura zamiast trzech.

   Efektem jest tło, które nie kosztuje ani jednej klatki: przeglądarka
   maluje je raz i więcej do niego nie wraca. */

.aura {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  contain: strict;
  background:
    radial-gradient(46% 42% at 74% 6%, oklch(52% 0.22 292 / 0.5), transparent 72%),
    radial-gradient(44% 40% at 8% 46%, oklch(46% 0.19 300 / 0.4), transparent 72%),
    radial-gradient(52% 46% at 62% 96%, oklch(42% 0.16 292 / 0.34), transparent 74%);
}

/* ── 4. miara i rytm sekcji ────────────────────────────────────────────── */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.sec { padding-block: clamp(80px, 8vw, 148px); }

/* Nagłówek sekcji: odznaka i tytuł po lewej, wyjaśnienie po prawej,
   wspólna kreska pod spodem. Wyjaśnienie nigdy nie wchodzi pod tytuł —
   przy szerokiej mierze akapit pod nagłówkiem robił się nieczytelnie długi. */
.head {
  margin-bottom: clamp(36px, 4vw, 64px);
  padding-bottom: clamp(22px, 2.4vw, 34px);
  border-bottom: 1px solid var(--edge);
}

.head h2 { font-size: clamp(34px, 4.4vw, 62px); }

.head--split {
  display: grid;
  gap: clamp(16px, 2.4vw, 56px);
  grid-template-columns: minmax(0, 1fr);
}

.head--split > p:last-child {
  max-width: 46ch;
  color: var(--ink-3);
  font-size: clamp(15px, 1.05vw, 16.5px);
}

@media (min-width: 1000px) {
  .head--split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: end; }
  .head--split .eyebrow { grid-column: 1; }
  .head--split h2 { grid-column: 1; }
  .head--split > p:last-child { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
}

/* — odznaka sekcji —
   Poprzednia wersja była pigułką 10 px z kółkiem w środku: przy tej
   wielkości promienie i cyfra rozłaziły się na piksele. Teraz to kwadrat
   44 px z cyfrą w monospace i osobnym podpisem — nic tu nie jest mniejsze
   od 12 px i nic nie ma promienia poniżej pełnego piksela. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(18px, 2vw, 28px);
  color: var(--ink);
  font-size: clamp(13px, 0.95vw, 15px);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.eyebrow b {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--acc-e);
  border-radius: 13px;
  background:
    linear-gradient(155deg, oklch(62.7% 0.213 293.7 / 0.22), oklch(62.7% 0.213 293.7 / 0.04));
  color: oklch(84% 0.11 293.7);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.09);
}

.eyebrow span { position: relative; padding-bottom: 2px; }

/* ── 5. przyciski ──────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.22s var(--e), background-color 0.22s var(--e),
              border-color 0.22s var(--e), box-shadow 0.22s var(--e);
}

.btn .ico { font-size: 17px; stroke-width: 1.9; }

.btn--big { padding: 14px 24px; font-size: 15.5px; border-radius: 14px; }

.btn--acc {
  background: linear-gradient(160deg, var(--acc-hi), var(--acc-deep));
  color: #fff;
  box-shadow: 0 10px 28px -12px oklch(62.7% 0.213 293.7 / 0.8);
}

.btn--acc:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -12px oklch(62.7% 0.213 293.7 / 0.95);
}

.btn--acc:active { transform: translateY(0); }

/* strzałka rusza się dopiero po najechaniu — to jedyna ozdoba przycisku */
.btn--acc .ico { transition: transform 0.24s var(--e); }
.btn--acc:hover .ico { transform: translateX(3px); }

.btn--wire { border-color: var(--edge-2); background: oklch(100% 0 0 / 0.02); color: var(--ink); }
.btn--wire:hover { border-color: var(--edge-3); background: oklch(100% 0 0 / 0.05); transform: translateY(-2px); }

.lnk { color: var(--ink-2); font-size: 14.5px; transition: color 0.22s var(--e); }
.lnk:hover { color: var(--ink); }

.ver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  color: var(--ink-3);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
}

/* ── 6. nawigacja ──────────────────────────────────────────────────────── */

/* Bez `backdrop-filter`. Przyklejony pasek z rozmyciem tła każe przeglądarce
   przy KAŻDEJ klatce przewijania pobrać piksele spod niego i rozmyć je na
   całej szerokości ekranu — to jeden z najdroższych efektów w CSS i drugi
   powód, dla którego strona się dławiła. Mocniej kryjące tło daje ten sam
   efekt „szyby” za darmo. */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: oklch(11% 0.018 292 / 0.88);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--e), background-color 0.3s var(--e);
}

.nav.is-stuck { border-bottom-color: var(--edge); background: oklch(9.5% 0.018 292 / 0.97); }

.nav__row { display: flex; align-items: center; gap: 18px; height: 74px; }

.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }

/* Kafelek logo dokładnie jak .logo w programie: gradient 8b5cf6 → 6246ea,
   promień 10 przy boku 34, poświata pod spodem. */
.brand__logo {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, #8b5cf6, #6246ea);
  color: #fff;
  box-shadow: 0 6px 18px -6px oklch(62.7% 0.213 293.7 / 0.75), inset 0 1px 0 oklch(100% 0 0 / 0.25);
}

.brand__logo .ico { font-size: 21px; }

.brand__t {
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font-family: Archivo, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.brand__t em {
  color: var(--ink-3);
  font-family: "Instrument Sans", sans-serif;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.nav__links { position: relative; display: flex; gap: 4px; }

.nav__links a {
  position: relative;
  z-index: 1;
  padding: 9px 15px;
  border-radius: 10px;
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 500;
  transition: color 0.22s var(--e);
}

.nav__links a:hover, .nav__links a.is-on { color: var(--ink); }

/* Pastylka jedzie za odnośnikiem zamiast pojawiać się pod każdym z osobna. */
.nav__marker {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 10px;
  background: oklch(100% 0 0 / 0.06);
  opacity: 0;
  transition: transform 0.34s var(--e), width 0.34s var(--e), opacity 0.24s var(--e);
}

.nav__end { display: flex; align-items: center; gap: 16px; }

.burger { display: none; width: 42px; height: 42px; border: 1px solid var(--edge); border-radius: 11px; }
.burger span { display: block; width: 16px; height: 1.5px; margin: 3px auto; background: var(--ink); transition: transform 0.28s var(--e); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

.nav__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--acc), var(--acc-hi));
}

/* Pasek postępu bez JS-a: skala liczona wprost z pozycji przewinięcia. */
@supports (animation-timeline: scroll()) {
  .nav__progress { animation: progress linear both; animation-timeline: scroll(root block); }
}

@keyframes progress { to { transform: scaleX(1); } }

/* ── 7. hero ───────────────────────────────────────────────────────────── */

/* Pasek telemetrii sam działa jak zamknięcie sekcji, więc hero nie potrzebuje
   pod nim własnego oddechu — inaczej między nim a „01 Cały program” robi się
   ćwierć ekranu pustki. */
.hero { padding-block: clamp(48px, 6vw, 96px) 0; }

.hero__grid {
  display: grid;
  gap: clamp(40px, 4vw, 64px);
  align-items: center;
  margin-bottom: clamp(48px, 5vw, 80px);
}

@media (min-width: 1080px) {
  .hero__grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  padding: 8px 16px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: oklch(100% 0 0 / 0.025);
  color: var(--ink-2);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.01em;
}

.kicker em { color: var(--ink-3); font-style: normal; }

.hero__h {
  font-size: clamp(44px, 6.2vw, 92px);
  font-stretch: 106%;
  letter-spacing: -0.042em;
}

.hero__lead {
  max-width: 46ch;
  margin-top: 26px;
  color: var(--ink-2);
  font-size: clamp(16px, 1.15vw, 18px);
}

.hero__act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.hero__fine {
  margin-top: 22px;
  color: var(--ink-3);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
}

/* — pulpit ośmiu modułów —
   Kolejność, nazwy i ikony są te same, co w bocznej nawigacji programu:
   kafelek to zapowiedź konkretnej zakładki, nie ogólna „funkcja”. */

.deck__cap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--ink-3);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Dwie kolumny, nie auto-fit: przy ośmiu kafelkach auto-fit układał je
   3 + 3 + 2 i ostatni rząd zostawał poszarpany. Dwie kolumny dają równe
   4 × 2 i kafelek jest na tyle szeroki, że opis mieści się w dwóch liniach. */
.deck {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 262px), 1fr));
}

@media (min-width: 1080px) { .deck { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mod {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 14px;
  padding: 18px;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: linear-gradient(165deg, oklch(100% 0 0 / 0.045), oklch(100% 0 0 / 0.012));
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.3s var(--e), border-color 0.3s var(--e), background-color 0.3s var(--e);
}

/* Kolor modułu wchodzi dopiero na hover — osiem nasyconych kafelków naraz
   robiło z pulpitu paletę farb i nic z niego nie było widać. */
.mod::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 90% at 12% 0%, color-mix(in oklab, var(--m) 22%, transparent), transparent 62%);
  opacity: 0;
  transition: opacity 0.34s var(--e);
}

.mod:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--m) 42%, transparent); }
.mod:hover::before { opacity: 1; }

.mod__i {
  display: grid;
  place-items: center;
  grid-row: 1 / span 2;
  align-self: start;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in oklab, var(--m) 26%, transparent);
  border-radius: 12px;
  background: color-mix(in oklab, var(--m) 14%, transparent);
  color: var(--m);
  transition: transform 0.34s var(--e);
}

.mod__i .ico { font-size: 21px; }
.mod:hover .mod__i { transform: scale(1.06) rotate(-3deg); }

.mod__n {
  align-self: center;
  color: var(--ink);
  font-family: Archivo, sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.mod__v {
  grid-column: 2;
  color: var(--ink);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.mod__v em {
  margin-left: 7px;
  color: var(--ink-3);
  font-family: "Instrument Sans", sans-serif;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

.mod__d {
  grid-column: 2;
  margin-top: 6px;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.5;
}

/* ── 8. pasek telemetrii ───────────────────────────────────────────────── */

.tele {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: var(--edge);
  overflow: hidden;
}

.tele > div {
  position: relative;
  padding: 22px 24px;
  background: oklch(11.5% 0.018 292);
  transition: background-color 0.3s var(--e);
}

.tele > div::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--acc), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--e);
}

.tele > div:hover { background: oklch(14% 0.02 292); }
.tele > div:hover::after { transform: scaleX(1); }

.tele dt { color: var(--ink-3); font-size: 12.5px; }

.tele dd {
  margin: 6px 0 0;
  color: var(--ink);
  font-family: Archivo, sans-serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.tele dd em {
  margin-left: 4px;
  color: var(--ink-3);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

.tele--end { margin-top: clamp(38px, 4vw, 56px); }

/* ── 9. zasady ─────────────────────────────────────────────────────────── */

/* Cztery równe karty w rzędzie to jedna z sygnatur „to zrobiło AI”, którą
   użytkownik już raz odrzucił — dlatego zasady są parami szerokich wierszy
   z dużą liczbą po lewej. Rozdziela je włoskowata linia, nie ramka kafelka. */
.rules {
  display: grid;
  gap: clamp(28px, 3vw, 46px) clamp(40px, 4vw, 80px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* dwie kolumny na sztywno: auto-fit robił przy szerokiej mierze 3 + 1 */
@media (min-width: 1000px) { .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.rule {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px clamp(18px, 1.6vw, 28px);
  padding-top: clamp(22px, 2.2vw, 32px);
  border-top: 1px solid var(--edge);
}

/* Liczba jest duża i przygaszona — działa jak znak nawigacyjny, nie jak
   ozdoba. Podświetla się dopiero, gdy kursor jest na wierszu. */
.rule__n {
  grid-row: 1 / span 2;
  color: var(--ink-3);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(30px, 2.6vw, 40px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.9;
  opacity: 0.42;
  transition: color 0.34s var(--e), opacity 0.34s var(--e);
}

.rule:hover .rule__n { color: var(--acc-hi); opacity: 1; }

.rule h3 { align-self: center; font-size: clamp(19px, 1.6vw, 24px); letter-spacing: -0.024em; }
.rule p { max-width: 52ch; margin-top: 10px; color: var(--ink-3); font-size: 15px; }

/* ── 10. licencja ──────────────────────────────────────────────────────── */

.price {
  display: grid;
  gap: 1px;
  border: 1px solid var(--edge);
  border-radius: 20px;
  background: var(--edge);
  overflow: hidden;
}

@media (min-width: 900px) { .price { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }

.price__lead, .price__what { padding: clamp(30px, 3vw, 48px); background: oklch(11.5% 0.018 292); }

.price__lead {
  background:
    radial-gradient(90% 80% at 0% 0%, oklch(62.7% 0.213 293.7 / 0.14), transparent 66%),
    oklch(11.5% 0.018 292);
}

.price__big {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--ink);
  font-family: Archivo, sans-serif;
  font-size: clamp(66px, 7vw, 104px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.price__big em { color: var(--acc-hi); font-size: 0.3em; font-style: normal; font-weight: 700; letter-spacing: -0.02em; }

.price__per { margin: 14px 0 30px; color: var(--ink-3); font-size: 14.5px; }
.price__note { margin-top: 18px; color: var(--ink-3); font-size: 13px; }

.price__label {
  margin-bottom: 20px;
  color: var(--ink-3);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.price__what ul { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }

@media (min-width: 1200px) { .price__what ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } }

.price__what li { display: flex; gap: 12px; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
.price__what .ico { margin-top: 3px; font-size: 17px; color: var(--live); stroke-width: 2.1; }

/* ── 11. faq ───────────────────────────────────────────────────────────── */

.faq .head { max-width: 780px; }

.qas { border-top: 1px solid var(--edge); }

.qa { border-bottom: 1px solid var(--edge); }

.qa__q {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 26px 4px;
  color: var(--ink);
  font-family: Archivo, sans-serif;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: left;
  transition: color 0.24s var(--e);
}

.qa__q:hover { color: var(--acc-hi); }

/* Krzyżyk to dwie kreski na pseudoelementach — nie ma tu obrazka,
   więc krawędzie zostają ostre przy każdym powiększeniu. */
.qa__x { position: relative; width: 17px; height: 17px; margin-left: auto; flex: none; }
.qa__x::before, .qa__x::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.34s var(--e);
}
.qa__x::after { transform: rotate(90deg); }
.qa.is-open .qa__x::after { transform: rotate(0); }

.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--e); }
.qa.is-open .qa__a { grid-template-rows: 1fr; }
.qa__a > div { overflow: hidden; }
.qa__a p { max-width: 78ch; padding: 0 4px 28px; color: var(--ink-3); font-size: 15px; }

/* ── 12. zamknięcie i stopka ───────────────────────────────────────────── */

.end { padding-block: clamp(80px, 8vw, 140px); }

.end__box {
  position: relative;
  padding: clamp(38px, 4.5vw, 76px);
  border: 1px solid var(--edge);
  border-radius: 24px;
  background:
    radial-gradient(80% 120% at 100% 0%, oklch(62.7% 0.213 293.7 / 0.16), transparent 60%),
    oklch(12% 0.02 292);
  overflow: hidden;
}

.end__box h2 { font-size: clamp(34px, 4.6vw, 66px); }
.end__act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.foot { border-top: 1px solid var(--edge); padding-block: 48px 34px; }

.foot__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--edge);
}

.foot__nav { display: flex; flex-wrap: wrap; gap: 22px; margin-inline: auto; }
.foot__nav a { color: var(--ink-3); font-size: 14px; transition: color 0.22s var(--e); }
.foot__nav a:hover { color: var(--ink); }

.foot__build, .foot__bar p {
  color: var(--ink-3);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
}

.foot__bar { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; padding-top: 26px; }
.foot__warn { max-width: 74ch; }

/* ══════════════════════════════════════════════════════════════════════════
   13. PODGLĄD PROGRAMU

   Wszystko poniżej jest przepisane z src/main/resources/app.css oraz
   z wymiarów kontrolek w com.topclicker.fx.* — nie z oka i nie ze zrzutu.

   SKALA. Program ma okno 1000 × 600 px przy foncie 12,5 px i te proporcje
   muszą zostać. Zamiast transform: scale() (rozmywa tekst) używamy jednej
   zmiennej --u = „jeden piksel programu”, liczonej z szerokości kontenera
   przez jednostkę cqw: 1000 × 0,1cqw = dokładnie szerokość kontenera.
   Każdy wymiar poniżej to calc(N * var(--u)), gdzie N jest liczbą wprost
   z kodu programu. Okno powiększa się płynnie, a tekst renderuje się
   natywnie w docelowym rozmiarze — czyli ostro.
   ══════════════════════════════════════════════════════════════════════════ */

.tcstage {
  container-type: inline-size;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

/* Podpowiedź o przewijaniu tylko wtedy, gdy okno faktycznie się nie mieści. */
.tchint { display: none; margin-top: 14px; color: var(--ink-3); font-size: 12.5px; text-align: center; }

@media (max-width: 720px) { .tchint { display: block; } }

.tcapp {
  /* dolna granica trzyma czytelność na wąskich ekranach (wtedy scena
     przewija się w poziomie), górna nie pozwala oknu urosnąć w plakat */
  --u: clamp(0.66px, 0.1cqw, 1.34px);

  /* akcenty kart — te same stałe, co w widokach programu */
  --t-violet: #a78bfa;
  --t-cyan: #22d3ee;
  --t-ice: #38bdf8;
  --t-rose: #fb7185;
  --t-amber: #fbbf24;
  --t-water: #60a5fa;
  --t-sky: #60a5fa;
  --t-lime: #a3e635;
  --t-red: #f87171;
  --t-green: #4ade80;
  --t-orange: #fb923c;
  --t-teal: #2dd4bf;
  --t-yellow: #facc15;
  --t-gray: #7c7c88;

  width: calc(1000 * var(--u));
  min-width: calc(1000 * var(--u));
  margin-inline: auto;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: calc(18 * var(--u));
  box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.55);
  color: #c8c8d1;
  font-family: "Segoe UI", "Instrument Sans", system-ui, sans-serif;
  font-size: calc(12.5 * var(--u));
  line-height: 1.45;
  overflow: hidden;
}

/* Mgławica pod kartami. Rysuje ją js/app-backdrop.js — ten sam potok co
   com.topclicker.fx.Backdrop w scenie NEBULA, tyle że na GPU zamiast na CPU.
   Gradienty poniżej są tłem awaryjnym: widać je, gdy nie ma WebGL-a albo
   kontekst padnie. */
.tcapp {
  position: relative;
  background:
    radial-gradient(38% 46% at 76% 16%, rgba(139, 92, 246, 0.3), transparent 70%),
    radial-gradient(44% 52% at 22% 84%, rgba(99, 70, 234, 0.26), transparent 72%),
    radial-gradient(30% 38% at 92% 78%, rgba(167, 139, 250, 0.18), transparent 70%),
    linear-gradient(168deg, #12101c 0%, #0d0b14 46%, #150f24 100%);
}

/* Kanwa liczy 320 × 192 i jest rozciągana na całe okno — tak samo jak
   w programie, gdzie bufor 500 × 300 idzie na okno z wygładzaniem
   dwuliniowym. Rozciąganie robi przeglądarka, więc nic nas nie kosztuje. */
.tcbg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* treść okna leży NAD kanwą */
.tcbar, .tcbody { position: relative; z-index: 1; }

.tcapp__fallback { padding: 40px; text-align: center; }

.tcapp :where(button) { color: inherit; font: inherit; }

/* — pasek tytułu — (TitleBar: 56 px, padding 12/12/12/18, odstęp 12) */

.tcbar {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  min-height: calc(56 * var(--u));
  padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)) calc(18 * var(--u));
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}

.tclogo {
  display: grid;
  place-items: center;
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  border-radius: calc(10 * var(--u));
  background: linear-gradient(to bottom right, #8b5cf6, #6246ea);
  color: #fff;
  box-shadow: 0 calc(2 * var(--u)) calc(14 * var(--u)) rgba(124, 92, 252, 0.45);
}

.tclogo__i { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }

.tcname {
  display: flex;
  flex-direction: column;
  color: #f2f2f5;
  font-size: calc(13.5 * var(--u));
  font-weight: 700;
  line-height: 1.22;
}

.tcname em { color: #8d8d99; font-size: calc(10.5 * var(--u)); font-style: normal; font-weight: 400; }

.tcwin { display: flex; margin-left: auto; }

.tcwin__b {
  display: grid;
  place-items: center;
  width: calc(38 * var(--u));
  height: calc(30 * var(--u));
  border-radius: calc(8 * var(--u));
  color: #bcbcc6;
  transition: background-color 0.2s var(--e);
}

.tcwin__b .tcglyph { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.tcwin__b:hover { background: rgba(255, 255, 255, 0.1); }
.tcwin__b--x:hover { background: #e5484d; color: #fff; }

/* — glify — (Icon.java: siatka 24, obrys 1.7, round) */

.tcglyph {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tcglyph__f { fill: currentColor; stroke: none; }

/* — nawigacja boczna — (SideNav.WIDTH = 208) */

.tcbody { display: grid; grid-template-columns: calc(208 * var(--u)) minmax(0, 1fr); }

.tcside {
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, 0.065);
}

.tcside__list {
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u)) 0;
}

/* NavItem: 40 px wysokości, treść z paddingiem 0/12/0/8 i odstępem 10 */
.tcnav {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  height: calc(40 * var(--u));
  padding: 0 calc(12 * var(--u)) 0 calc(8 * var(--u));
  border: 1px solid transparent;
  border-radius: calc(10 * var(--u));
  color: #b3b3be;
  text-align: left;
  transition: background-color 0.2s var(--e), color 0.2s var(--e),
              border-color 0.2s var(--e), transform 0.22s var(--e);
}

.tcnav__i { color: #91919f; transition: color 0.2s var(--e); width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.tcnav span { font-size: calc(12.5 * var(--u)); }

.tcnav:hover { background: rgba(255, 255, 255, 0.05); }

.tcnav.is-on {
  background: rgba(124, 92, 252, 0.16);
  border-color: rgba(124, 92, 252, 0.3);
  color: #fff;
  transform: translateX(calc(3 * var(--u)));
}

.tcnav.is-on span { font-weight: 700; }
.tcnav.is-on .tcnav__i { color: #c9baff; }

/* pasek akcentu wyrasta pionowo, tak jak ScaleTransition w NavItem */
.tcnav__bar {
  width: calc(3 * var(--u));
  height: calc(16 * var(--u));
  flex: none;
  border-radius: calc(3 * var(--u));
  background: #8b5cf6;
  transform: scaleY(0);
  transition: transform 0.22s var(--e);
}

.tcnav.is-on .tcnav__bar { transform: scaleY(1); }

.tcside__foot { margin-top: auto; padding: 0 calc(10 * var(--u)) calc(10 * var(--u)); }

/* ProfilePane: kafelek 46 px, promień 12, treść z paddingiem 0/12 */
.tcprofile {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  height: calc(46 * var(--u));
  padding: 0 calc(12 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: calc(12 * var(--u));
  background: rgba(255, 255, 255, 0.035);
  transition: background-color 0.2s var(--e), border-color 0.2s var(--e);
}

.tcprofile:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); }
.tcprofile__i { color: #a78bfa; }
.tcprofile__c { color: #91919f; width: calc(11 * var(--u)); height: calc(11 * var(--u)); margin-left: auto; }
.tcprofile__t { display: flex; flex-direction: column; line-height: 1.25; }
.tcprofile__t em { color: #7c7c88; font-size: calc(9 * var(--u)); font-style: normal; font-weight: 700; }
.tcprofile__t b { color: #ececf1; font-size: calc(12.5 * var(--u)); font-weight: 700; }

.tcside__status {
  padding: calc(13 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* — obszar stron — (content padding 20/22) */

.tcmain { padding: calc(20 * var(--u)) calc(22 * var(--u)); min-width: 0; }

/* — pasek podzakładek — (odstęp 4, padding 3, szerokość = treść) */

.tcsubs {
  display: inline-flex;
  gap: calc(4 * var(--u));
  margin-bottom: calc(14 * var(--u));
  padding: calc(3 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: calc(10 * var(--u));
  background: rgba(15, 15, 22, 0.62);
}

.tcsub {
  padding: calc(6 * var(--u)) calc(12 * var(--u));
  border-radius: calc(8 * var(--u));
  color: #b3b3be;
  font-size: calc(11.5 * var(--u));
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 0.2s var(--e), color 0.2s var(--e);
}

.tcsub:hover { background: rgba(255, 255, 255, 0.05); }
.tcsub.is-on { background: rgba(124, 92, 252, 0.22); color: #fff; }

/* — siatka stron — (grid2: 50/50, odstęp 14; Czat: 62/38) */

.tcpage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(14 * var(--u));
  align-items: start;
}

.tcpage--wide { grid-template-columns: minmax(0, 1fr); }
.tcpage--62 { grid-template-columns: 62fr 38fr; }
.tccol { display: flex; flex-direction: column; gap: calc(14 * var(--u)); min-width: 0; }

/* strona wchodzi tak samo jak w programie: krótkie wejście od dołu */
.tcpage { opacity: 0; transform: translateY(calc(6 * var(--u))); }
.tcpage.is-in { opacity: 1; transform: none; transition: opacity 0.24s var(--e), transform 0.24s var(--e); }

/* — karta — (tło rgba(15,15,22,.74), promień 16, padding 16/18/18/18) */

.tccard {
  --a: var(--t-violet);
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: calc(16 * var(--u));
  background: rgba(15, 15, 22, 0.74);
  min-width: 0;
}

.tccard[data-tone="violet"] { --a: var(--t-violet); }
.tccard[data-tone="cyan"] { --a: var(--t-cyan); }
.tccard[data-tone="ice"] { --a: var(--t-ice); }
.tccard[data-tone="rose"] { --a: var(--t-rose); }
.tccard[data-tone="amber"] { --a: var(--t-amber); }
.tccard[data-tone="water"] { --a: var(--t-water); }
.tccard[data-tone="sky"] { --a: var(--t-sky); }
.tccard[data-tone="lime"] { --a: var(--t-lime); }
.tccard[data-tone="red"] { --a: var(--t-red); }
.tccard[data-tone="green"] { --a: var(--t-green); }
.tccard[data-tone="orange"] { --a: var(--t-orange); }
.tccard[data-tone="teal"] { --a: var(--t-teal); }
.tccard[data-tone="yellow"] { --a: var(--t-yellow); }
.tccard[data-tone="gray"] { --a: var(--t-gray); }

/* cardHeader: kafelek 30×30 promień 9, odstęp 11, kreska pod spodem 13 */
.tccard__h {
  display: flex;
  align-items: center;
  gap: calc(11 * var(--u));
  padding-bottom: calc(13 * var(--u));
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tcico {
  display: grid;
  place-items: center;
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  flex: none;
  border-radius: calc(9 * var(--u));
  background: color-mix(in srgb, var(--a) 16%, transparent);
  color: var(--a);
}

.tccard__t {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: #ececf1;
  font-size: calc(13 * var(--u));
  font-weight: 700;
  line-height: 1.24;
}

.tccard__t em { color: #8d8d99; font-size: calc(10.5 * var(--u)); font-style: normal; font-weight: 400; }

.tccard__h > .tcchip,
.tccard__h > .tcf__h,
.tchead__r { margin-left: auto; }

.tchead__r { display: flex; align-items: center; gap: calc(4 * var(--u)); }

.tccard__b { display: flex; flex-direction: column; gap: calc(14 * var(--u)); min-width: 0; }

/* — pola — (field: odstęp 6; etykieta 11.5 bold; podpowiedź 11) */

.tcf { display: flex; flex-direction: column; gap: calc(6 * var(--u)); min-width: 0; }
.tcf.is-dim { opacity: 0.4; }
.tcf__top { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.tcf__k { color: #d4d4dc; font-size: calc(11.5 * var(--u)); font-weight: 700; }
.tcf__h { margin-left: auto; color: #9a9aa8; font-size: calc(11 * var(--u)); text-align: right; }

.tcgrid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(14 * var(--u)); }

/* — kontrolki o wspólnej wysokości 34 — */

.tcin, .tckey, .tcstep, .tcseg {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: calc(10 * var(--u));
  background: rgba(255, 255, 255, 0.045);
}

.tcin {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  min-height: calc(34 * var(--u));
  padding: 0 calc(12 * var(--u));
  color: #ececf1;
  font-size: calc(12.5 * var(--u));
  min-width: 0;
}

.tcin span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcin__ph { color: #7b7b87; }
.tcin__i { margin-left: auto; color: #b0b0bb; width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.tcin--combo:hover { background: rgba(255, 255, 255, 0.07); }

.tckey {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
  min-height: calc(34 * var(--u));
  padding: 0 calc(8 * var(--u)) 0 calc(12 * var(--u));
  color: #c8c8d1;
  font-size: calc(12 * var(--u));
  text-align: left;
  transition: background-color 0.2s var(--e), border-color 0.2s var(--e);
}

.tckey__i { color: #91919f; width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.tckey:hover { background: rgba(255, 255, 255, 0.07); }
.tckey.is-live { border-color: rgba(139, 92, 246, 0.7); background: rgba(139, 92, 246, 0.08); color: #cfc0ff; }
.tckey.is-dim { opacity: 0.4; }

/* Stepper: przyciski 34×34, wartość 13 bold na środku */
.tcstep { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; height: calc(34 * var(--u)); }
.tcstep.is-dim { opacity: 0.4; }

.tcstep__b {
  display: grid;
  place-items: center;
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  border-radius: calc(8 * var(--u));
  transition: background-color 0.16s var(--e);
}

.tcstep__b:hover { background: rgba(255, 255, 255, 0.08); }
.tcstep__i { color: #b0b0bb; width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.tcstep__v { text-align: center; color: #ececf1; font-size: calc(13 * var(--u)); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Segmented: pastylka przytulona do treści, padding 3, odstęp 2 */
.tctog { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.tctog .tcf__k { margin-right: auto; }

.tcseg { display: inline-flex; gap: calc(2 * var(--u)); padding: calc(3 * var(--u)); }

.tcseg button {
  padding: calc(5 * var(--u)) calc(11 * var(--u));
  border-radius: calc(8 * var(--u));
  color: #b3b3be;
  font-size: calc(10.5 * var(--u));
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 0.18s var(--e), color 0.18s var(--e);
}

.tcseg button:hover { background: rgba(255, 255, 255, 0.06); }
.tcseg button.is-on { background: color-mix(in srgb, var(--a) 22%, transparent); color: #fff; }

/* Toggle: 52×26, gałka r≈10.7 z odstępem 2.34 od krawędzi */
.tcsw {
  position: relative;
  width: calc(52 * var(--u));
  height: calc(26 * var(--u));
  flex: none;
  border-radius: 999px;
  transition: transform 0.18s var(--e);
}

.tcsw:active { transform: scale(0.95); }

.tcsw__t {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: linear-gradient(to bottom, #ee6a5f, #c93f37);
  box-shadow: inset 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.34),
              0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(201, 63, 55, 0.24);
  transition: background 0.2s var(--e), box-shadow 0.2s var(--e);
}

.tcsw[aria-checked="true"] .tcsw__t {
  background: linear-gradient(to bottom, #4ad182, #2ba55e);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.34),
              0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(42, 180, 100, 0.26);
}

.tcsw__l {
  position: absolute;
  top: 50%;
  right: calc(6 * var(--u));
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.96);
  font-size: calc(9 * var(--u));
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: right 0.24s var(--e), left 0.24s var(--e);
}

.tcsw[aria-checked="true"] .tcsw__l { right: auto; left: calc(7.8 * var(--u)); }

.tcsw__k {
  position: absolute;
  top: calc(2.34 * var(--u));
  left: calc(2.34 * var(--u));
  width: calc(21.32 * var(--u));
  height: calc(21.32 * var(--u));
  border-radius: 999px;
  background: linear-gradient(to bottom, #fff 0%, #eceaf3 62%, #dcd8e8 100%);
  box-shadow: 0 calc(3 * var(--u)) calc(7 * var(--u)) rgba(0, 0, 0, 0.42);
  transition: transform 0.24s var(--e);
}

.tcsw[aria-checked="true"] .tcsw__k { transform: translateX(calc(26 * var(--u))); }

/* — tekst — */

.tcnote { color: #aaa; font-size: calc(10.5 * var(--u)); line-height: 1.55; }
.tcnote--warn { color: #d9a760; }
.tch { color: #ececf1; font-size: calc(12 * var(--u)); font-weight: 700; }
.tchn { display: flex; flex-direction: column; gap: calc(3 * var(--u)); }

/* StatusChip: kropka r=3.5, odstęp 7, padding 5/12/5/10, tło = kolor @8% */
.tcchip {
  display: inline-flex;
  align-items: center;
  gap: calc(7 * var(--u));
  padding: calc(5 * var(--u)) calc(12 * var(--u)) calc(5 * var(--u)) calc(10 * var(--u));
  border-radius: 999px;
  font-size: calc(11 * var(--u));
  font-weight: 700;
  white-space: nowrap;
}

.tcchip i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); flex: none; border-radius: 999px; background: currentColor; }
.tcchip[data-tone="gray"] { background: rgba(124, 124, 136, 0.08); color: #7c7c88; }
.tcchip[data-tone="green"] { background: rgba(74, 222, 128, 0.14); color: #4ade80; }
.tcchip[data-tone="red"] { background: rgba(248, 113, 113, 0.14); color: #f87171; }
.tcchip[data-tone="violet"] { background: rgba(167, 139, 250, 0.14); color: #a78bfa; }
.tcchip[data-live] i { animation: blink 1.8s var(--e-in) infinite; }

/* stepsCard: kółko 22 promień 999 tło akcent @14, numer 11 bold */
.tcsteps, .tcdots { display: flex; flex-direction: column; gap: calc(10 * var(--u)); margin: 0; padding: 0; list-style: none; }

.tcsteps li { display: flex; align-items: flex-start; gap: calc(10 * var(--u)); }

.tcsteps b {
  display: grid;
  place-items: center;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  flex: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--a) 14%, transparent);
  color: var(--a);
  font-size: calc(11 * var(--u));
  font-weight: 700;
}

.tcsteps span { color: #c8c8d1; font-size: calc(12 * var(--u)); padding-top: calc(2 * var(--u)); }

.tcdots li { position: relative; padding-left: calc(16 * var(--u)); color: #aaa; font-size: calc(10.5 * var(--u)); line-height: 1.55; }

.tcdots li::before {
  content: "";
  position: absolute;
  top: calc(6 * var(--u));
  left: 0;
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  border-radius: 999px;
  background: var(--a);
}

/* ActionButton: 34 px, promień 10, gradient + poświata w kolorze „from” */
.tcact {
  --f: #7c5cfc;
  --tt: #6246ea;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(9 * var(--u));
  min-height: calc(34 * var(--u));
  padding: 0 calc(14 * var(--u));
  border-radius: calc(10 * var(--u));
  background: linear-gradient(to bottom right, var(--f), var(--tt));
  color: #fff;
  font-size: calc(12.5 * var(--u));
  font-weight: 700;
  text-align: center;
  box-shadow: 0 calc(4 * var(--u)) calc(16 * var(--u)) color-mix(in srgb, var(--f) 38%, transparent);
  transition: transform 0.2s var(--e), filter 0.2s var(--e);
}

.tcact__i { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
/* Rozjaśnienie nakładką, nie `filter: brightness()` — dokładnie tak robi to
   ActionButton w programie (`btn-overlay`), a przy okazji nie zakłada
   przycisku warstwą filtra. */
.tcact:hover { transform: scale(1.02); background-image: linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14)), linear-gradient(to bottom right, var(--f), var(--tt)); }
.tcact:active { transform: scale(0.97); }
.tcact.is-dim { opacity: 0.4; box-shadow: none; }

.tcact[data-tone="violet"] { --f: #7c5cfc; --tt: #6246ea; }
.tcact[data-tone="green"] { --f: #4ade80; --tt: #33b364; }
.tcact[data-tone="macrogreen"] { --f: #22a04d; --tt: #15803d; }
.tcact[data-tone="orange"] { --f: #fb923c; --tt: #d97b26; }
.tcact[data-tone="amber"] { --f: #fbbf24; --tt: #d97b26; }
.tcact[data-tone="ice"] { --f: #38bdf8; --tt: #6366f1; }
.tcact[data-tone="red"] { --f: #f87171; --tt: #dc4b4b; }
.tcact[data-tone="danger"] { --f: #c2544f; --tt: #8c2f2b; }
.tcact[data-tone="export"] { --f: #6d4fd8; --tt: #4a26a3; }
.tcact[data-tone="import"] { --f: #3f6fbf; --tt: #24508f; }
.tcact[data-tone="reset"] { --f: #b08420; --tt: #7f5610; }
.tcact[data-tone="chat"] { --f: #7c4ddb; --tt: #4f28a8; }

/* ghostButton: 30 px, ramka KRESKOWANA, tło rgba(255,255,255,.025) */
.tcghost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(7 * var(--u));
  min-height: calc(30 * var(--u));
  padding: calc(6 * var(--u)) calc(12 * var(--u));
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: calc(10 * var(--u));
  background: rgba(255, 255, 255, 0.025);
  color: #b3b3be;
  font-size: calc(11.5 * var(--u));
  font-weight: 700;
  text-align: center;
  transition: background-color 0.2s var(--e), border-color 0.2s var(--e);
}

.tcghost:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.26); }
.tcghost__i { color: #b0b0bb; width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.tcghost.is-dim { opacity: 0.4; }

/* — wiersze list (komendy, nicki, bindy) — */

.tcrows { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.tcrow { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.tcrow > .tcin { flex: 1 1 auto; }
.tcrow > .tcstep { flex: none; width: calc(122 * var(--u)); }
.tcrow--bind > .tckey { flex: none; width: calc(180 * var(--u)); }

.tcx {
  display: grid;
  place-items: center;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  flex: none;
  border-radius: calc(8 * var(--u));
  color: #b0b0bb;
  transition: background-color 0.16s var(--e), color 0.16s var(--e);
}

.tcx:hover { background: rgba(229, 72, 77, 0.2); color: #f2868a; }
.tcx__i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }

.tcmove { display: flex; flex-direction: column; flex: none; color: #7c7c88; }
.tcmove__u { transform: rotate(180deg); }
.tcmove__u, .tcmove__d { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }

/* — konsola czatu i dziennika — */

.tcbox {
  min-height: calc(150 * var(--u));
  padding: calc(12 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: calc(10 * var(--u));
  background: rgba(10, 10, 16, 0.55);
}

.tcsend { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.tcsend .tcin { flex: 1 1 auto; }
.tcsend .tcact { flex: none; }

/* — pudełko licencji — (license-box: promień 12, padding 14/16) */

.tclic {
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: calc(12 * var(--u));
  background: rgba(255, 255, 255, 0.035);
}

.tclic b { display: block; font-size: calc(25 * var(--u)); font-weight: 700; line-height: 1.15; }
.tclic[data-tone="green"] b { color: #4ade80; }
.tclic[data-tone="yellow"] b { color: #facc15; }
.tclic[data-tone="red"] b { color: #f87171; }
.tclic[data-tone="violet"] b { color: #a78bfa; }
.tclic span { display: block; margin-top: calc(2 * var(--u)); color: #83838f; font-size: calc(9.5 * var(--u)); font-weight: 700; }

.tcinfo { display: flex; align-items: baseline; gap: calc(10 * var(--u)); }
.tcinfo span { color: #d4d4dc; font-size: calc(11.5 * var(--u)); font-weight: 700; }
.tcinfo b { margin-left: auto; color: #ececf1; font-size: calc(12 * var(--u)); font-weight: 700; }

/* — wirtualny ekwipunek — (inv-panel: tło rgba(0,0,0,.28), promień 12) */

/* Panel przytula treść: 9 slotów × 30 + 8 przerw × 3 + 2 × 12 paddingu = 318.
   W programie robi to `panel.setMaxWidth(Region.USE_PREF_SIZE)`. */
.tcinv {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  width: calc(318 * var(--u));
  padding: calc(12 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: calc(12 * var(--u));
  background: rgba(0, 0, 0, 0.28);
}

.tcinv__top { display: flex; align-items: flex-start; gap: calc(14 * var(--u)); }
.tcinv__armor { display: flex; flex-direction: column; gap: calc(3 * var(--u)); flex: none; }

.tcinv__g { display: grid; grid-template-columns: repeat(9, calc(30 * var(--u))); gap: calc(3 * var(--u)); }
/* dodatkowe 4 px przerwy plecak/hotbar — jak w oknie ekwipunku w grze */
.tcinv__g--bar { margin-top: calc(4 * var(--u)); }

.tcslot {
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: calc(6 * var(--u));
  background: rgba(255, 255, 255, 0.05);
  transition: background-color 0.16s var(--e), border-color 0.16s var(--e);
}

.tcslot:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.3); }
.tcslot.is-on { background: rgba(229, 72, 77, 0.14); border-color: rgba(229, 72, 77, 0.55); }

.tcslot--armor {
  display: grid;
  place-items: center;
  border-color: color-mix(in srgb, var(--tc-p) 45%, transparent);
  background: color-mix(in srgb, var(--tc-p) 10%, transparent);
  color: var(--tc-p);
}

.tcslot--armor.is-on { background: color-mix(in srgb, var(--tc-p) 22%, transparent); border-color: color-mix(in srgb, var(--tc-p) 90%, transparent); }
.tcslot__i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }

/* — wiersz makra — (macro-row: promień 10, ramka rgba(255,255,255,.06)) */

.tcmacro {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  padding: calc(12 * var(--u));
  border: 1px solid rgba(139, 92, 246, 0.45);
  border-radius: calc(10 * var(--u));
  background: rgba(139, 92, 246, 0.06);
}

.tcmacro__h { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.tcmacro__dot { width: calc(7 * var(--u)); height: calc(7 * var(--u)); flex: none; border-radius: 999px; background: #7c7c88; }
.tcmacro__h b { color: #ececf1; font-size: calc(13 * var(--u)); font-weight: 700; }
.tcmacro__m { margin-left: auto; color: #8e8e9a; font-size: calc(10 * var(--u)); }
.tcmacro__c { display: grid; place-items: center; width: calc(24 * var(--u)); height: calc(24 * var(--u)); color: #b0b0bb; transform: rotate(180deg); }
.tcmacro__c .tcglyph { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.tcmacro .tcf { gap: calc(8 * var(--u)); }

/* ── 14. wejścia i ruch ────────────────────────────────────────────────── */

/* Stany startowe siedzą pod .js — bez skryptu strona pokazuje całą treść. */
.js [data-anim] { opacity: 0; transform: translateY(22px); }

.js [data-anim].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.62s var(--e), transform 0.62s var(--e);
  transition-delay: var(--d, 0ms);
}

/* Nagłówek rozjaśnia się słowo po słowie — dzieli go js/script.js. */
.js [data-split] .w { display: inline-block; opacity: 0; transform: translateY(0.42em); }

.js [data-split].is-in .w {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s var(--e), transform 0.6s var(--e);
  transition-delay: calc(var(--i) * 42ms);
}

/* Kafelki pulpitu wjeżdżają po kolei, ale krótko — cały pulpit składa się
   w ~0,5 s, więc nikt nie czeka na treść. */
.js .deck .mod { opacity: 0; transform: translateY(18px) scale(0.985); }

.js .hero__deck.is-in .mod {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s var(--e), transform 0.5s var(--e);
  transition-delay: calc(var(--i) * 55ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-anim], .js [data-split] .w, .js .deck .mod { opacity: 1; transform: none; }
}

/* ── 15. węższe ekrany ─────────────────────────────────────────────────── */

@media (max-width: 1079px) {
  .hero__deck { order: 2; }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 84px; }
  .nav__row { height: 64px; }
  .burger { display: block; }
  .nav__end .lnk, .nav__end .ver { display: none; }

  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 2px;
    padding: 10px var(--pad) 18px;
    background: oklch(9% 0.018 292);
    border-bottom: 1px solid var(--edge);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s var(--e), transform 0.24s var(--e);
  }

  .nav__links.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav__links a { padding: 12px 14px; font-size: 16px; }
  .nav__marker { display: none; }

  .price__lead, .price__what { padding: 28px 22px; }
  .foot__nav { margin-inline: 0; width: 100%; }
}

@media (max-width: 560px) {
  .deck { grid-template-columns: minmax(0, 1fr); }
  .btn--big { width: 100%; justify-content: center; }
  .hero__act, .end__act { flex-direction: column; align-items: stretch; }
}