/* =====================================================================
   Podstrony problemowe (landing page): spokojny układ, treść i film.
   Ten sam system co strona główna (system.css), ale bez efektów:
   żadnych animacji ani przesunięć — tylko kolor przy najechaniu i fokus.
   ===================================================================== */

/* Zero ruchu na podstronach: bez przejść i animacji (zostaje tylko obrys fokusu) */
.lp *, .lp *::before, .lp *::after { transition: none !important; animation: none !important; }
.lp .btn--accent:hover { transform: none; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 10px 30px -12px rgba(242, 180, 90, .55); filter: brightness(1.04); }
.lp .btn:hover .btn__arrow { transform: none; }

/* ---------- Pasek górny ---------- */
.lp-top { border-bottom: 1px solid var(--c-line); }
.lp-top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
.lp-back { display: inline-flex; align-items: center; gap: .6rem; font: 600 .9375rem/1 var(--f-text); color: var(--c-text); text-decoration: none; }
.lp-back svg { width: 1rem; height: 1rem; color: var(--c-muted); }
.lp-back:hover svg { color: var(--c-text); }
.theme-toggle {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 2.5rem; padding: .45rem .9rem; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--c-line-2); color: var(--c-text-2); font: 400 .8125rem/1 var(--f-mono); letter-spacing: .04em;
}
.theme-toggle:hover { color: var(--c-text); border-color: var(--c-muted); }
.theme-toggle svg { width: 1rem; height: 1rem; }
.theme-toggle[hidden] { display: none; }

/* ---------- Hero podstrony ---------- */
.lp-hero { padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3.5rem, 8vw, 6rem); border-bottom: 1px solid var(--c-line); }
.lp-hero h1 { margin-top: 1.4rem; max-width: 17em; font: 500 var(--fs-h1)/1.06 var(--f-display); letter-spacing: -.032em; }
.lp-hero__lead { margin-top: 1.5rem; max-width: 38em; font-size: var(--fs-lead); line-height: 1.5; color: var(--c-text-2); }
.lp-hero__actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.lp-hero__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font: 400 var(--fs-micro)/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }

/* ---------- Sekcje: tytuł po lewej, treść po prawej ---------- */
.lp-section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; border-bottom: 1px solid var(--c-line); }
.lp-section .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.75rem clamp(2rem, 5vw, 4.5rem); align-items: start; }
.lp-section__head h2 { margin-top: .9rem; font: 500 var(--fs-h2)/1.05 var(--f-display); letter-spacing: -.028em; }
.lp-section__head p { margin-top: 1rem; color: var(--c-muted); font-size: var(--fs-small); max-width: 26em; }
.lp-section--wide .wrap { grid-template-columns: minmax(0, 1fr); }
.lp-prose { max-width: 40rem; color: var(--c-text-2); }
.lp-prose p + p { margin-top: 1em; }
.lp-prose strong { color: var(--c-text); font-weight: 600; }

/* Stawka: 4 punkty */
.stakes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--radius-l); overflow: hidden; }
.stakes li { background: var(--c-bg); padding: clamp(1.4rem, 2.6vw, 2rem); display: grid; gap: .9rem; align-content: start; }
.stakes__no { font: 400 var(--fs-micro)/1 var(--f-mono); letter-spacing: .12em; color: var(--c-accent-text); }
.stakes p { color: var(--c-text-2); font-size: 1.0625rem; line-height: 1.55; }
.stakes strong { color: var(--c-text); font-weight: 600; }

