/* ============================================================
 * GoIDEA — components
 *
 * Site header, nav, language switcher, theme toggle, buttons,
 * cards, hero, banner-strip (GSO), proof-bar, segment cards,
 * client logos, footer, cookie banner, form fields.
 *
 * NO mono font anywhere — numbers and "tech-y" labels use
 * font-feature-settings: "tnum" (tabular numerals on Exo).
 * ============================================================ */

/* ============================================================
 * A/B TEST UTILITY
 * Pre-JS: variants tagged with .is-ab-hidden are hidden.
 * Post-JS: ab-test.js toggles the class so the picked variant
 * shows and the rest stay hidden. Prevents FOUC.
 * ============================================================ */
.is-ab-hidden { display: none !important; }

/* ============================================================
 * SITE HEADER
 * ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(var(--header-blur)) saturate(120%);
  backdrop-filter: blur(var(--header-blur)) saturate(120%);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--content-pad-mobile);
}
@media (min-width: 768px) {
  .site-header__inner { padding-inline: var(--content-pad); padding-block: var(--space-4); }
}
/* Wąskie telefony: kompaktowa belka — bez tego logo + przełącznik PL/DE/EN + toggle
   + burger przekraczają szerokość viewportu (poziomy overflow → Safari „oddala" stronę). */
@media (max-width: 479.98px) {
  .site-header__inner { padding-inline: 16px; gap: var(--space-2); }
  .site-header__logo img { height: 20px; }
  .lang-switcher__btn { padding: 6px 7px; min-width: 26px; }
}
.site-header__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.site-header__logo img {
  height: 24px;
  width: auto;
  display: block;
}
@media (min-width: 768px) { .site-header__logo img { height: 28px; } }

/* ---- Primary nav ---- */
.nav-primary {
  display: none;
  align-items: center;
  gap: var(--space-6);
  flex: 1 1 auto;
  justify-content: center;
}
@media (min-width: 1024px) {
  .nav-primary { display: flex; }
}
.nav-primary__link {
  position: relative;
  color: var(--fg-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: var(--space-2) 0;
  transition: color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.nav-primary__link:hover,
.nav-primary__link.is-active,
.nav-primary__link[aria-current="page"] {
  color: var(--fg);
}
.nav-primary__link.is-active::after,
.nav-primary__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
/* Dropdown affordance (▾) */
.nav-primary__caret {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  opacity: 0.6;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.nav-primary__link:hover .nav-primary__caret { opacity: 1; }

/* ---- Dropdown „Dla kogo" (nav-primary) ---- */
.nav-has-sub { position: relative; display: inline-flex; align-items: center; }
.nav-sub {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(4px);
  min-width: 232px; display: flex; flex-direction: column; gap: 2px;
  margin-top: 8px; padding: var(--space-2);
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              visibility var(--dur-fast) var(--ease-out);
  z-index: 60;
}
.nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } /* mostek do hoveru */
.nav-has-sub:hover .nav-sub,
.nav-has-sub:focus-within .nav-sub {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-has-sub:hover .nav-primary__caret,
.nav-has-sub:focus-within .nav-primary__caret { opacity: 1; }
.nav-sub__link {
  display: block; padding: 8px 12px; border-radius: var(--radius-sm);
  color: var(--fg-2); font-size: var(--text-sm); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-sub__link:hover,
.nav-sub__link:focus-visible,
.nav-sub__link[aria-current="page"] { background: var(--bg-subtle); color: var(--fg); }

/* ---- Sublinki w szufladzie mobilnej ---- */
.nav-drawer__sublink { padding-left: var(--space-6); font-size: var(--text-sm); color: var(--fg-3); }

/* ---- Header right cluster ---- */
.site-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}
@media (min-width: 768px) { .site-header__right { gap: var(--space-3); } }

/* ---- Language switcher (PL · DE · EN) ---- */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}
.lang-switcher__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--fg-3);
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  font-feature-settings: "tnum";
  min-width: 32px;
  text-align: center;
}
.lang-switcher__btn:hover { color: var(--fg); }
.lang-switcher__btn[aria-current="true"] {
  color: var(--on-accent);
  background: var(--accent);
}

/* ---- Theme toggle ---- */
.theme-toggle {
  appearance: none;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--fg);
  width: 36px; height: 36px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-med) var(--ease-out);
  padding: 0;
}
.theme-toggle:hover { transform: translateY(-1px); }
.theme-toggle svg { width: 16px; height: 16px; }

/* ---- Mobile burger ---- */
.nav-burger {
  appearance: none;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--fg);
  width: 36px; height: 36px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
@media (min-width: 1024px) { .nav-burger { display: none; } }
.nav-burger svg { width: 18px; height: 18px; }

/* ---- Mobile drawer ---- */
.nav-drawer {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: var(--z-modal);
  padding: var(--space-7) var(--content-pad-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transform: translateY(-100%);
  transition: transform var(--dur-med) var(--ease-out);
  overflow-y: auto;
}
.nav-drawer.is-open { transform: translateY(0); }
.nav-drawer__close {
  align-self: flex-end;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--fg);
  font-size: 28px;
  line-height: 1;
  padding: var(--space-2);
  cursor: pointer;
}
.nav-drawer__link {
  display: block;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--fg);
}
.nav-drawer__cta { margin-top: var(--space-5); }
@media (min-width: 1024px) { .nav-drawer { display: none; } }

/* ============================================================
 * BUTTONS
 * ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: inherit;
  font-weight: var(--weight-semibold);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--dur-med) var(--ease-out);
  letter-spacing: -0.005em;
  white-space: nowrap;
  min-height: 44px;        /* WCAG touch target */
}
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Sizes */
.btn--sm { font-size: var(--text-sm); padding: 8px 14px; min-height: 36px; }
.btn--md { font-size: var(--text-base); padding: 12px 22px; }
.btn--lg { font-size: var(--text-md); padding: 16px 28px; border-radius: var(--radius-lg); }

/* Primary */
.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn--primary:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}
.btn--primary:active {
  background: var(--accent-press);
  transform: translateY(0);
  box-shadow: none;
}

/* Secondary */
.btn--secondary {
  background: transparent;
  color: var(--fg);
  border-color: var(--border-strong);
}
.btn--secondary:hover {
  border-color: var(--fg);
  background: var(--overlay-glass);
}

/* Ghost */
.btn--ghost {
  background: transparent;
  color: var(--fg-2);
}
.btn--ghost:hover { color: var(--fg); background: var(--overlay-glass); }

/* Link-style button */
.btn--link {
  background: transparent;
  color: var(--accent-on-bg);
  font-weight: var(--weight-semibold);
  padding: 0;
  min-height: auto;
  border: 0;
  border-radius: 0;
}
.btn--link:hover { text-decoration: underline; }

/* Arrow inside button */
.btn__arrow { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ============================================================
 * CARDS
 * ============================================================ */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.card--interactive { cursor: pointer; }
.card--interactive:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.card--bordered-accent { border-color: var(--accent); }

.card__title { font-size: var(--text-xl); font-weight: var(--weight-semibold); margin: 0; line-height: var(--leading-snug); }
.segment-card .card__title { line-height: calc(var(--leading-snug) * 1.2); } /* +20% interlinia tytułów kart segmentów (R: 22.05.2026) */
.card__body  { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg-2); margin: 0; }
.card__icon  { width: 56px; height: 56px; }

/* ============================================================
 * HERO
 * ============================================================ */
