/* ===== STRONA PUBLICZNA (V14.35.0, przebudowa V14.42.0) =====
   Osobny arkusz, NIE style.css. Tamten waży ponad sto kilobajtów i opisuje
   aplikację: tablicę, okno zadania, pływające panele. Strona sprzedażowa
   potrzebuje z tego zera, a ładowanie całości na stronie, którą ktoś otwiera
   z reklamy, to pierwsze wrażenie płacone sekundą ładowania.

   PALETA JEST INNA NIŻ W APLIKACJI - i to jest zmiana decyzji z V14.35.0
   (decyzja Toma). Tamta mówiła "ta sama paleta, żeby przejście ze strony do
   apki nie wyglądało jak przejście do innego produktu". Okazało się, że to
   argument dla KOGOŚ, KTO JUŻ JEST KLIENTEM; strona jest dla kogoś, kto nas
   nie zna, i ma dla niego wyglądać jak wizytówka, a nie jak zalogowany ekran
   roboczy, który przypadkiem nie chce się otworzyć. Ciągłość niesie teraz
   typografia i układ, nie kolor tła.

   WSZYSTKIE KOLORY SIEDZĄ W JEDNYM BLOKU NIŻEJ - łącznie z cieniami, bo
   cień też jest kolorem. Zmiana palety to podmiana tego bloku, nie szukanie
   hexów po pliku, i dlatego dało się pokazać trzy warianty tej samej strony
   bez trzech kopii arkusza. */

:root {
  /* --- paleta: ciepły grafit + bursztyn (decyzja Toma, V14.42.1) ---
     W CIEMNYM MOTYWIE PASMO MUSI BYĆ CIEMNIEJSZE OD STRONY O TYLE, ŻEBY BYŁO
     WIDAĆ, ŻE JEST. Pierwsze podejście miało tło #141210 i pasmo #0e0c0a -
     trzy punkty jasności różnicy, czyli na pełnym zrzucie hero, treść i CTA
     zlewały się w jedną płaszczyznę od góry do dołu i cały rytm jasne/ciemne
     przestawał istnieć. Strona jest teraz wyraźnie jaśniejsza (#1c1917),
     a pasmo prawie czarne (#0d0b09): różnica jest widoczna, a charakter
     nocny zostaje. */
  --s-bg:        #1c1917;   /* tło strony (ciepły grafit, nie czerń) */
  --s-surface:   #24201d;   /* karty i panele - o stopień jaśniej niż tło */
  --s-border:    #38322c;
  --s-text:      #f2eee8;
  --s-dim:       #a89f93;
  --s-accent:    #f0a500;
  --s-accent-in: #1a1611;   /* tekst NA akcencie - ciemny, bo bursztyn jest jasny */
  --s-soft:      #2a2114;   /* delikatne tło sekcji w kolorze akcentu */
  /* Ciemne pasmo: hero, CTA i stopka. */
  --s-band:      #0d0b09;
  --s-band-text: #f7f3ec;
  --s-band-dim:  #a49b8e;
  --s-band-line: #302a23;

  /* CIEŃ JEST KOLOREM I NALEŻY DO PALETY. Wartość dobrana pod jasne tło
     (rgba 0.07) na ciemnym nie robi NIC - karta wygląda wtedy na płaską,
     a mockup traci odklejenie od strony. Trzymany tokenem, żeby zmiana
     palety nadal była podmianą jednego bloku, a nie szukaniem rgba po pliku. */
  --s-shadow:    0 18px 50px rgba(0, 0, 0, 0.55);
  --s-shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.45);

  --s-max: 1120px;
  --s-radius: 14px;
}

* { box-sizing: border-box; }

.s-body {
  margin: 0;
  background: var(--s-bg);
  color: var(--s-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  /* Strona SIĘ PRZEWIJA, inaczej niż aplikacja (tam body jest zablokowane na
     jednym ekranie). To jest zwykły dokument i ma się tak zachowywać. */
  overflow-y: auto;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--s-accent); }

/* SKALA PŁYNNA, nie breakpointowa. Nagłówek zmieniający rozmiar skokowo na
   jednej szerokości wygląda na dwa różne projekty; clamp() daje jedną
   krzywą od telefonu do monitora. */
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: clamp(34px, 5.2vw, 56px); font-weight: 800; }
h2 { font-size: clamp(24px, 3.2vw, 34px); font-weight: 700; }
h3 { font-size: 18px; font-weight: 650; letter-spacing: -0.01em; }

