/*
  AI Lab — style współdzielone przez wszystkie podstrony serwisu.
  Kolory i typografia importowane wprost z brand/tokens.css — jedyne
  źródło prawdy dla palety (patrz CLAUDE.md, sekcja "System projektowy").

  Tokeny dopisane niżej są rozszerzeniem specyficznym dla serwisu WWW.
  Nie nadpisują nazw z brand/tokens.css — dokładają własne (--panel,
  --fs-section itd.), bo skala 16/14/12 pt z tokenów jest skalą DOKUMENTU
  (Word/PDF), a nie strony o szerokości 1120 px.
*/
@import url("brand/tokens.css");

:root {
  /* --- skala typograficzna serwisu (osobna od dokumentowej) --- */
  --fs-display: clamp(2.6rem, 1.5rem + 4.4vw, 4.25rem);   /* h1 na stronie głównej */
  --fs-page-title: clamp(2.05rem, 1.5rem + 2.2vw, 3rem);  /* h1 na podstronach */
  --fs-section: clamp(1.65rem, 1.25rem + 1.5vw, 2.3rem);  /* h2 sekcji */
  --fs-card-title: 1.2rem;                                /* h3 w kartach */
  --fs-lead: 1.1rem;
  --fs-eyebrow: 0.76rem;

  /* Comfortaa jest szeroka — duży stopień wymaga ujemnego trackingu,
     inaczej nagłówek się rozjeżdża i traci masę. */
  --tracking-display: -0.03em;
  --tracking-section: -0.02em;

  /* --- powierzchnie serwisu: podbarwione śliwką, nie neutralnie szare ---
     Neutralne #F8F8F8 / #EEEEEE obok fioletu i pomarańczu czytały się jak
     beton. Plum 100 (#F4E9F5) jest już w systemie — stopka dokumentów. */
  --panel: #FBF8FC;
  --panel-2: #F4E9F5;
  --panel-line: #E9DCEA;

  --shadow-card: 0 24px 48px -28px rgba(88, 25, 95, 0.34);
  --shadow-cta: 0 14px 30px -14px rgba(255, 78, 0, 0.5);
  --nav-surface: rgba(255, 255, 255, 0.82);
  --node-line: rgba(88, 25, 95, 0.22);
  --grain-opacity: 0.032;
  --footer-rule: transparent;

  /* --- skala z-index: jedno miejsce zamiast przypadkowych liczb --- */
  --z-nav: 50;
  --z-skip: 100;
  --z-grain: 300;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --panel: #4E1655;
    --panel-2: #3F1145;
    --panel-line: rgba(255, 255, 255, 0.14);
    --shadow-card: 0 24px 48px -26px rgba(0, 0, 0, 0.6);
    --nav-surface: rgba(71, 19, 77, 0.84);
    --node-line: rgba(255, 255, 255, 0.16);
    --grain-opacity: 0.05;
    --footer-rule: rgba(255, 255, 255, 0.16);
  }
}
:root[data-theme="dark"] {
  --panel: #4E1655;
  --panel-2: #3F1145;
  --panel-line: rgba(255, 255, 255, 0.14);
  --shadow-card: 0 24px 48px -26px rgba(0, 0, 0, 0.6);
  --nav-surface: rgba(71, 19, 77, 0.84);
  --node-line: rgba(255, 255, 255, 0.16);
  --grain-opacity: 0.05;
  --footer-rule: rgba(255, 255, 255, 0.16);
}

/* --- reset / base --- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
/* Ziarno na wierzchu całej strony — łamie cyfrową płaskość, nie łapie kliknięć. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-grain);
  opacity: var(--grain-opacity);
  background-image: url("grain.svg");
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
h1, h2 { letter-spacing: var(--tracking-section); }
p { margin: 0; text-wrap: pretty; }
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-ink-muted);
}
/* Pomarańcz w nadtytule tylko tam, gdzie sekcja naprawdę ma wołać —
   nie sześć razy na jednej stronie. */
.eyebrow.accent { color: var(--orange); }
.num { font-variant-numeric: tabular-nums; }