/* ---------- Film: lekki zamiennik osadzenia (miniatura + przycisk) ---------- */
.film { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-l); overflow: hidden; background: #070a10; border: 1px solid var(--c-line); box-shadow: var(--shadow-card); }
.film__trigger { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; cursor: pointer; border: 0; padding: 0; background: none; width: 100%; font: inherit; text-align: left; }
.film__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film__trigger::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4, 6, 10, .82) 0%, rgba(4, 6, 10, .25) 45%, rgba(4, 6, 10, .1) 100%); }
.film__play {
  position: absolute; left: 50%; top: 50%; z-index: 1; width: clamp(4rem, 8vw, 5.5rem); height: clamp(4rem, 8vw, 5.5rem); margin: calc(clamp(4rem, 8vw, 5.5rem) / -2);
  display: grid; place-items: center; border-radius: 50%; background: linear-gradient(180deg, var(--c-accent-2), var(--c-accent)); color: var(--c-accent-ink);
  box-shadow: 0 0 0 10px rgba(242, 180, 90, .14), 0 20px 50px -10px rgba(0, 0, 0, .6);
}
.film__play svg { width: 34%; height: 34%; margin-left: 6%; }
.film__trigger:hover .film__play { filter: brightness(1.06); }
.film__label { position: absolute; left: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 2.6vw, 1.75rem); z-index: 1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; }
.film__title { font: 500 clamp(1.05rem, .9rem + .7vw, 1.5rem)/1.25 var(--f-display); letter-spacing: -.015em; max-width: 30em; }
.film__meta { font: 400 var(--fs-micro)/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.film iframe, .film video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.film__msg { position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem; text-align: center; color: #e9edf5; background: rgba(4, 6, 10, .86); font-size: var(--fs-small); }
.film-note { margin-top: 1rem; color: var(--c-muted); font-size: var(--fs-small); }

.chapters { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem clamp(2rem, 4vw, 3.5rem); counter-reset: ch; }
.chapters li { counter-increment: ch; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .25rem 1rem; padding-top: 1.25rem; border-top: 1px solid var(--c-line); }
.chapters li::before { content: counter(ch, decimal-leading-zero); grid-row: span 2; font: 400 var(--fs-small)/1.5 var(--f-mono); color: var(--c-accent-text); }
.chapters h3 { font: 600 1.0625rem/1.4 var(--f-text); }
.chapters p { color: var(--c-text-2); font-size: var(--fs-small); line-height: 1.6; }
.chapters code { font: .875em var(--f-mono); padding: .1em .35em; border-radius: 5px; background: var(--c-surface-2); border: 1px solid var(--c-line); }

/* ---------- Dowód: liczby ---------- */
.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.stat { padding: clamp(1.25rem, 2.4vw, 1.75rem); border-radius: var(--radius-m); background: var(--c-surface); border: 1px solid var(--c-line); display: grid; gap: .55rem; align-content: start; }
.stat__value { font: 500 clamp(2.4rem, 1.6rem + 2.4vw, 3.5rem)/1 var(--f-display); letter-spacing: -.035em; color: var(--c-text); font-variant-numeric: tabular-nums; }
.stat__value small { font-size: .45em; letter-spacing: -.01em; color: var(--c-text-2); margin-left: .15em; }
.stat__label { color: var(--c-text-2); }
.stat__src { font: 400 .75rem/1.45 var(--f-mono); color: var(--c-muted); }
.stat--todo { background: transparent; border-style: dashed; border-color: color-mix(in srgb, var(--c-accent-text) 45%, transparent); }
.stat--todo .stat__value { font-size: clamp(1rem, .9rem + .4vw, 1.25rem); letter-spacing: 0; }
.caveat { margin-top: 1.25rem; padding: 1rem 1.25rem; border-left: 2px solid var(--c-accent); background: var(--c-surface); border-radius: 0 var(--radius-s) var(--radius-s) 0; color: var(--c-text-2); font-size: var(--fs-small); }
.no-promise { margin-top: 2.25rem; }
.no-promise h3 { font: 600 1.0625rem/1.4 var(--f-text); }
.no-promise ul { margin: .9rem 0 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.no-promise li { position: relative; padding-left: 1.5rem; color: var(--c-text-2); }
.no-promise li::before { content: ""; position: absolute; left: .2rem; top: .7em; width: .6rem; height: 1px; background: var(--c-muted); }

/* ---------- Dla kogo / dla kogo nie ---------- */
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.fit__col { padding: clamp(1.4rem, 2.6vw, 2rem); border-radius: var(--radius-l); background: var(--c-surface); border: 1px solid var(--c-line); }
.fit__col h3 { display: flex; align-items: center; gap: .6rem; font: 600 1.125rem/1.3 var(--f-text); }
.fit__col ul { margin: 1.25rem 0 0; padding: 0; list-style: none; display: grid; gap: .9rem; }
.fit__col li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .75rem; color: var(--c-text-2); }
.fit__icon { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; margin-top: .05rem; }
.fit__icon svg { width: .8rem; height: .8rem; }
.fit--yes .fit__icon { color: var(--c-ok); background: color-mix(in srgb, var(--c-ok) 14%, transparent); }
.fit--no .fit__icon { color: var(--c-no); background: color-mix(in srgb, var(--c-no) 14%, transparent); }

/* ---------- CTA na dole ---------- */
.lp-cta { padding: clamp(4rem, 9vw, 7rem) 0; text-align: center; }
.lp-cta h2 { font: 500 var(--fs-h2)/1.08 var(--f-display); letter-spacing: -.028em; }
.lp-cta p { margin: 1rem auto 0; max-width: 34em; color: var(--c-text-2); }
.lp-cta .btn { margin-top: 2rem; }

/* ---------- Adnotacje prototypu (widoczne tylko z klasą .proto na <html>) ---------- */
.flag { display: none; }
.proto .flag {
  display: inline-block; margin-left: .35em; padding: .05em .45em; border-radius: 5px; vertical-align: .1em; text-decoration: none;
  font: 400 .68rem/1.5 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-signal); border: 1px solid color-mix(in srgb, var(--c-signal) 45%, transparent);
}
.proto-note { display: none; }
.proto .proto-note { display: block; margin: 0 0 clamp(3rem, 6vw, 5rem); padding: clamp(1.25rem, 3vw, 2rem); border: 1px dashed var(--c-line-2); border-radius: var(--radius-l); background: var(--c-bg-2); font-size: var(--fs-small); color: var(--c-text-2); }
.proto-note h2 { font: 600 1rem/1.4 var(--f-text); color: var(--c-text); }
.proto-note h3 { margin-top: 1.25rem; font: 400 var(--fs-micro)/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.proto-note ul { margin: .6rem 0 0; padding-left: 1.1rem; display: grid; gap: .45rem; }

/* ---------- Strony prawne (polityka prywatności) i 404: sama typografia treści ---------- */
.legal { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3.5rem, 8vw, 6rem); color: var(--c-text-2); }
.legal > * { max-width: 48rem; }
.legal h2 { margin: 2.75rem 0 .9rem; font: 500 var(--fs-h3)/1.3 var(--f-display); letter-spacing: -.012em; color: var(--c-text); scroll-margin-top: 1.5rem; }
.legal h2:first-child { margin-top: 0; }
.legal p + p, .legal ul + p, .legal p + ul, .legal .legal__table + p, .legal p + .legal__table { margin-top: .9em; }
.legal ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .5rem; }
.legal strong { color: var(--c-text); font-weight: 600; }
.legal a { color: var(--c-text); text-underline-offset: .2em; }
.legal code { font: .875em var(--f-mono); }
.legal__table { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--radius-m); }
.legal table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.5; }
.legal th, .legal td { padding: .8rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-line); }
.legal tr:last-child td { border-bottom: 0; }
.legal th { font: 400 var(--fs-micro)/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); background: var(--c-surface); }
.legal h3 { margin: 2rem 0 .7rem; font: 600 1.0625rem/1.4 var(--f-text); color: var(--c-text); }
.stats-optout { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.stats-optout .btn { border: 1px solid var(--c-line-2); color: var(--c-text); background: transparent; cursor: pointer; }
.stats-optout p { margin: 0 !important; font-size: var(--fs-small); color: var(--c-muted); }
.legal__version { margin-top: 2.5rem !important; font-size: var(--fs-small); color: var(--c-muted); }

@media (max-width: 860px) {
  .lp-section .wrap { grid-template-columns: minmax(0, 1fr); }
  .stakes, .stats, .fit, .chapters { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .film__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* wąski ekran: tytuł tylko dla czytników (zasłaniałby przycisk) */
  .film__label { justify-content: flex-end; }
  .lp-hero__actions .btn, .lp-cta .btn { width: 100%; }
  /* Tabele prawne: wiersz = karta, etykieta kolumny z data-label */
  .legal thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .legal tr { display: block; padding: .5rem 0; border-bottom: 1px solid var(--c-line); }
  .legal tr:last-child { border-bottom: 0; }
  .legal td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem; padding: .35rem 1rem; border: 0; }
  .legal td::before { content: attr(data-label); font: 400 var(--fs-micro)/1.6 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
}