/* ════════════════════════════════════════════════════════════════════
   lukaszrogowicz.pl – styl „papier” (strona główna i podstrony)
   ════════════════════════════════════════════════════════════════════
   Jasna kartka, czarny tusz, limonkowy zakreślacz. Rysunki Łukasza mają
   białe tło: każdy siedzi w ramce .ink, która bierze kolor powierzchni
   (--surface), a obraz nakłada się przez mix-blend-mode: multiply, więc
   biel znika na kartce, na karcie i na kafelku. Rysunek nie może wystawać
   poza ramkę .ink (poza nią biel wraca). Rysunki leżą w /grafiki,
   przygotowuje je narzedzia/grafiki-na-strone.py.

   Jeden motyw na całej stronie (jasny). Ciemny jest tylko blok kontaktu
   i jeden kafelek: to elementy, nie sekcje.

   Zaokrąglenia: przyciski i pola 0.8rem, karty i kafelki 1.25rem, duży
   blok kontaktu 1.75rem, pastylki pełne.

   Klasa .motion na <html> (ustawia ją skrypt w <head>) włącza ruch.
   Bez niej strona pokazuje stan końcowy: tak wygląda bez JS i przy
   systemowym „ogranicz ruch”.

   SPIS: 01 zmienne · 02 fonty · 03 podstawy · 04 elementy wspólne ·
   05 nagłówek · 06 hero · 07 liczby i narzędzia · 08 przed i po ·
   09 działy i doradcy · 10 pięć problemów · 11 oferta · 12 kafelki ·
   13 proces · 14 o mnie i newsletter · 15 faq · 16 kontakt i stopka ·
   17 podstrony · 18 ruch · 19 starsze klasy
   ════════════════════════════════════════════════════════════════════ */

/* ── 01. ZMIENNE ──────────────────────────────────────────────────── */
:root {
  --paper:       #f1f4ee;   /* kartka */
  --paper-2:     #e5eade;   /* ciemniejszy pas papieru */
  --card:        #fafbf8;   /* karta jaśniejsza od kartki */
  --ink:         #10140c;   /* tusz */
  --ink-2:       #434b3e;   /* tekst pomocniczy */
  --ink-3:       #6a7364;   /* podpisy */
  --line:        rgba(16, 20, 12, 0.13);
  --line-strong: rgba(16, 20, 12, 0.34);
  --accent:        #c9f24e; /* limonkowy zakreślacz */
  --accent-strong: #d7fb63;
  --accent-deep:   #55730a; /* akcent tekstowy na jasnym tle */
  --surface:     var(--paper);   /* kolor pod rysunkiem, zmieniają go karty */

  --font-display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --font-body:    "Onest", "Segoe UI", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --fs-hero: clamp(2.15rem, 1rem + 4.2vw, 4.25rem);
  --fs-h2:   clamp(1.9rem, 1.2rem + 2.9vw, 3.3rem);
  --fs-h3:   clamp(1.2rem, 1.08rem + 0.6vw, 1.5rem);
  --fs-lead: clamp(1.06rem, 0.98rem + 0.4vw, 1.22rem);

  --container:   72rem;
  --gutter:      clamp(1.25rem, 4vw, 2.5rem);
  --section-pad: clamp(4rem, 2.5rem + 6vw, 7.5rem);
  --header-h:    4rem;
  --r-btn:  0.8rem;
  --r-card: 1.25rem;

  --ease: cubic-bezier(0.22, 0.65, 0.2, 1);

  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%2310140c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── 02. FONTY (pliki na serwerze, bez połączeń z Google) ─────────── */
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/onest-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── 03. PODSTAWY ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--paper);
  color-scheme: light;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.25rem);
  overflow-x: hidden;   /* zapas dla Safari < 16, które nie zna clip */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Ziarno papieru: jedna nieruchoma warstwa nad całą stroną */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .65 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { display: block; max-width: 100%; }
ul[class], ol[class] { list-style: none; }
a { color: inherit; text-decoration: none; }
strong, b { font-weight: 650; }

::selection { background: var(--accent); color: var(--ink); }

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h3 { font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 0.75rem; left: 0.75rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  font-weight: 650;
  border-radius: var(--r-btn);
  transform: translateY(-250%);
  transition: transform 0.25s var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); outline-offset: 1px; }

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

/* ── 04. ELEMENTY WSPÓLNE ─────────────────────────────────────────── */
/* Zakreślacz: limonkowa kreska pod wyróżnionymi słowami */
.mark {
  padding-inline: 0.06em;
  margin-inline: -0.06em;
  background: linear-gradient(var(--accent), var(--accent)) 0 88% / 100% 0.32em no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Ramka rysunku: kolor powierzchni pod spodem + obraz mnożony, więc biel znika.
   isolation trzyma mieszanie w ramce, niezależnie od animacji rodziców. */
.ink {
  background: var(--surface);
  isolation: isolate;
}
.ink img {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-2);
}