/* Dolny padding minimalnie większy od górnego — optycznie sekcja siada
   wtedy równo; przy 88/88 wydaje się przesunięta w górę. */
section { padding: 92px 0 104px; }
section.tight { padding: 64px 0 72px; }
.rule-top { border-top: 1px solid var(--rule); }
.surface-2 { background: var(--panel-2); }
.surface-1 { background: var(--panel); }
.center { text-align: center; }
.stack-lg { margin-top: 40px; }
.stack-md { margin-top: 24px; }
.stack-sm { margin-top: 14px; }
.measure { max-width: 62ch; }
.muted { color: var(--ink-muted); }
.lead { font-size: var(--fs-lead); color: var(--ink-muted); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 12px; top: -48px;
  background: var(--orange); color: #fff;
  padding: 10px 16px; border-radius: 8px;
  font-weight: 700; text-decoration: none;
  transition: top 0.15s ease;
  z-index: var(--z-skip);
}
.skip-link:focus { top: 12px; }

/* --- wejście sekcji przy przewijaniu ---
   Klasa .is-ready trafia na <html> ze skryptu, więc bez JS-a treść jest
   po prostu widoczna, a nie ukryta na zawsze. */
@media (prefers-reduced-motion: no-preference) {
  .is-ready .reveal { opacity: 0; transform: translateY(18px); }
  .is-ready .reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity 0.6s cubic-bezier(.2,.7,.3,1), transform 0.6s cubic-bezier(.2,.7,.3,1);
  }
  /* kaskada wewnątrz siatki — elementy wchodzą po kolei, nie naraz */
  .is-ready .reveal.is-in > * { animation: riseIn 0.55s cubic-bezier(.2,.7,.3,1) both; }
  .is-ready .reveal.is-in > *:nth-child(2) { animation-delay: 0.06s; }
  .is-ready .reveal.is-in > *:nth-child(3) { animation-delay: 0.12s; }
  .is-ready .reveal.is-in > *:nth-child(4) { animation-delay: 0.18s; }
}
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --- nav --- */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--nav-surface);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Kreska pod nawigacją pojawia się dopiero po przewinięciu — na samej
   górze pasek ma zlewać się z heroem. */
.nav.is-stuck {
  border-bottom-color: var(--rule);
  box-shadow: 0 8px 24px -20px rgba(88, 25, 95, 0.5);
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 24px;
}
/* display:block jest tu konieczny — na elemencie inline (a/span)
   szerokość i marginesy pionowe są ignorowane. */
.nav-logo { display: block; width: 132px; flex-shrink: 0; }
.nav-logo .logo-dark-mark { display: none; }
:root:not([data-theme="light"]) .nav-logo .logo-dark-mark,
:root[data-theme="dark"] .nav-logo .logo-dark-mark { display: block; }
:root:not([data-theme="light"]) .nav-logo .logo-light-mark,
:root[data-theme="dark"] .nav-logo .logo-light-mark { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .nav-logo .logo-dark-mark { display: none; }
  :root:not([data-theme="dark"]) .nav-logo .logo-light-mark { display: block; }
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-weight: 600;
  font-size: 0.92rem;
}
.nav-links a {
  position: relative;
  text-decoration: none;
  opacity: 0.82;
  padding: 6px 0;
  transition: opacity 0.18s ease, color 0.18s ease;
}
/* Podkreślenie rysuje się od lewej, zamiast pojawiać się skokowo. */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s cubic-bezier(.2,.7,.3,1);
}
.nav-links a:hover, .nav-links a:focus-visible { opacity: 1; color: var(--orange); }
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { opacity: 1; }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.nav-toggle:hover { background: var(--panel-2); border-color: var(--purple-muted); }
.nav-toggle:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav.is-open .nav-toggle .icon-open { display: none; }
.nav.is-open .nav-toggle .icon-close { display: block; }

/* --- buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 13px 24px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(.2,.7,.3,1), box-shadow 0.16s ease,
              background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
/* Wciśnięcie musi być czuć — sam hover to za mało. */
.btn:active { transform: translateY(1px) scale(0.985); }
.btn-primary {
  background: var(--orange);
  color: #FFFFFF;
  box-shadow: var(--shadow-cta);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -14px rgba(255, 78, 0, 0.58); }
