/* ============================================================
   /wdrozenia — style page-specific (poza wspólnym css/styles.css)
   Linkowany TYLKO przez wdrozenia.html: <link href="/css/wdrozenia.css?v=N">
   Buduje na tokenach z styles.css. Mobile-first. Bez JS strona czytelna.
   ============================================================ */

/* ---------- REVEAL ON SCROLL ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Helpery ---------- */
.wdr-measure { max-width: 760px; }
.wdr-center { margin-left: auto; margin-right: auto; text-align: center; }

/* ------------------------------------------------------------
   SEKCJA 1 — HERO
   ------------------------------------------------------------ */
.wdr-hero { text-align: center; padding: 56px 0 44px; }
@media (min-width: 900px) { .wdr-hero { padding: 88px 0 64px; } }
.wdr-hero .eyebrow { color: var(--color-brass); }
.wdr-hero__title { max-width: 820px; margin: 0 auto var(--space-4); }
.wdr-hero__title span { display: block; }
.wdr-hero .lede { max-width: 640px; margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------
   SEKCJA 2 — CZTERY KATEGORIE WARTOŚCI (2×2)
   ------------------------------------------------------------ */
.wdr-values { display: grid; gap: 18px; margin-top: 8px; }
@media (min-width: 760px) { .wdr-values { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
.wdr-value {
  background: #fff;
  border: 1px solid rgba(26, 41, 66, 0.12);
  border-top: 3px solid var(--color-brass);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.wdr-value:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -24px rgba(26, 41, 66, 0.45); }
.wdr-value__icon { font-size: 30px; line-height: 1; margin-bottom: 12px; }
.wdr-value__title { font-size: clamp(20px, 2.6vw, 24px); color: var(--color-navy); margin: 0 0 4px; }
.wdr-value__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-brass);
  font-size: 16px;
  margin: 0 0 14px;
}
.wdr-value__body { font-size: 14.5px; line-height: 1.6; margin: 0 0 18px; }
.wdr-value__metrics {
  margin-top: auto;
  border-top: 1px solid rgba(26, 41, 66, 0.1);
  padding-top: 16px;
}
.wdr-value__metrics-label {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: 12px;
}

/* Listy z markerem → (współdzielone) */
.wdr-bullets, .wdr-roi__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wdr-bullets li, .wdr-roi__list li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
}
.wdr-bullets li::before, .wdr-roi__list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-brass);
  font-weight: 600;
}

/* ------------------------------------------------------------
   SEKCJA 3 — HIERARCHIA (schody, na ciemnym)
   ------------------------------------------------------------ */
.wdr-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wdr-steps__item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: rgba(245, 239, 228, 0.04);
  border: 1px solid rgba(245, 239, 228, 0.12);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
}
@media (min-width: 768px) {
  .wdr-steps__item:nth-child(2) { margin-left: 5%; }
  .wdr-steps__item:nth-child(3) { margin-left: 10%; }
  .wdr-steps__item:nth-child(4) { margin-left: 15%; }
}
.wdr-steps__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 32px;
  line-height: 1;
  color: var(--color-brass-light);
  flex-shrink: 0;
}
.wdr-steps__title { color: var(--color-cream); font-size: 19px; margin: 2px 0 6px; }
.wdr-steps__body p { color: rgba(245, 239, 228, 0.72); font-size: 14.5px; margin: 0; }

/* ------------------------------------------------------------
   SEKCJA 4 — OD MAPY DO SYSTEMU (3 numerowane kroki)
   ------------------------------------------------------------ */