/* ---- górny pasek ---- */
.s-top {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--s-bg) 88%, transparent);
  border-bottom: 1px solid var(--s-border);
  backdrop-filter: blur(10px);
}
.s-top-in {
  max-width: var(--s-max); margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 22px;
}
.s-brand {
  font-weight: 800; font-size: 16px; letter-spacing: 0.08em;
  color: var(--s-text); text-decoration: none; flex: 0 0 auto;
}
.s-nav {
  display: flex; gap: 20px; flex: 1 1 auto; flex-wrap: wrap;
  font-size: 15px;
}
.s-nav a {
  color: var(--s-dim); text-decoration: none; padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.s-nav a:hover { color: var(--s-text); }
.s-nav a.on { color: var(--s-text); border-bottom-color: var(--s-accent); }
.s-top-cta { flex: 0 0 auto; }

/* Przelacznik jezyka. Dwuliterowe skroty, a nie nazwy jezykow: obok szesciu
   pozycji nawigacji "Polski / English" konkuruje z nimi o uwage, a szukajacy
   swojego jezyka i tak szuka wlasnie skrotu. Zwykle <a href> - na stronie
   nie ma JavaScriptu. */
.s-lang {
  display: flex; gap: 2px; flex: 0 0 auto;
  border: 1px solid var(--s-border); border-radius: 999px; padding: 2px;
}
.s-lang a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; min-height: 22px; padding: 2px 8px;
  border-radius: 999px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--s-dim); text-decoration: none;
}
.s-lang a:hover { color: var(--s-text); }
.s-lang a.on { background: var(--s-soft); color: var(--s-accent); }

/* ---- przyciski ---- */
.s-btn {
  display: inline-block; padding: 11px 20px; border-radius: 999px;
  border: 1px solid var(--s-border); background: var(--s-surface);
  color: var(--s-text); text-decoration: none;
  font-size: 15px; font-weight: 600; white-space: nowrap;
  transition: transform 0.12s, border-color 0.12s;
}
.s-btn:hover { transform: translateY(-1px); border-color: var(--s-accent); }
.s-btn-primary {
  background: var(--s-accent); border-color: var(--s-accent);
  color: var(--s-accent-in);
}
.s-btn-primary:hover { border-color: var(--s-accent); }

/* ---- rytm strony ---- */
.s-main { max-width: var(--s-max); margin: 0 auto; padding: 0 24px 40px; }
/* padding-block, NIE skrot `padding: 64px 0`. Skrot zeruje wciecie boczne,
   a hero i CTA ustawiaja je same (sa pelnej szerokosci ekranu) - przy
   skrocie ich tekst laduje przy samej krawedzi okna. Zlapane zrzutem. */
.s-main > section { padding-block: 64px; border-top: 1px solid var(--s-border); }
/* Pierwsza sekcja nie ma kreski nad sobą - kreska pod paskiem nawigacji
   i druga tuż pod nią czytają się jak podwójna ramka. */
.s-main > section:first-of-type,
.s-main > .s-crumbs + section { border-top: none; }

.s-crumbs {
  font-size: 13px; color: var(--s-dim); padding-top: 20px;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.s-crumbs a { color: var(--s-dim); text-decoration: none; }
.s-crumbs a:hover { color: var(--s-text); text-decoration: underline; }

.s-eyebrow {
  margin: 0 0 10px; font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--s-accent);
}

/* ---- hero: CIEMNE PASMO NA CAŁĄ SZEROKOŚĆ ----
   Wychodzi poza kontener przez ujemne marginesy liczone z 50vw, bo strona
   nie ma wrappera pełnej szerokości - a dodanie go zmieniłoby każdą stronę.
   Ta sama sztuczka co przy .s-cta. */
.s-hero, .s-cta {
  background: var(--s-band); color: var(--s-band-text);
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding-left: max(24px, calc(50vw - var(--s-max) / 2 + 24px));
  padding-right: max(24px, calc(50vw - var(--s-max) / 2 + 24px));
  border-top: none !important;
}
.s-hero { padding-block: 88px; }
.s-hero h1 { max-width: 17ch; }
.s-hero .s-eyebrow { color: var(--s-band-dim); }
.s-lead {
  font-size: clamp(17px, 2vw, 20px); color: var(--s-band-dim);
  max-width: 62ch; margin: 20px 0 0;
}
.s-actions { margin: 30px 0 0; display: flex; gap: 12px; flex-wrap: wrap; }
.s-hero .s-btn:not(.s-btn-primary),
.s-cta .s-btn:not(.s-btn-primary) {
  background: transparent; color: var(--s-band-text); border-color: var(--s-band-line);
}
.s-cta { padding-block: 72px; text-align: center; }
.s-cta p { color: var(--s-band-dim); max-width: 60ch; margin: 16px auto 0; }
.s-cta .s-actions { justify-content: center; }

/* ---- proza ---- */
.s-prose h2 + p, .s-cards-wrap h2 + .s-section-lead { margin-top: 14px; }
.s-prose p { max-width: 68ch; margin: 0 0 16px; }
.s-prose p:last-child { margin-bottom: 0; }
.s-section-lead { color: var(--s-dim); max-width: 68ch; }