.btn-primary:active { transform: translateY(0) scale(0.985); box-shadow: var(--shadow-cta); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
.btn-ghost:hover { border-color: var(--purple-muted); background: var(--panel-2); transform: translateY(-1px); }
.btn-text {
  background: none;
  padding: 4px 0;
  color: var(--ink);
  font-weight: 700;
  border-radius: 0;
}
.btn-text .arrow { color: var(--orange); transition: transform 0.18s cubic-bezier(.2,.7,.3,1); }
.btn-text:hover { color: var(--orange); }
.btn-text:hover .arrow { transform: translateX(4px); }
.btn-text:active { transform: none; }
.btn-block { width: 100%; justify-content: center; }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.55; pointer-events: none; }

/* --- hero (strona główna) --- */
.hero { padding: 84px 0 104px; position: relative; overflow: hidden; }
/* Miękka poświata zamiast płaskiej bieli pod heroem. */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto -25%;
  height: 900px;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 72% 40%, rgba(255, 78, 0, 0.10), transparent 70%),
    radial-gradient(55% 50% at 18% 22%, rgba(88, 25, 95, 0.09), transparent 70%);
}
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: center; }
.hero h1 {
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
  margin-top: 20px;
}
.hero h1 .accent { color: var(--orange); }
.hero-sub { max-width: 46ch; margin-top: 24px; color: var(--ink-muted); font-size: var(--fs-lead); }
.hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 36px; }
.hero-facts { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--rule); }
.hero-fact strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.55rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.hero-fact span { font-size: 0.86rem; color: var(--ink-muted); }
.hero-art { position: relative; }
.hero-art svg { width: 100%; height: auto; }
.node { fill: var(--orange); }
.node-muted { fill: var(--purple-muted); opacity: 0.55; }
.node-faint { fill: var(--orange); opacity: 0.25; }
.hero-glow { transform-origin: 260px 260px; }

/* Latające obiekty na całej szerokości heroa (nie tylko wokół maskotki) —
   .hero-field wypełnia cały baner (.hero ma już position:relative i
   overflow:hidden), a każdy .fly to niewidoczne "pudełko" orbity: rotuje się
   wokół własnego środka, kropka siedzi u góry pudełka, więc rysuje elipsę o
   promieniach = połowa szerokości/wysokości pudełka. Część pudełek wychodzi
   poza 0-100% (top/left ujemne albo left+width > 100%), więc kropka realnie
   znika za krawędzią heroa i wraca przy kolejnym obiegu. */