.hero {
  position: relative;
  padding-block: var(--space-7) var(--space-8);
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 1024px) {
  .hero { padding-block: var(--space-8) var(--space-9); }
}
.hero__inner {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1fr minmax(320px, 440px);
    gap: var(--space-7);
  }
}
.hero__content { display: flex; flex-direction: column; gap: var(--space-4); max-width: 680px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }

/* Portrait — bez ramki i tła (transparent PNG na aurorze).
   Mobile mniejszy, lg do 440px. Mobile order: nad copy. */
.hero__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  /* no border, no background, no radius — transparent PNG */
  max-width: 200px;
  width: 100%;
  margin: 0 auto;
  order: -1;
}
@media (min-width: 600px) {
  .hero__portrait { max-width: 280px; }
}
@media (min-width: 768px) {
  .hero__portrait { max-width: 340px; }
}
@media (min-width: 1024px) {
  .hero__portrait {
    max-width: 440px;
    margin: 0;
    order: 0;
  }
}
.hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 24px;
}
@media (min-width: 1024px) {
  .hero__portrait img { border-radius: 32px; }
}
.hero__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 820px at left top, rgba(255,153,0,0.42), transparent 66%),
    radial-gradient(1000px 760px at right bottom, rgba(60,170,210,0.22), transparent 66%);
  z-index: -1;
  filter: blur(28px);
  pointer-events: none;
}
:root[data-theme="light"] .hero__glow {
  background:
    radial-gradient(1100px 820px at left top, rgba(255,153,0,0.28), transparent 66%),
    radial-gradient(1000px 760px at right bottom, rgba(60,170,210,0.16), transparent 66%);
}
/* Wariant limonkowy — sekcja Wiedza (hero bloga + strony artykułów): limonka zamiast niebieskiego.
   Klasa nazywa się `--pink` z powodów historycznych (v26 był róż); kolor od v27 = lime rgba(195,222,31). */
.hero__glow--pink {
  background:
    radial-gradient(1100px 820px at left top, rgba(255,153,0,0.42), transparent 66%),
    radial-gradient(1000px 760px at right bottom, rgba(195,222,31,0.30), transparent 66%);
}
:root[data-theme="light"] .hero__glow--pink {
  background:
    radial-gradient(1100px 820px at left top, rgba(255,153,0,0.28), transparent 66%),
    radial-gradient(1000px 760px at right bottom, rgba(195,222,31,0.20), transparent 66%);
}

/* ============================================================
 * AURORA „PAS GÓRNY" — spójny nagłówek na stronach bez pełnego .hero.
 * Ten sam gradient co .hero__glow, ograniczony do górnego pasa sekcji,
 * żeby na długich stronach aurora malowała się tylko za nagłówkiem.
 * Użycie: klasa .aurora-top na pierwszej sekcji + <div class="aurora-top__glow">.
 * ============================================================ */
.aurora-top { position: relative; overflow: hidden; isolation: isolate; }
.aurora-top__glow {
  position: absolute;
  inset: 0;                 /* pokrywa całą sekcję; kolory kotwiczone w narożnikach o stałym rozmiarze px
                               → pomarańcz zawsze z górnego-lewego, drugi kolor z prawego-dolnego,
                               niezależnie od wysokości sekcji (wcześniej pas 700px u góry) */
  background:
    radial-gradient(1100px 820px at left top, rgba(255,153,0,0.42), transparent 66%),
    radial-gradient(1000px 760px at right bottom, rgba(60,170,210,0.22), transparent 66%);
  z-index: -1;
  filter: blur(28px);
  pointer-events: none;
}
:root[data-theme="light"] .aurora-top__glow {
  background:
    radial-gradient(1100px 820px at left top, rgba(255,153,0,0.28), transparent 66%),
    radial-gradient(1000px 760px at right bottom, rgba(60,170,210,0.16), transparent 66%);
}

/* ============================================================
 * BLOG (Wiedza) — siatka kafli. Każdy kafel: aurora-grafika z tytułem
 * na górze + meta pod spodem. Pierwszy kafel (góra-lewo) = najnowszy wpis.
 * ============================================================ */
.blog-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

.blog-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-elevated);
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.blog-card:hover,
.blog-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.blog-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Aurora-grafika z tytułem */
.blog-card__media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* clip-path przycina TAKŻE rozmyte dziecko (.blog-card__media-glow) do zaokrąglonych
     górnych narożników — samo overflow:hidden+border-radius nie przycina filter:blur,
     przez co jasna aura wystawała poza lewy górny róg karty */
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  clip-path: inset(0 round var(--radius-lg) var(--radius-lg) 0 0);
  min-height: 190px;
  display: flex;
  align-items: flex-end;
  padding: var(--space-5);
  background: var(--bg-elevated-2);
}
.blog-card__media-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 78% 82% at left top, rgba(255,153,0,0.42), transparent 66%),
    radial-gradient(ellipse 70% 74% at right bottom, rgba(195,222,31,0.30), transparent 66%);
  z-index: -1;
  filter: blur(28px);
  pointer-events: none;
}
:root[data-theme="light"] .blog-card__media-glow {
  background:
    radial-gradient(ellipse 78% 82% at left top, rgba(255,153,0,0.28), transparent 66%),
    radial-gradient(ellipse 70% 74% at right bottom, rgba(195,222,31,0.20), transparent 66%);
}
.blog-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}

/* Meta + zajawka pod grafiką */
.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-5);
}
.blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  font-size: var(--text-xs);
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
.blog-card__cat { color: var(--accent-on-bg); font-weight: var(--weight-semibold); }
.blog-card__excerpt {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-2);
  margin: 0;
}
.blog-card__more {
  margin-top: auto;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--accent-on-bg);
}

/* Cytat wyróżniony w treści artykułu — boks na całą szerokość z graficznym cudzysłowem */
.pullquote {
  position: relative;
  margin: var(--space-7) 0;
  padding: var(--space-5) var(--space-6) var(--space-5) var(--space-8);
  background: var(--bg-callout);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  font-style: normal;
}
.pullquote::before {
  content: "\201C";                 /* graficzny cudzysłów */
  position: absolute;
  left: var(--space-3);
  top: var(--space-2);
  font-family: var(--font-display);
  font-size: 3.25rem;
  line-height: 1;
  color: var(--accent);
  pointer-events: none;
}
/* Powrót nad nagłówkiem artykułu */
.article-back { display: inline-block; margin-bottom: var(--space-3); }

/* Link tekstowy w treści — wyraźny kolor akcentu + podkreślenie, żeby od razu było widać link */
.text-link {
  color: var(--accent-on-bg);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: var(--weight-semibold);
}
.text-link:hover { text-decoration: none; }

/* Nagłówek sekcji w artykule — mniejszy font niż .h2, duży górny margines.
   (Uwaga: utility .mt-8/.mt-9 NIE istnieją — margines ustawiony wprost.) */
.article-h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);              /* 34px — mniejszy niż .h2 (~44) */
  line-height: var(--leading-snug);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: var(--space-9) 0 0;              /* 96px nad nagłówkiem */
  text-wrap: balance;
}

/* ============================================================
 * NUMBER TRIO — three numbers (20 / 5+ / 1)
 * Adapted 1:1 from v3.1 visual style:
 *   - 2px accent border-top per card
 *   - big numeric in Exo Bold, tight letter-spacing
 *   - label in accent color, uppercase, caps tracking
 *   - body — 1–2 sentences for context
 * ============================================================ */