.s-list { margin: 18px 0 0; padding: 0; list-style: none; max-width: 72ch; }
.s-list li {
  position: relative; padding: 10px 0 10px 30px;
  border-bottom: 1px solid var(--s-border);
}
.s-list li:last-child { border-bottom: none; }
.s-list li::before {
  content: ""; position: absolute; left: 4px; top: 20px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--s-accent);
}

.s-ticks { margin: 18px 0 0; padding: 0; list-style: none; }
.s-ticks li { position: relative; padding: 5px 0 5px 26px; }
.s-ticks li::before {
  content: "✓"; position: absolute; left: 0; top: 5px;
  color: var(--s-accent); font-weight: 700;
}

.s-steps { margin: 22px 0 0; padding: 0; list-style: none; counter-reset: st; }
.s-steps li {
  counter-increment: st; position: relative;
  padding: 0 0 22px 52px; border-left: 2px solid var(--s-border);
  margin-left: 15px;
}
.s-steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.s-steps li::before {
  counter-increment: none; content: counter(st);
  position: absolute; left: -16px; top: -4px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--s-accent); color: var(--s-accent-in);
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.s-steps strong { display: block; font-size: 17px; }
.s-steps span { color: var(--s-dim); }

/* ---- karty ---- */
.s-cards {
  margin-top: 26px; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.s-card {
  background: var(--s-surface); border: 1px solid var(--s-border);
  border-radius: var(--s-radius); padding: 22px;
  display: flex; flex-direction: column; gap: 8px;
}
.s-card p { margin: 0; color: var(--s-dim); font-size: 15px; }
.s-card-link {
  text-decoration: none; color: inherit;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.s-card-link:hover {
  transform: translateY(-2px); border-color: var(--s-accent);
  box-shadow: var(--s-shadow-sm);
}
.s-card-more {
  margin-top: auto; padding-top: 10px;
  color: var(--s-accent); font-size: 14px; font-weight: 600;
}
.s-card-more::after { content: " →"; }

/* ---- split: tekst obok mockupu ---- */
.s-split {
  display: grid; gap: 44px; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
.s-split-flip .s-split-text { order: 2; }
.s-split p { color: var(--s-dim); max-width: 56ch; margin: 14px 0 0; }
.s-split h2 + p { margin-top: 14px; }

/* ---- pasek liczb ---- */
.s-stats { }
.s-stats-h { margin-bottom: 24px; }
.s-stats-row {
  display: grid; gap: 1px; background: var(--s-border);
  border: 1px solid var(--s-border); border-radius: var(--s-radius);
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.s-stat {
  background: var(--s-surface); padding: 24px 22px;
  display: flex; flex-direction: column; gap: 4px;
}
.s-stat-v { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.s-stat-l { color: var(--s-dim); font-size: 15px; }

/* ---- FAQ ---- */
.s-faq details {
  border-bottom: 1px solid var(--s-border); padding: 14px 0;
}
.s-faq summary {
  cursor: pointer; font-weight: 600; font-size: 17px;
  list-style: none; display: flex; justify-content: space-between; gap: 16px;
}
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary::after { content: "+"; color: var(--s-accent); font-size: 20px; }
.s-faq details[open] summary::after { content: "\2013"; }
.s-faq details p { margin: 10px 0 0; color: var(--s-dim); }

/* ---- zaślepka ---- */
.s-pending {
  background: var(--s-soft); border: 1px dashed var(--s-accent);
  border-radius: var(--s-radius); padding: 20px 22px !important;
  margin: 24px 0; border-top: 1px dashed var(--s-accent) !important;
}
.s-pending p { margin: 0 0 6px; }
.s-pending p:last-child { margin: 0; color: var(--s-dim); }

/* ---- stopka ---- */
.s-foot {
  background: var(--s-band); color: var(--s-band-dim);
  border-top: 1px solid var(--s-band-line); margin-top: 40px;
}
.s-foot-in {
  max-width: var(--s-max); margin: 0 auto; padding: 52px 24px 32px;
  display: grid; gap: 40px;
  grid-template-columns: minmax(260px, 1.2fr) 2fr;
}
.s-foot-brand .s-brand { color: var(--s-band-text); }
.s-foot-brand p { margin: 12px 0 20px; font-size: 15px; max-width: 34ch; }
.s-foot-cols {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.s-foot-col h3 {
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--s-band-text); margin-bottom: 12px;
}
.s-foot-col a {
  display: block; padding: 5px 0; color: var(--s-band-dim);
  text-decoration: none; font-size: 15px;
}
.s-foot-col a:hover { color: var(--s-band-text); }
.s-foot-note {
  max-width: var(--s-max); margin: 0 auto; padding: 0 24px 32px;
  font-size: 13px; color: var(--s-band-dim);
}

/* ============================================================
   MOCKUPY PRODUKTU
   Rysowane, nie fotografowane (patrz komentarz w site/layout.mjs).
   Kolory biorą się z palety strony, nie z aplikacji - to jest SCHEMAT
   rzeczy, nie jej portret, więc ma pasować do strony, na której stoi.
   ============================================================ */
.m-win {
  background: var(--s-surface); border: 1px solid var(--s-border);
  border-radius: var(--s-radius); overflow: hidden;
  box-shadow: var(--s-shadow);
}
.m-bar {
  display: flex; gap: 6px; padding: 10px 12px;
  border-bottom: 1px solid var(--s-border);
  background: color-mix(in srgb, var(--s-text) 4%, var(--s-surface));
}
.m-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--s-border); }

/* tablica */
.m-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; }
.m-col { display: flex; flex-direction: column; gap: 8px; }
.m-col-h {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--s-dim);
}
.m-col-h span {
  background: color-mix(in srgb, var(--s-text) 8%, transparent);
  border-radius: 8px; padding: 0 6px; font-size: 10px;
}
.m-card {
  background: color-mix(in srgb, var(--s-text) 3%, var(--s-surface));
  border: 1px solid var(--s-border); border-radius: 8px;
  padding: 9px; display: flex; flex-direction: column; gap: 6px;
}
.m-card-a { border-color: var(--s-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--s-accent) 18%, transparent); }
.m-line { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--s-text) 22%, transparent); }
.m-line.w50 { width: 50%; } .m-line.w60 { width: 60%; }
.m-line.w70 { width: 70%; } .m-line.w80 { width: 80%; }
.m-chip { width: 34px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--s-text) 12%, transparent); }
.m-chip.m-hi { background: var(--s-accent); }
.m-done .m-line { background: color-mix(in srgb, var(--s-text) 12%, transparent); }