.hero-field { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero .wrap { z-index: 1; }
.fly { position: absolute; }
.fly-dot { position: absolute; top: 0; left: 50%; transform: translateX(-50%); border-radius: 50%; }
.fly-dot--pulse { background: var(--orange); }
.fly-dot--muted { background: var(--purple-muted); opacity: 0.55; }
.fly-dot--faint { background: var(--orange); opacity: 0.25; }
.fly--1 { left: 0%; top: 8%; width: 26%; height: 70%; }
.fly--2 { left: 6%; top: 42%; width: 18%; height: 50%; }
.fly--3 { left: 18%; top: -12%; width: 22%; height: 60%; }
.fly--4 { left: 28%; top: 55%; width: 20%; height: 45%; }
.fly--5 { left: 38%; top: 4%; width: 16%; height: 80%; }
.fly--6 { left: 48%; top: 60%; width: 24%; height: 55%; }
.fly--7 { left: 58%; top: -6%; width: 20%; height: 65%; }
.fly--8 { left: 66%; top: 34%; width: 16%; height: 40%; }
.fly--9 { left: 76%; top: 8%; width: 22%; height: 75%; }
.fly--10 { left: 84%; top: 44%; width: 18%; height: 50%; }
.fly--11 { left: 90%; top: 2%; width: 20%; height: 65%; }
.fly--12 { left: 94%; top: 55%; width: 16%; height: 45%; }
.hero-art {
  cursor: pointer;
  --tilt-x: 0px;
  --tilt-y: 0px;
  --tilt-rot: 0deg;
}
.hero-bot-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  transform: translate(-50%, -50%) translate(var(--tilt-x), var(--tilt-y)) rotate(var(--tilt-rot));
  /* Długi, "doganiający" czas dojazdu — robot celowo zostaje w tyle za
     kursorem zamiast skakać do niego natychmiast. */
  transition: transform 1.3s cubic-bezier(.16,.84,.44,1);
}
.hero-bot-badge-pos {
  position: absolute;
  top: 8%;
  left: 50%;
  width: 38%;
  transform: translate(var(--tilt-x), var(--tilt-y));
  transition: transform 1.3s cubic-bezier(.16,.84,.44,1);
  pointer-events: none;
}
.hero-art svg.hero-bot-badge {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: scale(0.4);
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.3));
  transition: opacity 0.25s ease, transform 0.4s cubic-bezier(.22,1,.36,1);
}
.hero-art svg.hero-bot-badge.is-visible { opacity: 1; }
.hero-bot-badge .cloud-shape path,
.hero-bot-badge .cloud-shape circle {
  fill: transparent;
  stroke: var(--purple);
  stroke-opacity: 0.5;
  stroke-width: 3;
}
.badge-icon {
  fill: var(--purple);
  fill-opacity: 0.75;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
}
/* Na fioletowym tle trybu ciemnego sam fiolet zlewałby się z tłem (to ten
   sam kolor) — obrys plakietki i napis przechodzą na pomarańcz, jak maskotka
   i CTA obok niej; wypełnienie chmurki zostaje przeźroczyste w obu motywach. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-bot-badge .cloud-shape path,
  :root:not([data-theme="light"]) .hero-bot-badge .cloud-shape circle { stroke: var(--orange); }
  :root:not([data-theme="light"]) .badge-icon { fill: var(--orange); }
}
:root[data-theme="dark"] .hero-bot-badge .cloud-shape path,
:root[data-theme="dark"] .hero-bot-badge .cloud-shape circle { stroke: var(--orange); }
:root[data-theme="dark"] .badge-icon { fill: var(--orange); }
.badge-icon { opacity: 0; }
.badge-icon.is-active { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero-art .orbit-dot--1 { animation: spin 26s linear infinite; transform-origin: 260px 260px; }
  .hero-art .orbit-dot--2 { animation: spin 26s linear infinite reverse; transform-origin: 260px 260px; }
  .hero-art .orbit-dot--3 { animation: spin 19s linear infinite reverse; transform-origin: 260px 260px; }
  .hero-art .orbit-dot--4 { animation: spin 19s linear infinite; transform-origin: 260px 260px; }
  .hero-art .orbit-dot--5 { animation: spin 33s linear infinite; transform-origin: 260px 260px; }
  .hero-art .orbit-dot--6 { animation: spin 33s linear infinite reverse; transform-origin: 260px 260px; }
  .hero-art .orbit-dot--7 { animation: spin 21s linear infinite reverse; transform-origin: 260px 260px; }
  .hero-art .orbit-dot--8 { animation: spin 21s linear infinite; transform-origin: 260px 260px; }
  .hero-art .orbit-dot--9 { animation: spin 40s linear infinite; transform-origin: 260px 260px; }
  .hero-art .orbit-dot--10 { animation: spin 28s linear infinite reverse; transform-origin: 260px 260px; }
  .hero-art .pulse { animation: pulse 3.6s ease-in-out infinite; transform-origin: center; }
  .fly--1 { animation: spin 26s linear infinite; }
  .fly--2 { animation: spin 31s linear infinite reverse; }
  .fly--3 { animation: spin 42s linear infinite; }
  .fly--4 { animation: spin 24s linear infinite reverse; }
  .fly--5 { animation: spin 35s linear infinite reverse; }
  .fly--6 { animation: spin 48s linear infinite; }
  .fly--7 { animation: spin 22s linear infinite; }
  .fly--8 { animation: spin 29s linear infinite reverse; }
  .fly--9 { animation: spin 40s linear infinite reverse; }
  .fly--10 { animation: spin 20s linear infinite; }
  .fly--11 { animation: spin 33s linear infinite; }
  .fly--12 { animation: spin 46s linear infinite reverse; }
  .fly-dot--pulse { animation: pulse 3.6s ease-in-out infinite; }
  .hero-glow { animation: breathe 5s ease-in-out infinite; }
  .hero-art svg.hero-bot-badge.is-visible { transform: scale(1); transition: opacity 0.3s ease, transform 0.45s cubic-bezier(.34,1.56,.64,1); }
  .fade-up { animation: fadeUp 0.7s cubic-bezier(.2,.7,.3,1) both; }
  .fade-up.d1 { animation-delay: 0.08s; }
  .fade-up.d2 { animation-delay: 0.16s; }
  .fade-up.d3 { animation-delay: 0.24s; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes breathe { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* --- page header (podstrony) --- */