.number-trio {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-5);
}
@media (min-width: 768px) {
  .number-trio { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}
.number-card {
  border-top: 2px solid var(--accent);
  padding-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.number-card__big {
  font-family: var(--font-sans);
  font-size: clamp(3.5rem, 6vw + 1rem, 6rem);   /* 56px → 96px */
  font-weight: var(--weight-bold);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--fg);
  font-feature-settings: "tnum";
}
.number-card__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-on-bg);
  font-weight: var(--weight-semibold);
  font-feature-settings: "tnum";
}
.number-card__body {
  font-size: var(--text-sm);
  color: var(--fg-2);
  line-height: var(--leading-normal);
  margin: 0;
  text-wrap: pretty;
}

/* ============================================================
 * SEGMENT PICKER — 3 cards z wyrównaniem pionowym
 * Layout per karta:
 *   1. eyebrow „Kim jesteś" (fixed)
 *   2. h3 cytat klienta (min-height — równa wysokość)
 *   3. body opis (flex: 1 1 auto — rośnie żeby boxy były równe)
 *   4. divider
 *   5. eyebrow „Co dostaniesz" (fixed)
 *   6. krótka info (np. cena, czas)
 *   7. CTA link (margin-top: auto)
 * ============================================================ */
.segment-picker {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: stretch;
}
@media (min-width: 768px) {
  .segment-picker {
    grid-template-columns: repeat(3, 1fr);
    /* wiersze: rola · cytat · opis(1fr) · kreska · CTA — subgrid synchronizuje je między kartami */
    grid-template-rows: auto auto 1fr auto auto;
    gap: var(--space-5);
  }
}

.segment-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
  padding: var(--space-5) var(--space-5) var(--space-5);
}
.segment-card__role-label,
.segment-card__offer-label {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: var(--weight-bold);
  font-feature-settings: "tnum";
}
.segment-card__role-label {
  /* większy oddech pod etykietą „Kim jesteś" (R: 21.05.2026) */
  margin: 0 0 var(--space-4) 0;
}
.segment-card .card__title {
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-3) 0;
  /* min-height żeby cytaty się wyrównały — 3 linie po 1.18 leading */
  min-height: calc(var(--text-md) * var(--leading-snug) * 3);
}
@media (min-width: 768px) {
  /* subgrid: karta dziedziczy 5 wierszy siatki rodzica, więc rola/cytat/opis/kreska/CTA
     wyrównują się między wszystkimi kartami (opisy startują na tej samej wysokości) */
  .segment-card {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    gap: 0; /* odstępy daje margines elementów, nie gap siatki */
  }
  /* przy subgrid wysokość wiersza tytułu wyrównuje się automatycznie do najdłuższego */
  .segment-card .card__title { min-height: 0; }
}
.segment-card .card__body {
  flex: 1 1 auto;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-2);
  margin: 0 0 var(--space-4) 0;
}
.segment-card__divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 0 0 var(--space-4) 0;
}
.segment-card .solution-card__link {
  margin-top: auto;
}

/* ============================================================
 * SOLUTIONS GRID (5 + invite cards — Co buduję)
 * Adapted 1:1 from v3.1 visual style.
 * ============================================================ */
.solutions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
@media (min-width: 700px) { .solutions-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .solutions-grid { grid-template-columns: repeat(3, 1fr); } }

.solution-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-5) var(--space-6);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out);
}
.solution-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.solution-card__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-3) 0;
  line-height: var(--leading-snug);
}
.solution-card__body {
  color: var(--fg-2);
  font-size: var(--text-sm);
  flex-grow: 1;
  margin: 0 0 var(--space-4) 0;
  line-height: var(--leading-normal);
}
.solution-card__link {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--accent-on-bg);
  font-weight: var(--weight-semibold);
}
.solution-card__link::after { content: " →"; }

/* Badge NEW — inline, część flow karty (nie absolute, żeby nic nie zasłaniał) */
.badge--new {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--accent);
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  font-weight: var(--weight-bold);
  font-feature-settings: "tnum";
  margin: 0 0 var(--space-3) 0;
}

/* Invite card — 6th tile „Tu może być Twój system" */
.solution-card--invite {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.solution-card--invite:hover {
  border-style: solid;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.solution-card--invite .solution-card__title { color: var(--accent-on-bg); }

/* ============================================================
 * AI PILLARS (3 columns — odpowiedzialny człowiek)
 * ============================================================ */
.ai-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .ai-pillars { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}
.ai-pillars-heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, var(--text-3xl)); /* rozmiar H2 */
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--accent-on-bg); /* pomarańczowy tytuł nad 3 boksami (R: 21.05.2026) */
  text-wrap: balance;
  margin-block: var(--space-7) var(--space-5); /* większy margines od góry */
}

/* Źródło pod paskiem statystyk RTB (sekcja 06) */
.ai-stats__source {
  font-size: var(--text-xs);
  color: var(--fg-3);
  margin-top: var(--space-3);
}
.ai-stats__source a { color: var(--accent-on-bg); }

/* ============================================================
 * BANNER-STRIP (GSO teaser — 14 dni · 4900 PLN · gwarancja)
 * ============================================================ */
.banner-strip {
  background: var(--bg-elevated-2);
  border-block: 1px solid var(--border);
  padding-block: var(--space-7);
  text-align: center;
}
.banner-strip__triplet {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-block: var(--space-5);
}
@media (min-width: 768px) {
  .banner-strip__triplet { grid-template-columns: repeat(3, 1fr); gap: var(--space-7); }
}
.banner-strip__item { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.banner-strip__num {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--accent-on-bg);
  font-feature-settings: "tnum";
  letter-spacing: -0.02em;
}
.banner-strip__label { font-size: var(--text-sm); color: var(--fg-3); }
.banner-strip__scarcity {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--fg-2);
  margin-top: var(--space-3);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--overlay-glass);
  border: 1px solid var(--border);
  font-feature-settings: "tnum";
}
.banner-strip__scarcity::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(60,170,210,0.18);
  animation: pulse 2.4s var(--ease-out) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(60,170,210,0.18); }
  50% { box-shadow: 0 0 0 7px rgba(60,170,210,0.0); }
}

/* ============================================================
 * TIMELINE (Jak pracuję skrót — 4 kroki)
 * Linia łącząca rysowana JAKO SEGMENTY pomiędzy kółkami
 * (każdy step :not(:last-child) ma ::after) — żadnej linii
 * przechodzącej przez środek kółek.
 * ============================================================ */
.timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-5);
}
@media (min-width: 768px) {
  .timeline { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
}
.timeline__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-right: var(--space-2);
}
@media (min-width: 768px) {
  /* Segment łączący — od prawego brzegu kółka A do lewego brzegu kółka B.
     dot ma 48px → środek 24px → jesteśmy w gap, zaczynamy 24+gap/2 px po prawej. */
  .timeline__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 23px;                      /* środek kółka (48/2 - 1) */
    left: calc(48px + var(--space-3));
    right: calc(-1 * var(--space-3));
    height: 2px;
    background: var(--border-strong);
    border-radius: 2px;
  }
}
.timeline__dot {
  width: 48px; height: 48px;
  border-radius: var(--radius-pill);
  background: var(--bg);
  border: 2px solid var(--accent);
  color: var(--accent-on-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-bold);
  font-feature-settings: "tnum";
  position: relative;
  z-index: 1;
}
.timeline__week { font-size: var(--text-xs); color: var(--fg-muted); letter-spacing: 0.06em; text-transform: uppercase; font-feature-settings: "tnum"; }
.timeline__title { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.timeline__body { font-size: var(--text-sm); color: var(--fg-3); line-height: var(--leading-normal); }

/* ============================================================
 * FAQ (accordion)
 * ============================================================ */
.faq__item {
  border-bottom: 1px solid var(--border);
}
.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--fg);
  cursor: pointer;
  list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
  content: "+";
  font-size: 24px;
  color: var(--accent-on-bg);
  font-weight: var(--weight-regular);
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq__item[open] .faq__question::after { content: "−"; }
.faq__answer {
  padding-bottom: var(--space-5);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--fg-2);
}