/* kalendarz */
.m-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 14px; }
.m-cal-h {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  color: var(--s-dim); text-align: center; padding-bottom: 4px;
}
.m-day {
  aspect-ratio: 1 / 1; border: 1px solid var(--s-border); border-radius: 6px;
  padding: 4px; display: flex; flex-direction: column; gap: 3px;
  background: var(--s-surface);
}
.m-day-n { font-size: 10px; color: var(--s-dim); }
.m-wk { background: color-mix(in srgb, var(--s-text) 3%, var(--s-surface)); }
.m-now { border-color: var(--s-accent); }
.m-ev { height: 5px; border-radius: 3px; background: var(--s-accent); opacity: 0.85; }

/* dashboard */
.m-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 14px; }
.m-tile {
  background: color-mix(in srgb, var(--s-text) 3%, var(--s-surface));
  border: 1px solid var(--s-border); border-radius: 10px; padding: 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.m-tile-wide { grid-column: 1 / -1; }
.m-tile-l { font-size: 11px; color: var(--s-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.m-tile-v { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.m-trend { font-size: 11px; color: var(--s-accent); }
.m-trend.m-down { color: var(--s-dim); }
.m-spark { width: 100%; height: 40px; margin-top: 6px; }
.m-spark polyline { fill: none; stroke: var(--s-accent); stroke-width: 2; }

/* ---- wąski ekran ---- */
@media (max-width: 860px) {
  .s-split { grid-template-columns: 1fr; gap: 28px; }
  /* Na jednej kolumnie ODWRACANIE TRACI SENS: tekst ma stać nad obrazkiem
     zawsze, bo to on prowadzi czytającego. */
  .s-split-flip .s-split-text { order: 0; }
  .s-foot-in { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .s-body { font-size: 16px; }
  .s-top-in { padding: 10px 16px; gap: 12px; }
  /* Nawigacja przewija się w poziomie zamiast zawijać w trzy rzędy - pasek
     na pół ekranu spycha treść pod zgięcie. */
  .s-nav { flex-wrap: nowrap; overflow-x: auto; gap: 16px; }
  .s-nav a { white-space: nowrap; }
  /* Przełącznik języka zabiera pasek sekcji, a ten i tak przewija się poziomo.
     Każdy dodany język zwęża go dalej, więc na telefonie chipy są ciaśniejsze -
     wysokość zostaje 22 px, bo to jest podłoga kontrolki, nie ozdoba. */
  .s-lang a { min-width: 26px; padding: 2px 5px; font-size: 11px; }
  .s-main { padding: 0 16px 24px; }
  .s-main > section { padding-block: 44px; }
  .s-hero { padding-block: 56px; }
  .s-hero, .s-cta { padding-left: 16px; padding-right: 16px; }
  .s-foot-in, .s-foot-note { padding-left: 16px; padding-right: 16px; }
  .s-top-cta { display: none; }
}