.page-header { padding: 64px 0 72px; position: relative; }
/* Nagłówek podstrony trzyma tę samą lewą krawędź co sekcje pod nim —
   węższa, wyśrodkowana kolumna rozjeżdżała się z resztą strony.
   Szerokość ogranicza sam tekst, nie kontener. */
.page-header h1 {
  font-size: var(--fs-page-title);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
  margin-top: 16px;
  max-width: 22ch;
}
.page-header p { margin-top: 20px; color: var(--ink-muted); font-size: var(--fs-lead); max-width: 56ch; }
.page-header .lead-claim {
  margin-top: 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--brand-ink);
  max-width: 40ch;
}
.page-header .lead-claim + p { margin-top: 14px; }
.page-header.with-art .wrap { max-width: 1120px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.page-header.with-art .copy p { max-width: 46ch; }

/* --- section heads --- */
.section-head { display: grid; grid-template-columns: 1.25fr 0.75fr; align-items: end; gap: 48px; margin-bottom: 52px; }
.section-head h2 {
  font-size: var(--fs-section);
  line-height: 1.12;
  margin-top: 12px;
  max-width: 20ch;
}
.section-head p { color: var(--ink-muted); max-width: 44ch; }
.section-head.solo { grid-template-columns: 1fr; }
.section-head.solo h2 { max-width: 26ch; }

/* --- proces: sekwencja na wspólnej linii, nie cztery pudełka --- */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 40px; }
.process-step {
  padding: 26px 0 0;
  border-top: 2px solid var(--rule);
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color 0.25s ease;
}
.process-step:hover { border-top-color: var(--orange); }
.process-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--orange);
}
.process-num svg { width: 30px; height: 30px; display: block; }
.process-step h3 { font-size: var(--fs-card-title); line-height: 1.25; }
.process-step p { color: var(--ink-muted); font-size: 0.94rem; }
.process-step .process-detail {
  margin-top: auto; padding-top: 14px;
  font-size: 0.84rem; color: var(--ink-muted);
}
/* Kafelek CTA na końcu sekwencji — jedyny, który zostaje pudełkiem. */
.process-step.process-cta {
  background: var(--orange);
  border-top: 0;
  border-radius: 18px;
  padding: 28px 26px;
  color: #FFFFFF;
}
.process-step.process-cta .process-num,
.process-step.process-cta h3 { color: #FFFFFF; }
.process-step.process-cta p { color: rgba(255, 255, 255, 0.86); }
.process-step.process-cta .btn-primary {
  margin-top: 12px; align-self: flex-start;
  background: #FFFFFF; color: var(--orange); box-shadow: none;
}
.process-step.process-cta .btn-primary:hover {
  background: #FFFFFF; transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.4);
}

/* --- ścieżki / grupy --- */
.age-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.age-card {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 22px;
  padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
  transition: transform 0.22s cubic-bezier(.2,.7,.3,1), border-color 0.22s ease, box-shadow 0.22s ease;
}
.age-card:hover { transform: translateY(-3px); border-color: var(--purple-muted); box-shadow: var(--shadow-card); }
.age-range {
  display: inline-flex; align-self: flex-start;
  background: var(--orange-soft); color: var(--orange);
  font-family: var(--font-body); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 8px;
}
.age-card h3 { font-size: var(--fs-card-title); line-height: 1.25; }
.age-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 0.94rem; color: var(--ink-muted); }
.age-card li { display: flex; gap: 10px; }
.age-card li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); margin-top: 9px; flex-shrink: 0; }
.age-card .age-example {
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--panel-line);
  font-size: 0.88rem; color: var(--ink-muted);
}
.age-card .age-example strong { display: block; color: var(--ink); font-family: var(--font-body); font-size: 0.88rem; margin-bottom: 4px; }
.age-card .age-link { margin-top: 4px; font-weight: 700; font-size: 0.9rem; text-decoration: none; display: inline-flex; gap: 6px; }
.age-card .age-link .arrow { color: var(--orange); }
.age-grid-2 { grid-template-columns: repeat(2, 1fr); }