/* ============================================================
 * FORM
 * ============================================================ */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.form__field { display: flex; flex-direction: column; gap: 6px; }
.form__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--fg-3);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.form__input,
.form__textarea,
.form__select {
  font-family: inherit;
  font-size: var(--text-base);
  padding: 12px 14px;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--fg);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  width: 100%;
  min-height: 44px;
}
.form__input::placeholder,
.form__textarea::placeholder {
  color: var(--fg-disabled); /* przyciemnione placeholdery — ciemniejszy stopień (R: 22.05.2026) */
  opacity: 1;
}
.form__textarea { min-height: 120px; resize: vertical; line-height: var(--leading-normal); }
.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.18);
}
.form__hint { font-size: var(--text-xs); color: var(--fg-muted); }
.form__hint.form__footer { text-align: center; }
/* Submit full-width — żeby hint pod przyciskiem był jego osi (P17 runda 2) */
.form__submit { width: 100%; }

/* Lede w sekcji kontaktu — interlinia jak akapitu poniżej (R4 P1) + font -20% (R3 P7) */
#kontakt .lede {
  line-height: var(--leading-normal);
  font-size: calc(var(--text-md) * 0.8);
}
.form__error {
  display: none;
  font-size: var(--text-xs);
  color: var(--danger-on-bg);
  margin-top: 4px;
}
.form__field.has-error .form__input,
.form__field.has-error .form__textarea {
  border-color: var(--danger-on-bg);
}
.form__field.has-error .form__error { display: block; }

.form__success {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-5);
  text-align: center;
}
.form.is-success .form__success { display: flex; }
.form.is-success .form__field,
.form.is-success .form__submit,
.form.is-success .form__footer { display: none; }
.form__success-icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-pill);
  background: rgba(60, 170, 210, 0.16);
  color: var(--success-on-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: var(--weight-bold);
}

/* ============================================================
 * SITE FOOTER
 * Layout: logo nad rzędem 4 kolumn (MARKA, ROZWIĄZANIA, DLA KOGO,
 * KONTAKT) — wszystkie nagłówki na tej samej wysokości baseline.
 * ============================================================ */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding-block: var(--space-8) var(--space-6);
  font-size: var(--text-sm);
  color: var(--fg-3);
}
.site-footer__brand {
  margin-bottom: var(--space-7);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.site-footer__brand img { height: 28px; width: auto; }

.site-footer__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}
@media (min-width: 768px) { .site-footer__columns { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .site-footer__columns { grid-template-columns: repeat(4, 1fr); } }
.site-footer__heading {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-3) 0;
  /* Wymuszony rytm: nagłówki na tej samej wysokości */
  min-height: 1.4em;
}
.site-footer__list { display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__list li { line-height: var(--leading-normal); color: var(--fg-2); }
.site-footer__list a { color: var(--fg-2); transition: color var(--dur-fast) var(--ease-out); }
.site-footer__list a:hover { color: var(--accent-on-bg); }
.site-footer__phone { font-feature-settings: "tnum"; }

/* R4: kolumna Kontakt (ostatnia) wyrównana do prawej — desktop/tablet only */
@media (min-width: 768px) {
  .site-footer__columns > div:last-child { text-align: right; }
}
.site-footer__linkedin {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.site-footer__linkedin svg { flex-shrink: 0; }

/* R4: Social row — pod kolumnami, nad badgami; pełna szerokość, wyśrodkowany */
.site-footer__social {
  padding-block: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
.site-footer__social-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--fg-2);
  transition: color var(--dur-fast) var(--ease-out);
}
.site-footer__social-link:hover { color: var(--accent-on-bg); }
.site-footer__social-link svg { flex-shrink: 0; }

/* Certs row — 2x większe niż v0 (height: 40 → 80, lg: 56 → 112) */
.site-footer__certs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
  padding-block: var(--space-6);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-5);
}
.site-footer__cert img { height: 80px; width: auto; opacity: 0.95; }
.site-footer__cert--lg img { height: 32px; }   /* Claris Partner -50% (R: 22.05.2026) */
.site-footer__cert--pill img { height: 56px; }
/* R4: Claris Partner do lewej, reszta badge'ów do prawej (flex push) */
.site-footer__cert--lg { margin-inline-end: auto; }

/* Claris Partner badge w en/de/404 — single white SVG (bez pary data-dark/data-light).
   W trybie light invertujemy luminancję, żeby logo było czarne na białym tle.
   :not([data-dark]):not([data-light]) wyklucza parę PL (gdzie data-light wybiera
   już czarne SVG i nie potrzebuje inwersji — bug v11-r4: w light pokazywał biały). */
:root[data-theme="light"] .site-footer__cert--lg img:not([data-dark]):not([data-light]) {
  filter: invert(1);
}

/* Bottom legal row — krótszy niż w v0 (no NIP/REGON, no signature) */
.site-footer__legal {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--fg-muted);
}
@media (min-width: 768px) {
  .site-footer__legal { flex-direction: row; align-items: center; justify-content: space-between; }
}
.site-footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.site-footer__legal-links a { color: var(--fg-3); }
.site-footer__legal-links a:hover { color: var(--accent-on-bg); }

/* ============================================================
 * COOKIE BANNER
 * ============================================================ */
.cookie-banner {
  position: fixed;
  bottom: var(--space-3);
  left: var(--space-3);
  right: var(--space-3);
  z-index: var(--z-toast);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-lg);
  display: none;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 560px;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .cookie-banner {
    bottom: var(--space-5);
    left: auto;
    right: var(--space-5);
  }
}
.cookie-banner.is-visible { display: flex; }
.cookie-banner__title { font-size: var(--text-md); font-weight: var(--weight-semibold); margin: 0; }
.cookie-banner__text { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg-2); margin: 0; }
.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.cookie-banner__settings {
  display: none;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}
.cookie-banner.is-settings .cookie-banner__settings { display: flex; }
.cookie-banner__option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.cookie-banner__option input { margin-top: 4px; min-width: 16px; }
.cookie-banner__option-label { font-weight: var(--weight-semibold); color: var(--fg); }
.cookie-banner__option-help { color: var(--fg-3); font-size: var(--text-xs); display: block; margin-top: 2px; }

/* ============================================================
 * SECTION HEADERS (eyebrow + h2 + lede pattern)
 * ============================================================ */
.section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
  max-width: 760px;
}
.section-header--center { margin-inline: auto; text-align: center; align-items: center; }

/* ============================================================
 * REASONS-TO-BELIEVE CAROUSEL (sekcja 4)
 * Kontener z radial-gradient w tle (jak v3.1 .section--proof).
 * Karuzela pure-JS — slajdy w `.rtb-track`, strzałki + dots,
 * swipe na touchscreen przez touch-events w carousel.js.
 * ============================================================ */
.section--proof {
  background:
    radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 60%),
    var(--bg-subtle);
  border-block: 1px solid var(--border-subtle);
  /* padding domyślny z .section — żeby marginesy zgadzały się z sąsiadami */
}