.lead {
  font-size: var(--fs-lead);
  color: var(--ink-2);
  max-width: 36rem;
  text-wrap: pretty;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.4rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-btn);
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.2s var(--ease), background 0.2s, color 0.2s, box-shadow 0.2s var(--ease);
}
/* Limonkowy przycisk z twardym cieniem, jak odbity stempel */
.btn-accent {
  background: var(--accent);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
}
.btn-accent:hover {
  background: var(--accent-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 0 var(--ink);
}
.btn-accent:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.btn-ghost { color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-ghost:active { transform: translateY(1px); }
.btn-small { padding: 0.62rem 1rem; font-size: 0.9rem; box-shadow: 0 2px 0 var(--ink); }
.btn-small:hover { box-shadow: 0 3px 0 var(--ink); }
.btn-arrow { transition: transform 0.25s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; max-width: 100%; }
.actions .btn { max-width: 100%; }
/* Bardzo wąski ekran: długi napis może się złamać, zamiast wyjść poza kartkę */
@media (max-width: 23rem) {
  .actions .btn { white-space: normal; text-align: center; line-height: 1.2; }
  .actions .btn-arrow { display: none; }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 650;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 0.22em no-repeat;
  transition: background-size 0.25s var(--ease);
}
.link-arrow span { transition: transform 0.25s var(--ease); }
.link-arrow:hover { background-size: 100% 100%; }
.link-arrow:hover span { transform: translateX(4px); }

.inline-link {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent-deep);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
}
.inline-link:hover { background: var(--accent); text-decoration-color: transparent; }

.check-list { display: grid; gap: 0.6rem; }
.check-list li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--ink-2);
  font-size: 0.97rem;
  line-height: 1.5;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.2em;
  width: 1.1rem; height: 1.1rem;
  border-radius: 50%;
  background: var(--accent) var(--check) center / 72% no-repeat;
}

/* Przycisk jako <button> (formularze) */
button.btn {
  font: inherit;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.btn[disabled] { opacity: 0.6; cursor: progress; }
.btn-block { width: 100%; }

/* Formularze: pola z obwódką tuszem, przy wpisywaniu obrysowane zakreślaczem */
.form { display: grid; gap: 1rem; align-content: start; }
.form > * { min-width: 0; }
.form .btn { white-space: normal; text-align: center; line-height: 1.2; }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: 0.86rem; font-weight: 650; }
.input {
  width: 100%;
  padding: 0.85rem 0.95rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-btn);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.2s, box-shadow 0.2s var(--ease);
}
.input::placeholder { color: var(--ink-3); opacity: 1; }
.input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: var(--r-btn);
  background: #fff;
  box-shadow: 0 0 0 5px var(--accent);
}
select.input {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%2310140c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  background-size: 0.95rem;
  cursor: pointer;
}
select.input:invalid { color: var(--ink-3); }
select.input option { color: var(--ink); }
textarea.input { min-height: 7.5rem; resize: vertical; }
.form-status { min-height: 1.45em; font-size: 0.92rem; font-weight: 600; line-height: 1.45; }
.form-status.is-error { color: #9a2c14; }
.form-hint { font-size: 0.82rem; line-height: 1.5; color: var(--ink-3); }

.section { padding-block: var(--section-pad); }
.section-head {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
}
.section-head h2 { font-size: var(--fs-h2); max-width: 17em; }
/* Sekcja tuż pod inną: odstęp daje dolny margines poprzedniej */
.section-tight { padding-top: 0; }

/* ── 05. NAGŁÓWEK ─────────────────────────────────────────────────── */
.top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(241, 244, 238, 0.88);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.top-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: 0.6rem;
  background: var(--ink);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0;
}
.brand-tld { color: var(--ink-3); }

.top-nav { display: none; gap: 0.15rem; }
.top-nav a {
  padding: 0.5rem 0.8rem;
  border-radius: 0.6rem;
  font-size: 0.94rem;
  font-weight: 550;
  color: var(--ink-2);
  transition: color 0.2s, background 0.2s;
}
.top-nav a:hover { color: var(--ink); background: rgba(16, 20, 12, 0.07); }

.top-actions { display: flex; align-items: center; gap: 0.5rem; }

/* Przycisk w belce: na telefonie krótki, od szerokości z nawigacją pełny */
.cta-more { display: none; }

.menu { position: relative; }
.menu summary {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-btn);
  cursor: pointer;
  list-style: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu-icon { display: grid; gap: 0.32rem; }
.menu-icon i {
  display: block;
  width: 1.05rem; height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.25s var(--ease);
}
.menu[open] .menu-icon i:first-child { transform: translateY(0.22rem) rotate(45deg); }
.menu[open] .menu-icon i:last-child  { transform: translateY(-0.22rem) rotate(-45deg); }
.menu-panel {
  position: absolute;
  right: 0; top: calc(100% + 0.8rem);
  display: grid;
  min-width: 14.5rem;
  padding: 0.5rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: 0 4px 0 var(--ink);
}
.menu-panel a { padding: 0.8rem 0.9rem; border-radius: 0.6rem; font-weight: 600; }
.menu-panel a:hover { background: var(--accent); }

@media (min-width: 58rem) {
  .top-nav { display: flex; }
  .menu { display: none; }
}
/* Wąski laptop: menu z sześcioma pozycjami (podstrona stron www) dostaje ciaśniejsze odstępy */
@media (min-width: 58rem) and (max-width: 65.99rem) {
  .top-nav a { padding-inline: 0.55rem; }
}
@media (min-width: 66rem) {
  .cta-more { display: inline; }
}
/* Telefon: w belce mieszczą się znak, przycisk i menu, więc nazwa domeny ustępuje */
@media (max-width: 29.99rem) {
  .top .brand-name { display: none; }
}
@media (max-width: 21rem) {
  .top .btn-small { padding-inline: 0.8rem; }
}