/* --- etap / ścieżka (program dwuetapowy) --- */
.stage-block {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-left: 3px solid var(--orange);
  border-radius: 0 22px 22px 0;
  padding: 30px 32px;
  display: flex; flex-direction: column; gap: 12px; max-width: 720px;
}
.stage-block h3 { font-size: var(--fs-card-title); }
.stage-block p { color: var(--ink-muted); font-size: 0.94rem; }

/* --- zasady: lista redakcyjna, nie czwórka kafli --- */
.value-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; }
.value-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 22px;
  padding: 32px 0;
  border-top: 1px solid var(--rule);
}
.value-card:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.value-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--orange);
  grid-row: span 2;
  padding-top: 4px;
}
.value-card h3 { font-size: var(--fs-card-title); line-height: 1.25; margin-bottom: 8px; }
.value-card p { color: var(--ink-muted); font-size: 0.94rem; max-width: 40ch; }

/* --- pas dla szkół --- */
.schools {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to left, rgba(255, 78, 0, 0.34), rgba(255, 78, 0, 0) 60%), var(--purple);
  color: #FFFFFF;
  border-radius: 28px;
  padding: 56px;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px;
  box-shadow: var(--shadow-card);
}
.schools h2 { color: #FFFFFF; font-size: var(--fs-section); line-height: 1.14; max-width: 20ch; }
.schools p { color: rgba(255, 255, 255, 0.78); margin-top: 14px; max-width: 48ch; }
.schools .btn-ghost { border-color: rgba(255, 255, 255, 0.4); color: #FFFFFF; }
.schools .btn-ghost:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, 0.1); }

/* --- cennik / zapisy --- */
.pricing-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: start; }
/* Karta ceny to jedyny obiekt konwersji na stronie — tu cień coś znaczy. */
.price-card {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 24px;
  padding: 36px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 22px;
}
.price-card.is-centered { max-width: 560px; margin: 0 auto; }
.price-tag { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display); color: var(--ink); }
.price-tag .amount {
  font-size: 2.9rem; font-weight: 700; line-height: 1;
  letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
}
.price-tag .unit { color: var(--ink-muted); font-family: var(--font-body); font-size: 0.95rem; }
.price-tag .was {
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: 1.35rem;
  font-weight: 600;
  text-decoration-color: var(--orange);
}
.price-tag .was[hidden] { display: none; }