.rtb {
  position: relative;
  margin-top: var(--space-4);
}
.rtb__viewport {
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.rtb__track {
  display: flex;
  transition: transform var(--dur-slow) var(--ease-out);
  will-change: transform;
}
.rtb__slide {
  flex: 0 0 100%;
  min-width: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
@media (min-width: 768px) { .rtb__slide { padding: var(--space-5) var(--space-6); } }

.rtb__quote {
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 22px);
  line-height: calc(var(--leading-snug) * 1.2); /* +20% interlinia (R: 21.05.2026) */
  color: var(--fg);
  font-weight: var(--weight-medium);
  font-style: italic;
  text-wrap: pretty;
  margin: 0;
}
.rtb__quote::before {
  content: "\201C";
  display: block;
  font-size: 96px; /* 2x większy znak cudzysłowu (R: 21.05.2026) */
  color: var(--accent);
  line-height: 0.7;
  margin-bottom: -28px; /* tekst przylega do znaku cudzysłowu — duży odstęp jest NAD znakiem (R: 22.05.2026) */
  font-style: normal;
}
.rtb__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  order: -1; /* nazwa firmy NAD cytatem (R: 22.05.2026) */
  margin-bottom: var(--space-3); /* nieco więcej odstępu nad znakiem cudzysłowu (R: 22.05.2026) */
}
.rtb__meta-logo { height: 28px; opacity: 0.7; filter: grayscale(1); }
:root[data-theme="light"] .rtb__meta-logo { filter: grayscale(1) brightness(0.4); }
.rtb__meta-text { display: flex; flex-direction: column; gap: 2px; }
.rtb__meta-name { font-weight: var(--weight-semibold); color: var(--accent-on-bg); font-size: calc(var(--text-sm) * 1.5); } /* +50% i pomarańczowa (R: 22.05.2026) */
.rtb__meta-suffix { color: inherit; font-weight: inherit; font-size: inherit; } /* „Sp. z o.o." jak nazwa — pomarańczowa, ta sama wielkość (R: 22.05.2026) */
.rtb__meta-role { color: var(--fg-3); font-size: var(--text-sm); }

/* Nav controls */
.rtb__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.rtb__arrows { display: flex; gap: var(--space-2); }
.rtb__arrow {
  appearance: none;
  width: 40px; height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.rtb__arrow:hover { background: var(--bg-elevated); }
.rtb__arrow:disabled { opacity: 0.4; cursor: not-allowed; }
.rtb__arrow svg { width: 16px; height: 16px; }
.rtb__dots { display: flex; gap: var(--space-2); align-items: center; }
.rtb__dot {
  appearance: none;
  border: 0;
  background: var(--border-strong);
  width: 8px; height: 8px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  padding: 0;
  transition: background var(--dur-fast) var(--ease-out), width var(--dur-med) var(--ease-out);
}
.rtb__dot[aria-current="true"] { background: var(--accent); width: 24px; }
.rtb__counter {
  font-size: var(--text-xs);
  color: var(--fg-muted);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-feature-settings: "tnum";
}

/* ============================================================
 * TESTIMONIALS GRID (sekcja 04b — Co mówią klienci)
 * 4 karty: avatar + autor + cytat. Mobile 1 col, tablet 2, desktop 4.
 * ============================================================ */
.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-5);
}
@media (min-width: 700px)  { .testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .testimonials-grid { grid-template-columns: repeat(4, 1fr); } }

.testimonial-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.testimonial-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.testimonial-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  flex-shrink: 0;
}
.testimonial-card__author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.testimonial-card__name {
  font-weight: var(--weight-semibold);
  color: var(--fg);
  font-size: var(--text-sm);
}
.testimonial-card__role {
  color: var(--fg-3);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}
.testimonial-card__quote {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-2);
  margin: 0;
  flex-grow: 1;
  font-style: italic;
}

/* ============================================================
 * FEATURED CASE (1 case in full row)
 * ============================================================ */
.featured-case {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 1024px) { .featured-case { grid-template-columns: 1fr 1fr; } }
.featured-case__metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-block: var(--space-4);
}
.featured-case__metric-num {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--accent-on-bg);
  font-feature-settings: "tnum";
}
.featured-case__metric-label { font-size: var(--text-sm); color: var(--fg-3); }
.featured-case__shot {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-elevated);
}

/* Wyróżniony cytat w featured-case (P14): +20% font, bold, kontrastowy kolor
   zależnie od motywu (jaśniejszy na dark, ciemniejszy na light), mniejsza interlinia. */
.featured-case blockquote.lede {
  font-size: clamp(22px, 2.4vw, calc(var(--text-lg) * 1.2));
  font-weight: var(--weight-bold);
  line-height: 1.35;
  color: var(--fg-1);
}

/* ============================================================
 * STRONA O MNIE — komponenty specyficzne
 * ============================================================ */

/* Override .lede max-width — pełna szerokość w sekcjach narracyjnych */
.lede--full { max-width: 100%; }

/* Cytat-puenta z akcentem (np. /jak-pracuje/ sekcja 04 „Dokąd dochodzimy").
   Większy font + kolor akcentu przez --accent-on-bg: pomarańcz na dark,
   orange-800 (#8A4F00, AA) na light. Bez białego tekstu na orange. */
.lede--accent-quote {
  font-size: clamp(28px, 3vw, 38px);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  color: var(--accent-on-bg);
  margin-inline: 0;
  max-width: 100%;
}

/* Konkretny dowód — sekcja 02. Karta z accent left + oddech wewnętrzny. */
.proof-block {
  position: relative;
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg);
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .proof-block {
    padding: var(--space-6) var(--space-6) var(--space-6) var(--space-7);
  }
}
.proof-block::before {
  content: "";
  position: absolute;
  top: var(--space-5);
  bottom: var(--space-5);
  left: var(--space-3);
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
}
.proof-block + .proof-block {
  margin-top: var(--space-5);
}
.proof-block > .h3 {
  margin: 0;
}
/* Logotyp firmy w bloku dowodu (o-mnie): wysokość stała, zaokrąglenie.
   Wariant --chip: biała podkładka pod logotypy z ciemnym tekstem
   (czytelne na dark; NIE przekolorowujemy znaków firmowych). */
.proof-block__logo img {
  height: 44px;
  width: auto;
  display: block;
  border-radius: 8px;
}
.proof-block__logo img.logo-chip {
  background: #EEEEEF; /* jasny szary — odcina się od tła na light; stała wartość (czarny napis wymaga jasnej podkładki także na dark) */
  padding: 6px 12px;
  height: 36px;
  box-sizing: content-box;
}
.proof-block p {
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--fg-2);
  margin: 0;
}
.proof-block strong { color: var(--fg-1); }

/* Lista bullet z accent dot — stosowane w proof-block (Ziebart, inLAND) */
.bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-1);
}
/* Zdanie wprowadzające tuż przed listą bulletów ("…może:") — margines NAD nim */
p:has(+ .bullet-list) { margin-top: calc(var(--space-4) * 1.3); }
/* Lista bulletów tuż po akapicie wprowadzającym ("…może:") — przerwa nad listą */
p + .bullet-list { margin-top: calc(var(--space-4) * 0.49); }
/* Bullety tuż po nagłówku akcentowanym (.h3-accent) — odstęp 16px (pierwotny zamysł mt-4); wygrywa z inline .mt-4 (2 klasy > 1) */
.h3-accent + .bullet-list { margin-top: var(--space-4); }
.bullet-list > li {
  position: relative;
  padding-left: 28px;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}