/* ── 06. HERO ─────────────────────────────────────────────────────── */
.hero { padding: clamp(2rem, 1.25rem + 3vw, 4.25rem) 0 clamp(2.5rem, 2rem + 3vw, 4.5rem); }

.hero-title {
  font-size: var(--fs-hero);
  max-width: 19em;
  margin-top: 1rem;
}

.hero-grid {
  display: grid;
  gap: 2.25rem;
  margin-top: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
}
.hero-copy { display: grid; gap: 1.75rem; align-content: start; }
.hero-art { width: min(100%, 27rem); justify-self: center; }

@media (min-width: 60rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 3rem;
    align-items: start;
  }
  .hero-copy { padding-top: 0.5rem; }
  .hero-art { width: 100%; max-width: 34rem; justify-self: end; margin-top: -0.5rem; }
}

/* ── 07. LICZBY I NARZĘDZIA ───────────────────────────────────────── */
.facts { padding-bottom: clamp(1rem, 3vw, 2.5rem); }

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem clamp(1rem, 4vw, 3rem);
  padding-block: clamp(1.25rem, 3vw, 2rem);
  border-top: 1.5px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
/* W kodzie opis stoi przed liczbą, na ekranie liczba jest u góry */
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.35rem; }
.stat dd {
  font-family: var(--font-display);
  font-weight: 750;
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3.1rem);
  letter-spacing: -0.04em;
  line-height: 1;
}
.stat dt {
  color: var(--ink-2);
  font-size: clamp(0.8rem, 0.74rem + 0.3vw, 0.96rem);
  line-height: 1.35;
}

.tools {
  display: grid;
  gap: 0.6rem;
  padding-top: 1.25rem;
}
.tools-label { font-size: 0.88rem; color: var(--ink-3); white-space: nowrap; }

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track { display: flex; width: max-content; }
.marquee-group {
  display: flex;
  flex-shrink: 0;
  gap: 2.25rem;
  padding-right: 2.25rem;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  white-space: nowrap;
}
.motion .marquee-track { animation: tasma 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes tasma { to { transform: translateX(-50%); } }
/* Bez ruchu lista po prostu się zawija, druga kopia znika */
html:not(.motion) .marquee { -webkit-mask-image: none; mask-image: none; }
html:not(.motion) .marquee-track { width: auto; }
html:not(.motion) .marquee-group { flex-wrap: wrap; gap: 0.4rem 1.5rem; padding-right: 0; white-space: normal; }
html:not(.motion) .marquee-group[aria-hidden] { display: none; }

@media (min-width: 52rem) {
  .tools { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.75rem; }
}

/* ── 08. PRZED I PO ───────────────────────────────────────────────── */
.statement {
  font-size: clamp(1.7rem, 1.05rem + 2.7vw, 3.15rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  max-width: 21em;
  text-wrap: pretty;
}

.change-figure {
  margin-top: clamp(2rem, 1.25rem + 3.5vw, 4rem);
  max-width: 58rem;
  margin-inline: auto;
}
.change-caption {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.05rem;
  text-align: center;
}
.change-caption span:first-child { color: var(--ink-3); }

/* ── 09. DZIAŁY I DORADCY ─────────────────────────────────────────── */
/* Spis doradców jak kolumny w księdze: każdy dział ma grubą kreskę u góry,
   numeracja biegnie przez wszystkie działy (01–14).
   Telefon: działy przesuwa się w bok (scroll-snap, bez skryptu), kolejna
   kolumna wystaje zza krawędzi. Większy ekran: siatka, w ostatniej komórce rysunek. */
.depts { padding-top: 0; }

.depts-grid {
  counter-reset: doradca;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(80vw, 20.5rem);
  gap: 1.75rem;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.depts-grid::-webkit-scrollbar { display: none; }

.dept {
  display: grid;
  align-content: start;
  padding-top: 1rem;
  border-top: 1.5px solid var(--ink);
  scroll-snap-align: start;
}
.dept h3 {
  font-size: clamp(1.5rem, 1.25rem + 1vw, 1.95rem);
  letter-spacing: -0.03em;
  margin-bottom: 0.9rem;
}

.dept-list li {
  counter-increment: doradca;
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  column-gap: 0.5rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
}
.dept-list li::before {
  content: counter(doradca, decimal-leading-zero);
  grid-row: span 2;
  padding-top: 0.28rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--accent-deep);
}
.dept-list b {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.dept-list span { color: var(--ink-2); font-size: 0.95rem; line-height: 1.45; }

/* Ostatnia komórka: rysunek i zdanie o tym, że lista powstaje pod firmę */
.dept-more { gap: 1rem; }
.dept-more .ink { height: clamp(9.5rem, 7rem + 9vw, 13rem); }
.dept-more .ink img { height: 100%; object-fit: contain; }
.dept-more p { color: var(--ink-2); font-size: 0.97rem; max-width: 26rem; }
.dept-more b { color: var(--ink); }

.depts-hint {
  margin-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (min-width: 52rem) {
  .depts-grid {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem 2.5rem;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .depts-hint { display: none; }
}
@media (min-width: 68rem) {
  .depts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.25rem 3rem; }
}

/* ── 10. PIĘĆ PROBLEMÓW ───────────────────────────────────────────── */
.steps { padding-top: 0; }
.steps-grid { display: grid; gap: 2.5rem; }
.steps-stage { display: none; }

.steps-list { display: grid; gap: 2.75rem; }
.step-item {
  display: grid;
  gap: 0.7rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.step-item h3 { font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2.05rem); letter-spacing: -0.03em; }
.step-item p { color: var(--ink-2); max-width: 34rem; }
.step-item b { color: var(--ink); }
.step-art { width: min(100%, 20rem); margin-bottom: 0.5rem; }

/* Duży ekran z ruchem: rysunek stoi w miejscu, punkty przewijają się obok */
@media (min-width: 60rem) {
  .motion .steps-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 5.5rem);
    align-items: start;
  }
  .motion .steps-stage {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 2.5rem);
    aspect-ratio: 1 / 0.9;
  }
  .motion .stage-art {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    transition: opacity 0.45s var(--ease), transform 0.6s var(--ease);
  }
  .motion .stage-art.is-active { opacity: 1; transform: none; }
  .motion .stage-art img { height: 100%; object-fit: contain; }
  .motion .step-art { display: none; }
  .motion .steps-list { gap: 0; }
  .motion .step-item {
    min-height: 54vh;
    align-content: center;
    padding-block: 2rem;
    border-top: 0;
    opacity: 0.3;
    transition: opacity 0.4s var(--ease);
  }
  .motion .step-item.is-active { opacity: 1; }
}

/* ── 11. OFERTA ───────────────────────────────────────────────────── */
.offer-grid { display: grid; gap: 1.25rem; }

.offer-card {
  --surface: var(--card);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.4rem, 1rem + 1.7vw, 2.4rem);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: 0 1px 0 rgba(16, 20, 12, 0.05), 0 24px 44px -34px rgba(16, 20, 12, 0.4);
  transition: transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
}
.offer-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
}