/* --- kalkulator ceny (index.html): kod promocyjny + wariant płatności --- */
.price-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  background: var(--panel-2);
  border-radius: 16px;
}
.price-toggle { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; color: var(--ink); cursor: pointer; }
.price-toggle input { accent-color: var(--orange); width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }
.price-toggle small { display: block; color: var(--ink-muted); font-size: 0.8rem; font-weight: 400; }
.price-options .field label { margin-bottom: 0; }
.plan-tabs { display: flex; gap: 4px; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 12px; padding: 4px; }
.plan-tab {
  flex: 1;
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 9px 8px;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.plan-tab:hover { color: var(--ink); }
.plan-tab.is-active { background: var(--purple); color: var(--white); }
.plan-tab:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.price-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
/* Wcięcie wiszące zamiast flexa na <li>: przy flexie <strong> i tekst
   po nim stawały się osobnymi kolumnami i zdanie łamało się na pół. */
.price-steps li {
  position: relative;
  padding-left: 40px;
  font-size: 0.95rem;
  color: var(--ink-muted);
}
.price-steps li strong { color: var(--ink); }
.price-steps .step-num {
  position: absolute; left: 0; top: 1px;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--orange-soft); color: var(--orange);
  font-family: var(--font-display); font-weight: 700; font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
}
.price-note { font-size: 0.85rem; color: var(--ink-muted); border-top: 1px solid var(--panel-line); padding-top: 16px; }
.price-note.no-rule { border-top: 0; padding-top: 0; }
/* Macierz cen — tabela zamiast zdania z ukośnikami. */
.price-matrix { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.price-matrix th, .price-matrix td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--panel-line); }
.price-matrix thead th {
  font-family: var(--font-body); font-weight: 600; font-size: 0.76rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted);
}
.price-matrix tbody th { font-weight: 600; color: var(--ink); }
.price-matrix td { color: var(--ink-muted); }
.price-matrix .is-best { color: var(--orange); font-weight: 700; }
.price-matrix tbody tr:last-child th, .price-matrix tbody tr:last-child td { border-bottom: 0; }

/* --- formularze --- */
.form-card { background: var(--panel-2); border-radius: 24px; padding: 36px; display: flex; flex-direction: column; gap: 20px; }
.form-card h3 { font-size: var(--fs-card-title); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.84rem; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 0.95rem; padding: 12px 14px;
  border-radius: 12px; border: 1px solid var(--rule);
  background: var(--bg); color: var(--ink); resize: vertical;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--purple-muted); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-soft);
}
/* Błąd pokazujemy dopiero po próbie wysłania — nie karzemy za puste pole,
   którego użytkownik jeszcze nie tknął. */
.field .field-error { font-size: 0.82rem; color: var(--orange); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--orange); }
.form-card .btn-primary { align-self: flex-start; }
.form-note { font-size: 0.84rem; color: var(--ink-muted); }
.form-note.is-ok { color: var(--success); font-weight: 600; }
.form-note.is-error { color: var(--orange); font-weight: 600; }
.form-honeypot { position: absolute; left: -9999px; top: -9999px; }

/* --- lista danych kontaktowych --- */
.contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.contact-list .label {
  display: block; font-size: 0.78rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 2px;
}
.contact-list .value { font-weight: 700; }
.contact-list a.value { text-decoration: none; border-bottom: 1px solid var(--orange); }
.contact-list a.value:hover { color: var(--orange); }
/* Link w środku akapitu — podkreślenie zamiast samego pogrubienia,
   żeby dało się go odróżnić od zwykłego wyróżnienia. */
.contact-inline { font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--orange); }
.contact-inline:hover { color: var(--orange); }

/* --- FAQ --- */
.faq { display: flex; flex-direction: column; max-width: 800px; }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item:first-child { border-top: 1px solid var(--rule); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.35;
  transition: color 0.16s ease;
}
.faq-item summary:hover { color: var(--orange); }
.faq-item summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 6px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-plus {
  color: var(--orange); font-size: 1.4rem; line-height: 1; flex-shrink: 0;
  transition: transform 0.22s cubic-bezier(.2,.7,.3,1);
}
.faq-item[open] summary .faq-plus { transform: rotate(45deg); }
.faq-item p { padding: 0 4px 24px; color: var(--ink-muted); max-width: 62ch; }

/* --- bloki treści --- */
.content-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; }
.content-card { padding: 32px 0; border-top: 1px solid var(--rule); }
.content-card:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.content-card h3 { font-size: var(--fs-card-title); line-height: 1.25; margin-bottom: 10px; }
.content-card p { color: var(--ink-muted); font-size: 0.94rem; max-width: 44ch; }
.stat-row { display: flex; gap: 48px; flex-wrap: wrap; }
.stat-row .hero-fact strong { font-size: 2.4rem; }