.bullet-list > li::before {
  content: "";
  position: absolute;
  left: 4px;
  /* środek 8px kropki na środku pierwszej linii: połowa line-height (1.55em) minus połowa kropki */
  top: calc(0.775em - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.bullet-list strong { color: var(--fg-1); }

/* Timeline kariery (sekcja 03) — różny od process timeline */
.career-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-4);
}
.career-timeline__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg);
}
@media (min-width: 768px) {
  .career-timeline__item {
    grid-template-columns: 160px 1fr;
    gap: var(--space-5);
    align-items: baseline;
  }
}
.career-timeline__years {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  color: var(--accent-on-bg);
  font-feature-settings: "tnum";
  letter-spacing: 0.02em;
}
.career-timeline__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-2) 0;
  color: var(--fg-1);
}
.career-timeline__body p {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}
.career-timeline__body em { color: var(--fg-3); }
.career-timeline__item--current {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 4%, var(--bg));
}

/* Lista wykształcenia — accent dot zamiast natywnych bulletów */
.credentials {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
}
.credentials > li {
  position: relative;
  padding: var(--space-4) 0 var(--space-4) 32px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--fg-2);
}
.credentials > li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: calc(var(--space-4) + 0.55em);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}
.credentials > li:last-child { border-bottom: 0; }
.credentials strong { color: var(--fg-1); }

/* Pasje — sekcja 06 */
.passion-block + .passion-block {
  padding-top: var(--space-5);
  margin-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
.passion-block .h3 { margin: 0; }
.passion-block p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-2);
  margin: 0;
}

/* Lista kontaktowa — sekcja 07 */
.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
}
.contact-list > li {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
@media (min-width: 640px) {
  .contact-list > li {
    grid-template-columns: 180px 1fr;
    align-items: baseline;
    gap: var(--space-4);
  }
}
.contact-list > li:last-child { border-bottom: 0; }
.contact-list__label {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--fg-2);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.contact-list a {
  font-size: var(--text-base);
  color: var(--accent-on-bg);
  word-break: break-word;
}

/* ============================================================
 * CASE-SPLIT — naprzemienny układ tekst + grafika (case studies)
 * Domyślnie grafika po prawej; --media-left odwraca (grafika z lewej).
 * Mobile: jedna kolumna, tekst nad grafiką (kolejność DOM: body → media).
 * ============================================================ */
.case-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 900px) {
  .case-split { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
  .case-split--media-left .case-split__media { order: -1; }
}
/* Grafiki to wycięte z tła PNG — bez ramki, tła i zaokrągleń (lewitują na sekcji) */
.case-split__media img {
  display: block;
  width: 100%;
  height: auto;
}
.case-split__body > :first-child { margin-top: 0; }

/* Podnagłówek z akcentem — lewy pasek orange (echo proof-block) */
.h3-accent {
  padding-left: var(--space-3);
  border-left: 3px solid var(--accent);
}

/* ============================================================
 * FIGURE PLACEHOLDER — tymczasowy box pod grafikę do wstawienia
 * Używany w case'ach, dopóki Bartek nie dostarczy finalnego PNG.
 * Po podmianie na <img> — usunąć ten blok i klasę z HTML.
 * ============================================================ */
.figure-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
  aspect-ratio: 4 / 3;
  padding: var(--space-6);
  border: 2px dashed var(--border-brand);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.figure-placeholder__tag {
  font-size: var(--text-sm, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-on-bg);
}
.figure-placeholder__desc {
  max-width: 38ch;
  color: var(--fg-3);
  margin: 0;
}

/* ============================================================
   TABELA PORÓWNAWCZA — „pięć dróg do systemu" (.cmp)
   Komponent współdzielony: index.php + wiedza.php (5 kolumn × 8 wierszy).
   Semantyczny <table>; na mobile poziomy scroll + sticky kolumna kryteriów.
   ============================================================ */
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: transparent; }
/* Ramka tabeli zbudowana na komórkach (nie na wrapie), żeby naroż. A1 mógł
   pozostać OTWARTY u góry i z lewej: górę rysują komórki nagłówka (pomijają A1),
   lewą — pierwsza kolumna w tbody (pomija A1). Prawa i dół oprawione w pełni. */
.cmp tr > *:last-child { border-right: 1px solid var(--border); }       /* prawa krawędź */
.cmp tbody .cmp__crit { border-left: 1px solid var(--border); }          /* lewa krawędź (pomija A1) */
.cmp { width: 100%; border-collapse: separate; border-spacing: 0;
  min-width: 820px; font-size: var(--text-sm); }
.cmp th, .cmp td { padding: var(--space-3) var(--space-4);
  text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 1px solid var(--border); } /* dolna krawędź */
.cmp tbody td { background: var(--bg); }   /* ciemne tło komórek treści (przeniesione z .cmp-wrap) */
/* górna krawędź A2 pochodzi z dolnej krawędzi A1 (linia podziału nagłówek/treść),
   dzięki czemu jest na tej samej wysokości co krawędź B2–F2 (też z dołu nagłówka). */
.cmp thead th { font-size: var(--text-base); font-weight: 700; color: var(--fg);
  line-height: 1.2; vertical-align: bottom;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);                       /* górna krawędź (pomija naroż. A1 = td) */
  border-bottom: 2px solid var(--border-strong); }
.cmp__sub { display: block; margin-top: 3px; font-size: var(--text-xs);
  font-weight: 400; letter-spacing: .02em; text-transform: uppercase; color: var(--fg-3); }
.cmp__crit { position: sticky; left: 0; z-index: 2;
  background: var(--bg-subtle); font-weight: 600; color: var(--fg);
  min-width: 184px; width: 184px; }
/* pusta komórka narożna (A1) — bez obramowania i bez tła (przezroczysta) */
/* naroż. A1: przezroczysty, bez górnej i lewej krawędzi; DÓŁ = linia podziału (jak nagłówek),
   żeby krawędź A2 była wyrównana z B2–F2 */
.cmp thead .cmp__crit { z-index: 3; background: transparent;
  border-top: 0; border-left: 0; border-bottom: 2px solid var(--border-strong); }
.cmp__me { background: var(--bg-elevated); color: var(--fg); }
.cmp thead .cmp__me { background: var(--bg-elevated); border-top: 3px solid var(--accent); }
.cmp td.cmp__me { background: var(--bg-elevated); font-weight: 500; }
.cmp__badge { display: inline-block; margin-top: 6px; padding: 2px 8px;
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em;
  color: var(--on-accent); background: var(--accent); border-radius: var(--radius-pill); }
@media (max-width: 640px) { .cmp__crit { min-width: 150px; width: 150px; } }

/* ---- Strony prawne (legal) — współdzielone (PL/DE/EN), wcześniej page-scoped ---- */
.legal-meta{color:var(--fg-muted);}
.legal-body{margin-top:var(--space-8);}
.legal-section{margin-top:var(--space-8);}
.legal-section .h2{padding-top:var(--space-6);border-top:1px solid var(--border-subtle);}
.legal-list{margin:var(--space-3) 0 0;padding-left:1.4em;}
.legal-list li{margin-top:var(--space-2);color:var(--fg);line-height:1.6;}
.legal-list--sub{margin-top:var(--space-2);list-style:disc;}
ol.legal-list{list-style:decimal;}
ul.legal-list{list-style:disc;}
.legal-table-wrap{overflow-x:auto;margin-top:var(--space-4);}
.legal-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);}
.legal-table th,.legal-table td{text-align:left;vertical-align:top;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-subtle);}
.legal-table thead th{background:var(--bg-subtle);border-bottom:1px solid var(--border);font-weight:600;color:var(--fg);}
.legal-table td{color:var(--fg);line-height:1.55;}
.legal-body a{color:var(--accent-on-bg);}