.wdr-flow {
  list-style: none;
  padding: 0;
  margin: 48px 0 0;
  display: grid;
  gap: 18px;
}
@media (min-width: 860px) { .wdr-flow { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.wdr-flow__item {
  background: #fff;
  border: 1px solid rgba(26, 41, 66, 0.12);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  transition: transform 180ms ease, border-color 180ms ease;
}
.wdr-flow__item:hover { transform: translateY(-3px); border-color: rgba(164, 124, 58, 0.45); }
.wdr-flow__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 32px;
  line-height: 1;
  color: var(--color-brass-light);
  margin-bottom: 12px;
}
.wdr-flow__title { font-size: 19px; color: var(--color-navy); margin-bottom: 10px; }
.wdr-flow__item p { font-size: 14.5px; line-height: 1.6; margin: 0; }

/* ------------------------------------------------------------
   SEKCJA 5 — CZTERY RZECZY (2×2)
   ------------------------------------------------------------ */
.wdr-guard { display: grid; gap: 18px; }
@media (min-width: 760px) { .wdr-guard { grid-template-columns: 1fr 1fr; gap: 22px; } }
.wdr-guard__item {
  background: #fff;
  border: 1px solid rgba(26, 41, 66, 0.12);
  border-left: 3px solid rgba(164, 124, 58, 0.5);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  transition: transform 180ms ease, border-color 180ms ease;
}
.wdr-guard__item:hover { transform: translateY(-3px); border-left-color: var(--color-brass); }
.wdr-guard__title { font-size: 18px; color: var(--color-navy); margin-bottom: 10px; }
.wdr-guard__item p { font-size: 14.5px; line-height: 1.6; margin: 0; }

/* ------------------------------------------------------------
   SEKCJA 6 — MIERZALNOŚĆ + ROI
   ------------------------------------------------------------ */
.wdr-prose { margin: 0; }
.wdr-prose p { font-size: 16px; line-height: 1.65; }
.wdr-prose--dark p { color: rgba(245, 239, 228, 0.8); }
.wdr-roi {
  margin: 36px auto 0;
  background: rgba(164, 124, 58, 0.08);
  border: 1px solid rgba(164, 124, 58, 0.28);
  border-radius: var(--radius-lg);
  padding: 28px 28px 26px;
}
.wdr-roi__label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brass);
  font-weight: 500;
  margin-bottom: 12px;
}
.wdr-roi__intro { font-size: 15px; color: var(--color-text); margin: 0 0 16px; }
.wdr-roi__list li { font-size: 15px; }
.wdr-roi__note { margin: 18px 0 0; font-size: 14px; line-height: 1.55; font-style: italic; color: var(--color-text-muted); }

/* ------------------------------------------------------------
   SEKCJA 7 — RODOWÓD (logotypy/chipy na ciemnym)
   ------------------------------------------------------------ */
.wdr-logos {
  list-style: none;
  padding: 0;
  margin: 8px 0 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.wdr-logos li {
  font-size: 14px;
  letter-spacing: 0.02em;
  color: rgba(245, 239, 228, 0.9);
  background: rgba(245, 239, 228, 0.06);
  border: 1px solid rgba(245, 239, 228, 0.16);
  border-radius: 999px;
  padding: 8px 16px;
}

/* ------------------------------------------------------------
   SEKCJA 8 — JAK ZACZYNAMY (poziomy)
   ------------------------------------------------------------ */
.wdr-levels {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}
.wdr-levels::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: rgba(164, 124, 58, 0.22);
}
.wdr-level {
  position: relative;
  background: #fff;
  border: 1px solid rgba(26, 41, 66, 0.12);
  border-left: 3px solid rgba(164, 124, 58, 0.5);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.wdr-level:hover {
  transform: translateY(-2px);
  border-left-color: var(--color-brass);
  box-shadow: 0 16px 30px -22px rgba(26, 41, 66, 0.45);
}
.wdr-level--current { border-left-color: var(--color-brass); background: rgba(164, 124, 58, 0.06); }
/* Most „bezpłatna Rozmowa" — łącznik między Radarem a Mapą (nie numerowany krok) */
.wdr-bridge {
  position: relative;
  margin: -4px 0 -4px 22px;
  padding: 14px 20px;
  border-left: 2px dashed rgba(164, 124, 58, 0.5);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
}
.wdr-bridge__text {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
  flex: 1 1 320px;
}
.wdr-bridge__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy);
  border-bottom: 1px solid rgba(164, 124, 58, 0.5);
  padding-bottom: 1px;
  white-space: nowrap;
  transition: color 150ms ease, border-color 150ms ease;
}
.wdr-bridge__link:hover { color: var(--color-brass); border-color: var(--color-brass); }
.wdr-level__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.wdr-level__tag { font-family: var(--font-serif); font-size: clamp(19px, 2.4vw, 24px); color: var(--color-navy); }
.wdr-level__meta {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brass);
}
.wdr-level__desc { font-size: 15px; color: var(--color-text-muted); margin: 0 0 12px; }
.wdr-level--current .wdr-level__desc { margin-bottom: 0; }
.wdr-level__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy);
  border-bottom: 1px solid rgba(164, 124, 58, 0.5);
  padding-bottom: 1px;
  transition: color 150ms ease, border-color 150ms ease;
}
.wdr-level__link:hover { color: var(--color-brass); border-color: var(--color-brass); }

/* ------------------------------------------------------------
   SEKCJA 9 — CTA + STOPKA NARRACYJNA
   ------------------------------------------------------------ */
.cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}
/* Stopka narracyjna (coda) → wspólny styl .site-coda w css/styles.css */