/* Etykieta „Oferta 1”, „Oferta 2”: zakreślona jak flamastrem */
.offer-label {
  justify-self: start;
  align-self: flex-start;
  padding: 0.22rem 0.6rem;
  border-radius: 0.3rem;
  background: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Reszta karty pod rysunkiem: tytuł, opis, lista i stopka z ceną */
.offer-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1rem;
}

/* Ramka ma stałą wysokość, rysunek mieści się w niej cały (contain) */
.offer-art {
  height: clamp(11rem, 8.5rem + 9vw, 15.5rem);
  margin-bottom: 0.25rem;
}
.offer-art img { height: 100%; object-fit: contain; }

.offer-problem {
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--line-strong);
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 550;
  line-height: 1.3;
}
.offer-title { font-size: var(--fs-h3); }
.offer-desc { color: var(--ink-2); }

.offer-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.offer-price { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.offer-price strong {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 1.95rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.offer-price span { color: var(--ink-3); font-size: 0.9rem; }
.offer-price.is-text strong { font-size: 1.3rem; letter-spacing: -0.02em; }

@media (min-width: 52rem) {
  .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Strona główna (.is-aligned): karta ma 4 piętra, czyli etykietę, problem,
     rysunek i .offer-body. Piętra obu kart leżą na wspólnych liniach siatki,
     więc rysunki i tytuły zaczynają się równo, nawet gdy zdania łamią się inaczej. */
  @supports (grid-template-rows: subgrid) {
    .offer-grid.is-aligned > .offer-card {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
    }
  }
}

/* ── 12. KAFELKI ──────────────────────────────────────────────────── */
.bento { display: grid; gap: 1rem; }

.tile {
  display: grid;
  gap: 1.25rem;
  align-content: end;
  min-height: 12.5rem;
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.1rem);
  border-radius: var(--r-card);
}
.tile h3 { font-size: var(--fs-h3); margin-bottom: 0.5rem; }
.tile p { color: var(--ink-2); font-size: 0.98rem; max-width: 30rem; }

.tile-art {
  --surface: var(--card);
  align-content: stretch;
  border: 1px solid var(--line);
  background: var(--card);
}
.tile-figure { height: clamp(10rem, 8rem + 8vw, 14rem); }
.tile-figure img { height: 100%; object-fit: contain; }

.tile-lime { background: var(--accent); }
.tile-lime p { color: var(--ink); }
.tile-ink { background: var(--ink); color: var(--paper); }
.tile-ink p { color: rgba(241, 244, 238, 0.74); }

@media (min-width: 52rem) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bento-a, .bento-d { grid-column: span 7; }
  .bento-b, .bento-c { grid-column: span 5; }
  .tile.bento-a, .tile.bento-d {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
  }
  .bento-d .tile-figure { order: 2; }
}

/* ── 13. PROCES ───────────────────────────────────────────────────── */
/* Lista i rysunek leżą w tej samej komórce siatki. Na dużym ekranie lista
   ma pustą środkową kolumnę, w którą trafia rysunek koła. */
.process-grid { display: grid; gap: 2rem; }
.process-art { width: min(100%, 24rem); justify-self: center; }

.process-list { display: grid; counter-reset: krok; }
.process-list li {
  counter-increment: krok;
  position: relative;
  padding: 1.35rem 0 1.35rem 3.25rem;
  border-bottom: 1px solid var(--line);
}
.process-list li::before {
  content: counter(krok);
  position: absolute;
  left: 0; top: 1.25rem;
  display: grid;
  place-items: center;
  width: 2.15rem; height: 2.15rem;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
}
.process-list h3 { font-size: 1.22rem; margin-bottom: 0.35rem; }
.process-list p { color: var(--ink-2); font-size: 0.98rem; }