/* Trzy formaty — środkowy zsunięty w dół, żeby rząd nie był idealnie równy. */
.format-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.format-card {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 22px;
  padding: 32px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.22s cubic-bezier(.2,.7,.3,1), border-color 0.22s ease, box-shadow 0.22s ease;
}
.format-card:hover { transform: translateY(-3px); border-color: var(--purple-muted); box-shadow: var(--shadow-card); }
.format-card .eyebrow { font-size: 0.7rem; }
.format-card h3 { font-size: var(--fs-card-title); line-height: 1.25; }
.format-card p { color: var(--ink-muted); font-size: 0.93rem; }
@media (min-width: 881px) {
  .format-grid > :nth-child(2) { margin-top: 32px; }
}

/* --- 404 --- */
.notfound { padding: 120px 0 140px; text-align: center; }
.notfound .code {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(4rem, 12vw, 8rem); line-height: 1;
  letter-spacing: -0.05em; color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.notfound h1 { font-size: var(--fs-page-title); margin-top: 20px; letter-spacing: var(--tracking-display); }
.notfound p { margin: 20px auto 0; max-width: 46ch; color: var(--ink-muted); font-size: var(--fs-lead); }
.notfound .btn-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }

/* --- stopka --- */
footer {
  background: var(--purple);
  color: rgba(255, 255, 255, 0.82);
  padding: 72px 0 32px;
  border-top: 1px solid var(--footer-rule);
}
.footer-top {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 48px;
  padding-bottom: 44px; border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.footer-logo { display: block; width: 140px; margin-bottom: 18px; }
.footer-tagline {
  font-family: var(--font-display); font-weight: 700; color: #FFFFFF;
  font-size: 1.15rem; line-height: 1.3; max-width: 22ch; letter-spacing: -0.01em;
}
footer h4 {
  font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin: 0 0 16px;
}
footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 0.92rem; }
footer a { text-decoration: none; transition: color 0.16s ease; }
footer a:hover { color: var(--orange); }
footer a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 3px; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.5);
  flex-wrap: wrap; gap: 12px;
}

/* --- responsive --- */
@media (max-width: 1020px) {
  .section-head { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .section-head h2 { max-width: 26ch; }
  .process-grid { grid-template-columns: repeat(2, 1fr); gap: 0 32px; }
  .process-step { padding-bottom: 28px; }
}
@media (max-width: 880px) {
  .nav-links {
    position: fixed; inset: 65px 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 4px;
    background: var(--bg); border-bottom: 1px solid var(--rule);
    padding: 12px 24px 20px; display: none;
  }
  .nav.is-open .nav-links { display: flex; }
  .nav-links a { width: 100%; padding: 10px 0; }
  .nav-links a::after { display: none; }
  .nav-links a[aria-current="page"] { color: var(--orange); }
  .nav-toggle { display: inline-flex; }
  .nav-cta { display: none; }
  .nav.is-open .nav-cta { display: inline-flex; margin-top: 4px; }
  .hero { padding: 48px 0 80px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 40px; }
  .hero-art { order: -1; max-width: 300px; margin: 0 auto; }
  .hero-facts { gap: 28px; }
  .page-header.with-art .wrap { grid-template-columns: 1fr; }
  .page-header.with-art .art { order: -1; max-width: 280px; margin: 0 auto; }
  .age-grid, .age-grid-2 { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: 1fr; gap: 0; }
  .value-card:nth-child(2) { border-top: 1px solid var(--rule); padding-top: 32px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .schools { grid-template-columns: 1fr; text-align: left; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .content-grid { grid-template-columns: 1fr; gap: 0; }
  .content-card:nth-child(2) { border-top: 1px solid var(--rule); padding-top: 32px; }
  .format-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  section { padding: 64px 0 72px; }
  .wrap { padding: 0 20px; }
  .process-grid { grid-template-columns: 1fr; }
  .process-step { padding-bottom: 24px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero-actions .btn { justify-content: center; }
  .hero-actions .btn-text { justify-content: flex-start; }
  .schools { padding: 36px 24px; }
  .price-card, .form-card { padding: 28px 22px; }
}