/* ============================================================
   KALKULATOR STRAT — strona o Excelu (z-excela-na-system / von-excel-zum-system)
   Wspoldzielone PL/DE/EN. Przeniesione z page-scoped <style> (v28).
   Hero-grid przypiety do .calc-hero (nie [data-section-id="01-hero"],
   bo ten ID uzywa 8 innych stron).
   ============================================================ */
/* Hero grid — 3 bloki: lewa-góra (intro), prawa (kalkulator span 2 rzędy), lewa-dół (button „Jak to liczę").
   v12-r2: gdy lewa kolumna (intro + button) jest wyższa od intrinsic kalkulatora, grid stretchuje
   hero-right do wysokości lewej, ale .calc wewnątrz hero-right NIE rośnie sam — siedzi na górze
   ze swoim intrinsic height, pod nim pusta przestrzeń. Stąd na screen v11 button siedział sporo
   niżej niż dolna krawędź .calc, mimo że button.bottom = grid.bottom.
   Fix: hero-right jako flex column → .calc { flex: 1 } rozciąga się do hero-right.height.
   Wewnątrz .calc: outputs przyklejone do dołu (margin-top:auto), gdy intro > calc pojawi się
   przerwa między inputs a outputs — akceptowalne, outputs jako climax. */
.calc-hero .grid { align-items: start; row-gap: var(--space-6); }
@media (min-width: 768px) {
  .calc-hero .grid {
    align-items: stretch;
    grid-template-rows: min-content 1fr;
  }
  .calc-hero .hero-left-top    { grid-column: 1 / span 6; grid-row: 1; align-self: start; }
  .calc-hero .hero-right       {
    grid-column: 7 / span 6; grid-row: 1 / span 2;
    display: flex; flex-direction: column;
  }
  .calc-hero .hero-right > .calc {
    flex: 1 1 auto;
    display: flex; flex-direction: column;
  }
  .calc-hero .hero-right > .calc > .calc__outputs {
    margin-top: auto;
  }
  .calc-hero .hero-left-bottom {
    grid-column: 1 / span 6; grid-row: 2;
    align-self: end;
  }
}

/* Strong w labelach inputów — biały (--fg), żeby kontrast słowa „dziennie" rzucał się
   w oczy na tle muted-grey labelu (--fg-3). Bartek: „na biało żeby wyraźnie odróżniało". */
.calc__inputs .form__label strong {
  color: var(--fg);
  font-weight: var(--weight-bold);
}