@media (min-width: 64rem) {
  .process-grid > * { grid-area: 1 / 1; }
  .process-art { width: 25rem; align-self: center; }
  .process-list {
    grid-template-columns: minmax(0, 1fr) 25rem minmax(0, 1fr);
    column-gap: 2.5rem;
    row-gap: 2.5rem;
    align-items: center;
  }
  .process-list li { border-bottom: 0; padding-block: 0.5rem; }
  /* Kolejność jak na rysunku, zgodnie z ruchem wskazówek zegara */
  .process-list li:nth-child(1) { grid-area: 1 / 1; }
  .process-list li:nth-child(2) { grid-area: 1 / 3; }
  .process-list li:nth-child(3) { grid-area: 2 / 3; }
  .process-list li:nth-child(4) { grid-area: 2 / 1; }
}

/* ── 14. O MNIE I NEWSLETTER ──────────────────────────────────────── */
.about-grid { display: grid; gap: 2.25rem; align-items: start; }

.about-photo { width: min(100%, 22rem); }
/* Zdjęcie (nie rysunek): zwykła fotografia w ramce o zaokrągleniu kart */
.about-photo img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.about-photo figcaption { margin-top: 0.75rem; font-size: 0.88rem; color: var(--ink-3); }

.about-copy h2 { font-size: var(--fs-h2); margin-bottom: 1.5rem; }
.about-text p { color: var(--ink-2); max-width: 38rem; }
.about-text p + p { margin-top: 1rem; }
.about-text strong { color: var(--ink); }
.about-quote {
  margin-top: 1.75rem;
  padding-left: 1.1rem;
  border-left: 3px solid var(--accent);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.015em;
  max-width: 28rem;
}

/* Newsletter: karta z zapisem (formularz MailerLite) */
.news-section { padding-top: 0; }
.news {
  --surface: var(--card);
  display: grid;
  gap: 1.75rem;
  padding: clamp(1.4rem, 1rem + 1.8vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
}
.news > * { min-width: 0; }
.news-intro { display: grid; gap: 1rem 1.25rem; align-items: start; }
.news-art { width: 3.75rem; }
.news-copy h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); margin-bottom: 0.5rem; }
.news-copy p { color: var(--ink-2); max-width: 34rem; }
.news-copy .link-arrow { margin-top: 1rem; }
.news-form .input { background: var(--paper); }

@media (min-width: 52rem) {
  .about-grid {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 5.5rem);
    align-items: center;
  }
}
@media (min-width: 34rem) {
  .news-intro { grid-template-columns: auto minmax(0, 1fr); }
  .news-art { width: 4.5rem; }
}
@media (min-width: 56rem) {
  .news {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }
  .news-art { width: 5.75rem; }
}

/* ── 15. FAQ ──────────────────────────────────────────────────────── */
.faq { padding-top: 0; }
.faq-grid { display: grid; gap: 2rem; }
.faq-head h2 { font-size: var(--fs-h2); }
.faq-head .lead { margin-top: 1rem; }

.faq-list { border-top: 1.5px solid var(--ink); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.15rem 0;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
  position: relative;
  flex: none;
  width: 1.75rem; height: 1.75rem;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  transition: background 0.25s, transform 0.3s var(--ease);
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 0.7rem; height: 1.5px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease);
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-icon { background: var(--accent); }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-item summary:hover .faq-icon { background: var(--accent); }
.faq-item p { padding: 0 2.75rem 1.3rem 0; color: var(--ink-2); max-width: 44rem; }

@media (min-width: 60rem) {
  .faq-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4.5rem; align-items: start; }
  .faq-head { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* ── 16. KONTAKT I STOPKA ─────────────────────────────────────────── */
.contact { padding-top: 0; }
.contact-card {
  display: grid;
  gap: 2rem;
  align-items: start;
  padding: clamp(1.25rem, 0.5rem + 4vw, 4rem);
  border-radius: calc(var(--r-card) * 1.4);
  background: var(--ink);
  color: var(--paper);
}
.contact-card > * { min-width: 0; }
.contact-copy { display: grid; gap: 1.25rem; justify-items: start; align-content: start; }
.contact-card h2 { font-size: var(--fs-h2); }
.lime { color: var(--accent); }
.contact-card .lead { color: rgba(241, 244, 238, 0.76); }
.contact-card :focus-visible { outline-color: var(--accent); }

/* Zdjęcie i dane kontaktowe */
.contact-person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem 1.25rem;
  align-items: center;
  margin-top: 0.5rem;
}
.contact-photo {
  width: 5.75rem;
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--r-card);
  object-fit: cover;
}
.contact-list { display: grid; gap: 0.6rem; font-size: 0.95rem; line-height: 1.4; }
.contact-list li { display: grid; gap: 0.1rem; }
.contact-list span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(241, 244, 238, 0.56);
}
.contact-list a {
  justify-self: start;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}
.contact-list a:hover { color: var(--accent); }

/* Formularz: jasna kartka położona na ciemnym bloku */
.contact-form {
  padding: clamp(1.1rem, 0.8rem + 1.6vw, 2rem);
  border-radius: var(--r-card);
  background: var(--paper);
  color: var(--ink);
}
.contact-card .contact-form :focus-visible { outline-color: var(--ink); }

/* Telefon: ciemny blok ma mniej miejsca niż kartka, więc oddaje je formularzowi */
@media (max-width: 30rem) {
  .contact-card { padding: 1.6rem 0.85rem 0.85rem; }
  .contact-copy { padding-inline: 0.55rem; }
  .contact-person { grid-template-columns: 1fr; }
  .contact-form .btn { padding-inline: 1rem; font-size: 0.95rem; }
  .contact-form .btn-arrow { display: none; }
}
@media (min-width: 60rem) {
  .contact-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26.5rem);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
  .contact-copy { padding-top: 0.75rem; }
  .contact-photo { width: 8.5rem; }
}

.foot { padding-bottom: 2.5rem; }
.foot-in {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  padding-top: 2rem;
  border-top: 1.5px solid var(--ink);
}
.foot-tagline { margin-top: 0.7rem; color: var(--ink-2); font-size: 0.95rem; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-weight: 600; font-size: 0.95rem; }
.foot-nav a:hover { background: var(--accent); }
.foot-contact { display: grid; gap: 0.3rem; color: var(--ink-2); font-size: 0.95rem; }
.foot-contact a { font-weight: 600; color: var(--ink); }
.foot-contact a:hover { background: var(--accent); }
.foot-bottom a { text-decoration: underline; text-underline-offset: 0.18em; }
.foot-bottom a:hover { color: var(--ink); }
.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: 2rem;
  color: var(--ink-3);
  font-size: 0.86rem;
}

/* ── 17. PODSTRONY ────────────────────────────────────────────────── */
/* Elementy stron /szkolenia-ai/, /konsultacje/, /strony-internetowe/, /newsletter/ i /dziekuje/.
   Reszta (nagłówek, karty oferty, kafelki, FAQ, kontakt, stopka) jest wspólna ze stroną główną. */

/* Aktywna pozycja menu */
.top-nav a[aria-current="page"],
.menu-panel a[aria-current="page"] { color: var(--ink); background: rgba(16, 20, 12, 0.07); }

/* Nagłówek podstrony: tytuł, cena i rysunek */
.page-hero { padding: clamp(2rem, 1.25rem + 3vw, 4.25rem) 0 clamp(3rem, 2rem + 4vw, 5.5rem); }
.page-hero-grid { display: grid; gap: 2.25rem; }
.page-hero-copy { display: grid; gap: 1.25rem; align-content: start; justify-items: start; }
.page-title { font-size: var(--fs-hero); max-width: 12em; }
.page-hero .lead { max-width: 34rem; }
.price-line { display: flex; align-items: baseline; gap: 0.6rem; margin-top: 0.4rem; }
.price-line strong {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  font-weight: 750;
  letter-spacing: -0.04em;
  line-height: 1;
}
.price-line span { color: var(--ink-3); }
.price-note { margin-top: -0.6rem; color: var(--ink-2); font-size: 0.97rem; max-width: 32rem; }
.page-hero .actions { margin-top: 0.5rem; }
.page-hero-art { width: min(100%, 25rem); justify-self: center; }
/* Dwa rysunki obok siebie (strona na komputerze i na telefonie) */
.page-hero-art.is-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.34fr);
  gap: 0.25rem;
  align-items: end;
}

@media (min-width: 60rem) {
  .page-hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 3.5rem;
    align-items: center;
  }
  .page-hero-art { width: 100%; max-width: 31rem; justify-self: end; }
}

/* Karty wariantów i pakietów: bez rysunku, z numerem i etykietą */
.offer-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.offer-index { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--accent-deep); }
.pill {
  display: inline-flex;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.offer-title.is-big { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.95rem); letter-spacing: -0.03em; }
.offer-foot.is-stack { display: grid; justify-items: start; gap: 0.6rem; }
.offer-note { margin-top: -0.35rem; color: var(--ink-2); font-size: 0.92rem; }
.offer-included { color: var(--ink-2); font-size: 0.92rem; line-height: 1.5; }
.offer-included strong { color: var(--ink); }
.offer-foot.is-stack .link-arrow { margin-top: 0.4rem; }

/* Jedna szeroka karta (podstrona szkoleń): opis po lewej, cena po prawej */
.offer-main { display: grid; gap: 1rem; align-content: start; }
.offer-top.is-start { justify-content: flex-start; flex-wrap: wrap; gap: 0.5rem; }
@media (min-width: 40rem) {
  .check-list.is-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.75rem; }
}
@media (min-width: 52rem) {
  .offer-grid.is-single { grid-template-columns: minmax(0, 1fr); }
  .offer-card.is-wide {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }
  .offer-card.is-wide .offer-foot {
    align-content: center;
    margin-top: 0;
    padding: 0 0 0 clamp(1.75rem, 3.5vw, 3rem);
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}

.note { margin-top: 1.75rem; color: var(--ink-3); font-size: 0.9rem; max-width: 44rem; }

/* Punkty programu i kroki: kolumny z numerem, jak w spisie doradców */
.plan { counter-reset: punkt; display: grid; gap: 2rem 2.5rem; }
.plan li {
  counter-increment: punkt;
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding-top: 1rem;
  border-top: 1.5px solid var(--ink);
}
.plan li::before {
  content: counter(punkt, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-deep);
}
.plan h3 { font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.42rem); }
.plan p { color: var(--ink-2); font-size: 0.98rem; }