.calc {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
@media (min-width: 768px) { .calc { padding: var(--space-6); } }

.calc__inputs { display: grid; gap: var(--space-4); }
@media (min-width: 560px) { .calc__inputs { grid-template-columns: 1fr 1fr; } }
/* Wyrównanie: niezależnie od długości etykiety, input siedzi przy dolnej krawędzi celi —
   sąsiadujące pola w tym samym wierszu mają input na tej samej wysokości. */
.calc__inputs .form__field { margin: 0; justify-content: flex-end; }

/* Label z help-iconką: tekst po lewej, ? po prawej — ikonka NIE „przeskakuje" do
   nowej linii przy długich labelach (flex space-between zamiast inline-block). */
.calc__inputs .form__label {
  line-height: 1.35;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.calc__inputs .form__label__text { flex: 1 1 auto; }

/* Outputy — 2 kolumny side-by-side (v11-r4). „Łączna strata rocznie" musi mieścić
   do 20 000 000 PLN (12 znaków) — dlatego clamp na danger jest mocno zawężony. */
.calc__outputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  align-items: end;
}
.calc__out { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.calc__out--total { /* na desktop OBOK, nie pod — usuń dashed border-top */ }
/* Na mobile (poniżej 560px — pole inputs też stackuje) outputy w jednej kolumnie,
   z kropkowaną przerwą między „czasem" a „roczną stratą". */
@media (max-width: 559px) {
  .calc__outputs { grid-template-columns: 1fr; }
  .calc__out--total { padding-top: var(--space-4); border-top: 1px dashed var(--border); }
}
.calc__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.calc__num {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2rem);
  line-height: var(--leading-tight);
  word-break: break-word;
}
.calc__num--danger {
  color: var(--danger-on-bg);
  font-size: clamp(1.625rem, 2.8vw + 0.55rem, 2.25rem);
}

/* Lista źródeł — bullety: link wytłuszczony, opis na nowej linii regularnie */
.calc-source-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.calc-source-list li + li { margin-top: var(--space-4); }
.calc-source-list a {
  color: var(--accent-on-bg);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  font-size: var(--text-sm);
}
.calc-source-desc {
  display: block;
  margin-top: 4px;
  font-weight: var(--weight-regular);
  color: var(--fg-2);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
/* Tytuł frazy przed dwukropkiem w opisie źródła — biały, bold (v11-r3). */
.calc-source-title {
  color: var(--fg);
  font-weight: var(--weight-bold);
}

/* Sublist „jak 0.40 się składa" — pomarańczowe kropki zamiast disc (v11-r5: wyniesione
   z `.calc-explain__body`, działa też wewnątrz modal `.calc-modal__inner`). */
ul.calc-source-sublist {
  list-style: none;
  margin: var(--space-3) 0 0 0;
  padding: 0;
}
ul.calc-source-sublist li {
  position: relative;
  padding-left: var(--space-5);
  margin: 0 0 var(--space-2) 0;
  color: var(--fg-2);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
ul.calc-source-sublist li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.55em;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
}

.calc-formula {
  background: var(--bg-subtle);
  border-left: 3px solid var(--accent);
  padding: var(--space-3) var(--space-4);
  font-weight: var(--weight-semibold);
  color: var(--fg);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* „Jak to liczę" — sam przycisk (v11-r4); treść w modal `<dialog>` niżej. */
.calc-explain__btn {
  appearance: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-5) var(--space-5);
  background: var(--accent);
  color: var(--on-accent);
  font-family: inherit;
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  line-height: 1.3;
  border-radius: var(--radius-lg);
  transition: filter var(--dur-fast) var(--ease-out);
}
.calc-explain__btn:hover { filter: brightness(1.05); }
.calc-explain__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.calc-explain__btn-arrow {
  display: inline-flex;
  width: 28px; height: 28px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.15);
  font-size: 16px;
}

/* Modal dialog — natywny <dialog> + showModal(). */
.calc-modal {
  width: min(720px, 92vw);
  max-height: 86vh;
  margin: auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  color: var(--fg);
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  overflow: visible;
}
.calc-modal::backdrop {
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
}
.calc-modal__inner {
  padding: var(--space-7) var(--space-6) var(--space-6);
  max-height: 86vh;
  overflow-y: auto;
  color: var(--fg-2);
  line-height: var(--leading-normal);
}
.calc-modal__inner > * + * { margin-top: var(--space-5); }
.calc-modal__inner strong { color: var(--fg); }
.calc-modal__inner h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--fg);
  margin: 0;
}
.calc-modal__inner h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg);
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  margin-top: var(--space-6) !important;
}
.calc-modal__inner h3:first-of-type { border-top: none; padding-top: 0; }
.calc-modal__inner > p.lede { margin-top: var(--space-3); }
.calc-modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 40px; height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--fg);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.calc-modal__close:hover { background: var(--bg-elevated-2); }
.calc-modal__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Ikony pomocy "?" przy labelach inputów + popover */
.calc__help {
  display: inline-block;
  position: relative;
  flex-shrink: 0;
}
.calc__help summary {
  list-style: none;
  cursor: pointer;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--fg-2);
  font-size: 12px;
  font-weight: var(--weight-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
}
.calc__help summary::-webkit-details-marker { display: none; }
.calc__help[open] summary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.calc__help-body {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  width: min(280px, 80vw);
  background: var(--bg-elevated-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--fg);
  text-transform: none;
  letter-spacing: normal;
  line-height: var(--leading-normal);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

/* PDF row — bez border-top (Bartek: „usuwamy górną linię") */
.calc__pdf { margin-top: var(--space-6); }
.calc__pdf-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.calc__pdf-row .form__field { margin: 0; flex: 1 1 240px; }
.calc__status { font-size: var(--text-sm); color: var(--fg-2); margin-top: var(--space-3); min-height: 1.2em; }
.calc__status--ok { color: var(--success-on-bg); }
.calc__status--err { color: var(--danger-on-bg); }

/* Value stack — 4 karty oferty */
.value-stack { display: grid; gap: var(--space-4); }
@media (min-width: 600px) { .value-stack { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .value-stack { grid-template-columns: repeat(4, 1fr); } }
.value-card__kicker {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.value-card__big { font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--text-3xl); line-height: var(--leading-tight); color: var(--accent-on-bg); }

/* Scarcity — .lede ma max-width:60ch, bez margin-inline:auto nie centruje się; tu nadpisujemy. */
[data-section-id="04-scarcity"] .lede { margin-inline: auto; }

/* ============================================================
 * LINKI W PROZIE (v33) — bez klasy, w treści: akcent + bold,
 * żeby były widoczne w akapitach. --accent-on-bg = orange-500
 * na dark / orange-800 na light (pary kontrastu z DS).
 * ============================================================ */
main p a:not([class]),
main li a:not([class]),
main td a:not([class]) {
  color: var(--accent-on-bg);
  font-weight: var(--weight-bold);
}
main p a:not([class]):hover,
main li a:not([class]):hover,
main td a:not([class]):hover {
  text-decoration: underline;
}

/* ============================================================
 * FILEMAKER — sekcje strony /filemaker.php (PL/DE/EN)
 * Przeniesione z page-scoped <style> (v33; reguła: style
 * współdzielone między językami żyją w components.css).
 * ============================================================ */
  /* FileMaker — sekcje page-scoped (badge Claris + siatka filmów) */
  .fm-partner { text-align: center; }
  .fm-partner__badge { display: inline-flex; align-items: center; justify-content: center; margin: 0 auto var(--space-5, 1.5rem); }
  .fm-partner__badge img { height: 120px; width: auto; max-width: 100%; }
  .fm-partner__lede { max-width: 60ch; margin-left: auto; margin-right: auto; }
  .fm-partner__title { white-space: nowrap; font-size: clamp(1.05rem, 2.7vw, 2rem); }
  @media (max-width: 600px) { .fm-partner__title { white-space: normal; } }
  .video-grid { display: grid; gap: var(--space-5, 1.5rem); grid-template-columns: 1fr; }
  @media (min-width: 700px)  { .video-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .video-grid { grid-template-columns: repeat(3, 1fr); } }
  .video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg, 14px); overflow: hidden; background: var(--bg-elev, #16161a); }
  .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  /* Fasada YouTube — miniatura + ▶, prawdziwy iframe ładuje się dopiero po kliknięciu */
  .video-facade__btn { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; display: block; }
  .video-facade__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
  .video-facade__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(0,0,0,0.62); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; padding-left: 4px; transition: background .15s, transform .15s; }
  .video-facade__btn:hover .video-facade__play, .video-facade__btn:focus-visible .video-facade__play { background: var(--accent); color: var(--on-accent, #1A1000); transform: translate(-50%, -50%) scale(1.06); }

  /* WYRÓŻNIENIA GRAFICZNE — „Tempo i koszt" oraz „FileMaker się opłaca" */
  .fm-highlight { position: relative; overflow: hidden; isolation: isolate;
    background: var(--bg-elev, #16161a);
    border-block: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); }
  .fm-highlight__inner { position: relative; z-index: 2; text-align: center; }
  .fm-highlight__glow { position: absolute; inset: -30%; z-index: 0; pointer-events: none; filter: blur(36px); }
  .fm-highlight--tempo .fm-highlight__glow {
    background:
      radial-gradient(ellipse 58% 68% at 24% 30%, rgba(255,153,0,0.40), transparent 62%),
      radial-gradient(ellipse 50% 60% at 82% 76%, rgba(60,170,210,0.20), transparent 62%); }
  .fm-highlight--oplaca .fm-highlight__glow {
    background:
      radial-gradient(ellipse 58% 68% at 78% 28%, rgba(60,170,210,0.34), transparent 62%),
      radial-gradient(ellipse 52% 62% at 18% 80%, rgba(255,153,0,0.26), transparent 62%); }
  .fm-highlight__title { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; }
  .fm-highlight__lead { font-size: clamp(1.15rem, 2.2vw, 1.55rem); line-height: 1.45; font-weight: 600; margin-top: var(--space-3, 0.75rem); }

  /* INSPIRACJE — siatka 12 zastosowań (grafiki dostarcza Bartek) */
  .fm-inspo { display: grid; gap: var(--space-4, 1rem); grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 700px)  { .fm-inspo { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 1024px) { .fm-inspo { grid-template-columns: repeat(4, 1fr); } }
  .fm-inspo__item { margin: 0; }
  .fm-inspo__img { aspect-ratio: 4 / 3; border-radius: var(--radius-lg, 14px); overflow: hidden; background: var(--bg-elev, #16161a); display: flex; align-items: center; justify-content: center; }
  .fm-inspo__img img { width: 100%; height: 100%; object-fit: cover; }
  .fm-inspo__cap { margin-top: var(--space-2, 0.5rem); text-align: center; font-weight: 600; }

  /* ARCHITEKTURA — trzy warstwy (dane on-prem → integracje/AI → interfejs) */
  .fm-arch { display: flex; flex-direction: column; gap: var(--space-3, 0.75rem); max-width: 880px; margin-inline: auto; }
  .fm-arch__layer { display: flex; align-items: flex-start; gap: var(--space-4, 1rem);
    background: var(--bg-elevated, #16161a); border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: var(--radius-lg, 16px); padding: var(--space-5, 1.5rem); }
  .fm-arch__layer--base { border-color: var(--accent); }
  .fm-arch__num { flex: 0 0 auto; min-width: 2.4ch; line-height: 1;
    font-size: clamp(1.5rem, 3vw, 2.125rem); font-weight: 800;
    color: var(--accent-on-bg); font-variant-numeric: tabular-nums; }
  .fm-arch__title { font-size: var(--text-lg, 1.25rem); margin: 0; }
  .fm-arch__desc { margin-top: var(--space-2, 0.5rem); color: var(--fg-2); }
  .fm-arch__note { max-width: 70ch; margin-inline: auto; text-align: center; color: var(--fg-2); }
  @media (max-width: 520px) { .fm-arch__layer { flex-direction: column; gap: var(--space-2, 0.5rem); } }