@media (min-width: 44rem) {
  .plan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
  .plan.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 72rem) {
  .plan.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.25rem; }
}

/* Kafelki w równych kolumnach: trzy, a z klasą .is-2 dwie */
.tiles { display: grid; gap: 1rem; }
.tiles .tile { align-content: space-between; min-height: 0; }
/* Rysunek na limonkowym kafelku: biel rysunku przyjmuje kolor zakreślacza */
.tile-lime { --surface: var(--accent); }
.tile .tile-big {
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 2.5rem + 3.5vw, 5rem);
  font-weight: 750;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--accent);
}
.tile .tile-big span { font-size: 0.42em; letter-spacing: -0.02em; }
.tiles .tile-art { grid-template-columns: 1fr; }
.tile .tile-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
}
@media (min-width: 52rem) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Pas z rysunkiem: ciemniejszy papier, tekst i rysunek obok siebie */
.band-section { padding-top: 0; }
.band {
  --surface: var(--paper-2);
  display: grid;
  gap: 1.75rem;
  align-items: center;
  padding: clamp(1.5rem, 1rem + 3vw, 3.25rem);
  border-radius: var(--r-card);
  background: var(--paper-2);
}
.band > * { min-width: 0; }
.band h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); }
.band .lead { margin-top: 0.9rem; }
.band .link-arrow { margin-top: 1.25rem; }
.band-art { width: min(100%, 19rem); justify-self: center; }

@media (min-width: 52rem) {
  .band { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 3rem; }
  .band-art { width: 100%; max-width: 22rem; justify-self: end; }
}

/* Liczby przy „Kto prowadzi” */
.about-copy .eyebrow { margin-bottom: 0.9rem; }
.about-copy .stats { margin-top: 1.75rem; }
.about-copy .link-arrow { margin-top: 1.5rem; }

/* Proste strony: archiwum newslettera, wydanie, podziękowanie */
.page-simple { padding: clamp(2rem, 1.25rem + 3vw, 4rem) 0 var(--section-pad); }
.page-simple-head { display: grid; gap: 1rem; justify-items: start; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.page-simple-head h1 { font-size: var(--fs-h2); max-width: 16em; }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--ink-2);
}
.back-link:hover { color: var(--ink); background: var(--accent); }

.nl-empty {
  padding: 1.25rem 0;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 600;
  max-width: 44rem;
}
.nl-issue-list { border-top: 1.5px solid var(--ink); max-width: 46rem; }
.nl-issue-item { display: grid; gap: 0.4rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.nl-issue-date {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.nl-issue-title { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem); letter-spacing: -0.025em; }
.nl-issue-title a { background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0% 0.3em no-repeat; transition: background-size 0.25s var(--ease); }
.nl-issue-title a:hover { background-size: 100% 0.3em; }
.nl-issue-teaser { color: var(--ink-2); max-width: 40rem; }

/* Tekst ciągły (polityka prywatności) */
.prose { max-width: 42rem; font-size: 1.05rem; line-height: 1.7; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2, .prose h3 { margin-top: 2.2rem; font-size: clamp(1.3rem, 1.2rem + 0.6vw, 1.6rem); }
.prose p { color: var(--ink-2); }
.prose strong { color: var(--ink); }
.prose a {
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent-deep);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
}
.prose a:hover { background: var(--accent); text-decoration-color: transparent; }
.prose ul, .prose ol { padding-left: 1.3rem; color: var(--ink-2); }
.prose li + li { margin-top: 0.4rem; }

/* Treść wydania (HTML z maila, wyciągnięty przez sync-newsletter.php): mail jest projektowany
   na białym tle i ma własne style, więc dostaje osobną białą kartkę */
.nl-content {
  max-width: 46rem;
  padding: clamp(1rem, 0.6rem + 2vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: #fff;
  color: #14181d;
  line-height: 1.65;
  overflow-x: auto;
}
.nl-content p { margin-bottom: 1rem; }
.nl-content h1, .nl-content h2, .nl-content h3 { margin: 1.5rem 0 0.75rem; font-size: 1.35rem; }
.nl-content ul, .nl-content ol { margin-bottom: 1rem; padding-left: 1.3rem; }
.nl-content a { text-decoration: underline; }
.nl-content img { max-width: 100%; height: auto; }
.nl-content table { max-width: 100%; }

.page-simple .news { margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); }

/* Ankieta przed konsultacją 1:1 (/konsultacje/): kartka z ponumerowanymi pytaniami,
   obok mała karta z kontaktem. Numery pytań dopisuje licznik CSS. */
.page-hero-art.is-tall { width: min(62%, 15rem); }
.btn:hover .btn-arrow.is-down { transform: translateY(3px); }

.survey-grid { display: grid; gap: 1.5rem; align-items: start; }
.survey-grid > * { min-width: 0; }

/* Obwódka tuszem i twardy cień, jak formularze na stronach z materiałami */
.survey,
.survey-done {
  padding: clamp(1.25rem, 0.8rem + 2.2vw, 2.5rem);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: 0 5px 0 var(--ink);
}
.survey { counter-reset: pytanie; gap: 0; }
/* display: grid wygrywa z atrybutem hidden, więc chowanie trzeba napisać wprost */
.survey[hidden],
.survey-done[hidden],
.survey-calendar[hidden] { display: none; }

.survey-q {
  display: grid;
  gap: 0.75rem;
  padding-block: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  border-top: 1px dashed var(--line-strong);
}
.survey-q:first-child { padding-top: 0; border-top: 0; }
.survey-q > * { min-width: 0; }
.survey-q:not(.is-plain) { counter-increment: pytanie; }
.q-title {
  display: grid;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.survey-q:not(.is-plain) .q-title::before {
  content: counter(pytanie, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--accent-deep);
}
.q-hint { margin-top: -0.3rem; color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; }
.survey .input { background: var(--paper); }
.survey textarea.input { min-height: 6.5rem; }
.survey-q > .field + .field { margin-top: 0.35rem; }
.field-label { font-size: 0.86rem; font-weight: 650; }
.optional { font-weight: 500; color: var(--ink-3); }
.field-row { display: grid; gap: 1rem; }

/* Odpowiedzi do wyboru: pastylki. Pole radio leży na pastylce, niewidoczne,
   ale dalej klikalne i dostępne z klawiatury. */
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice { position: relative; display: inline-flex; }
.choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.choice span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.05rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background 0.2s, box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.choice input:hover + span { background: var(--paper-2); }
.choice input:checked + span {
  background: var(--accent);
  box-shadow: 0 2px 0 var(--ink);
  transform: translateY(-1px);
}
.choice input:focus-visible + span {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--accent);
}

/* Pola, które serwer odesłał z błędem */
.survey .input[aria-invalid="true"] { border-color: #9a2c14; box-shadow: 0 0 0 4px rgba(154, 44, 20, 0.16); }
.survey [role="radiogroup"][aria-invalid="true"] .choice span { border-color: #9a2c14; }

.survey-send {
  display: grid;
  gap: 0.9rem;
  padding-top: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  border-top: 1.5px solid var(--ink);
}

/* Karta po wysłaniu ankiety */
/* Kolumna minmax(0, 1fr): przycisk z długim napisem łamie się, zamiast rozpychać kartę */
.survey-done { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; justify-items: start; }
.survey-done h3 { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.95rem); letter-spacing: -0.03em; }
.survey-done p { color: var(--ink-2); max-width: 34rem; }
.survey-done:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.survey-done .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.2; }
.survey-calendar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; justify-items: start; }

.survey-aside {
  display: grid;
  gap: 0.75rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--r-card);
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: 0.95rem;
}
.survey-photo {
  width: 5rem;
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--r-card);
  object-fit: cover;
}
.survey-aside-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.survey-aside-more { padding-top: 0.75rem; border-top: 1px solid var(--line-strong); }

@media (min-width: 40rem) {
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
  .page-hero-art.is-tall { width: 100%; max-width: 21rem; }
  .survey-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
    gap: clamp(2rem, 4vw, 3.5rem);
  }
  .survey-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}


/* ── 18. RUCH ─────────────────────────────────────────────────────── */
/* Wejście elementów: tylko opacity i transform, opóźnienie z --i */
.motion [data-in] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.motion [data-in].is-in { opacity: 1; transform: none; }

/* Górna część strony nie czeka na skrypt: wchodzi samą animacją CSS */
.motion .hero [data-in],
.motion .page-hero [data-in],
.motion .page-simple-head[data-in] {
  opacity: 1;
  transform: none;
  transition: none;
  animation: wejscie 0.7s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes wejscie { from { opacity: 0; transform: translateY(16px); } }

/* Zdanie odsłaniane słowo po słowie: tempo czytania, potem zakreślacz */
.motion [data-reveal-words] .w {
  opacity: 0.16;
  transition: opacity 0.5s var(--ease);
  transition-delay: calc(var(--n, 0) * 45ms);
}
.motion [data-reveal-words].is-in .w { opacity: 1; }
.motion [data-reveal-words] .mark {
  background-size: 0% 0.32em;
  transition: background-size 0.7s var(--ease) 1.3s;
}
.motion [data-reveal-words].is-in .mark { background-size: 100% 0.32em; }

/* ── 19. STARSZE KLASY (lead magnety, /linki) ─────────────────────── */
/* Strony zapisu po materiały (/humanizator/, /profil/, /25/ i kolejne) oraz „link w bio”
   mają nazwy klas z dawnej, ciemnej wersji strony. Tu dostają wygląd papierowy bez zmian
   w ich HTML. Elementy tych stron: lead-magnet.css i linki/linki.css. */
.mono { font-family: var(--font-mono); }
.glow { display: none; }   /* limonkowa poświata z ciemnej wersji */

.kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-2);
}

.btn-primary {
  background: var(--accent);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
}
.btn-primary:hover {
  background: var(--accent-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 0 var(--ink);
}
.btn-primary:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.btn-primary.btn-small { box-shadow: 0 2px 0 var(--ink); }
.btn-primary.btn-small:hover { box-shadow: 0 3px 0 var(--ink); }
.btn-primary.btn-small:active { box-shadow: 0 0 0 var(--ink); }

.form-row { display: grid; gap: 0.4rem; }
.form-label { font-size: 0.86rem; font-weight: 650; }
.form-input {
  width: 100%;
  padding: 0.85rem 0.95rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-btn);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.2s, box-shadow 0.2s var(--ease);
}
.form-input::placeholder { color: var(--ink-3); opacity: 1; }
.form-input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: var(--r-btn);
  background: #fff;
  box-shadow: 0 0 0 5px var(--accent);
}