/* Hallmark · pre-emit critique: P5 H5 E5 S4 R5 V4
 * typ strony: branżowy landing (narzędzie sprzedażowe pod SEO) · system-managed (Workbench)
 * anchor: signal #0076c0 · WSPÓLNY arkusz dla wszystkich landingów (/automatyzacja-leadow, /integracja-crm, /automatyzacja-ecommerce)
 * Reużywa style.css (.panel, .pipeline/.step, .cta, .btn, .eyebrow, .proces__offer). Tu tylko specyfika landingów.
 * Jasno (jedyna ciemna scena = hero strony głównej). Bez fabrykowanych liczb - dane z realnych case studies.
 */

/* Kotwice pod stałym navem */
[id] { scroll-margin-top: 96px; }

/* =====================================================================
   HERO landingu - jasny, mocna typografia + dowód społeczny (realne liczby)
   ===================================================================== */
.lp-hero {
  position: relative;
  padding-block: clamp(120px, 17vh, 188px) var(--section-y);
  overflow: clip;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--paper-grid) var(--rule-hair), transparent var(--rule-hair)),
    linear-gradient(90deg, var(--paper-grid) var(--rule-hair), transparent var(--rule-hair));
  background-size: 48px 48px;
}
.lp-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 82% 0%, var(--signal-wash) 0%, transparent 64%);
}
.lp-hero__inner { position: relative; z-index: 1; max-width: 56ch; }
.lp-hero h1 {
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-block: var(--space-md) var(--space-md);
  max-width: 18ch;
}
.lp-hero h1 b { color: var(--signal-deep); font-weight: 600; }
.lp-hero__lead { font-size: var(--text-xl); color: var(--ink-soft); max-width: var(--measure); line-height: 1.5; }
.lp-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }

/* Pasek dowodu w hero (realne liczby z case study) */
.lp-hero__proof {
  display: flex; flex-wrap: wrap; gap: var(--space-lg) var(--space-2xl);
  margin-top: var(--space-2xl); padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--hairline);
}

/* =====================================================================
   Statystyki (hero + sekcja dowodu)
   ===================================================================== */
.lp-stat { display: grid; gap: 2px; }
.lp-stat__num {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-2xl); line-height: 1.04; letter-spacing: var(--tracking-snug);
  color: var(--signal-deep); font-variant-numeric: tabular-nums;
}
.lp-stat__label { font-size: var(--text-sm); color: var(--ink-soft); max-width: 26ch; }

/* =====================================================================
   PROBLEM - "brzmi znajomo?" (karty bólu, neutralne)
   ===================================================================== */
.lp-problems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.lp-problem {
  display: flex; gap: var(--space-md); align-items: flex-start;
  padding: clamp(20px, 2.2vw, 32px);
  background: var(--paper-raised);
  border: var(--rule-hair) solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.lp-problem__mark {
  flex: none; width: 34px; height: 34px; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--slate); background: var(--paper-sunken);
}
.lp-problem__mark svg { width: 16px; height: 16px; }
.lp-problem p { color: var(--ink-soft); }
.lp-problem b { color: var(--ink-2); font-weight: 600; }
@media (max-width: 640px) { .lp-problems { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   DOWÓD - realny wynik (karta na signal-wash, liczby tylko prawdziwe)
   ===================================================================== */
.lp-proof__card {
  background: var(--paper-raised);
  border: var(--rule-hair) solid var(--signal-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2);
  padding: clamp(28px, 3.4vw, 56px);
  display: grid; gap: var(--space-xl);
  position: relative; isolation: isolate; overflow: clip;
}
.lp-proof__card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 120% at 100% 0%, var(--signal-wash), transparent 60%);
}
.lp-proof__lead { font-size: var(--text-lg); color: var(--ink); max-width: 60ch; }
.lp-proof__lead b { color: var(--signal-deep); font-weight: 600; }
.lp-proof__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.lp-proof__stats .lp-stat__num { font-size: var(--text-3xl); }
.lp-proof__src { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--slate); }
@media (max-width: 640px) { .lp-proof__stats { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); } }

/* =====================================================================
   FAQ landingu - akordeon (natywny <details>, jak /faq)
   ===================================================================== */
.lp-faq { display: grid; gap: var(--space-sm); max-width: 820px; }
.lp-faq__item {
  background: var(--paper-raised);
  border: var(--rule-hair) solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.lp-faq__item:hover { border-color: var(--signal-line); }
.lp-faq__item[open] { border-color: var(--signal-line); box-shadow: var(--shadow-2); }
.lp-faq__q {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: clamp(var(--space-md), 2vw, var(--space-lg));
  cursor: pointer;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-lg); color: var(--ink);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-snug);
}
.lp-faq__q::-webkit-details-marker { display: none; }
.lp-faq__q:focus-visible { outline: var(--rule-bold) solid var(--signal); outline-offset: -3px; border-radius: var(--radius-md); }
.lp-faq__icon {
  flex: none; width: 28px; height: 28px; border-radius: var(--radius-pill);
  border: var(--rule-hair) solid var(--hairline-strong);
  display: inline-flex; align-items: center; justify-content: center; color: var(--slate);
  transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.lp-faq__icon svg { width: 12px; height: 12px; }
.lp-faq__item:hover .lp-faq__icon { color: var(--signal-deep); border-color: var(--signal-line); }
.lp-faq__item[open] .lp-faq__icon { transform: rotate(45deg); color: var(--signal); border-color: var(--signal); }
.lp-faq__a { padding: 0 clamp(var(--space-md), 2vw, var(--space-lg)) clamp(var(--space-md), 2vw, var(--space-lg)); }
.lp-faq__a p { color: var(--ink-soft); line-height: var(--leading-body); max-width: 66ch; }
.lp-faq__a a { color: var(--signal-deep); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; transition: color var(--dur-2) var(--ease-out); }
.lp-faq__a a:hover { color: var(--signal); }

/* =====================================================================
   POWIĄZANE USŁUGI - wewnętrzne linkowanie (SEO + nawigacja)
   ===================================================================== */
.lp-related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.lp-related__card {
  display: flex; flex-direction: column; gap: var(--space-sm);
  padding: clamp(20px, 2.2vw, 32px);
  background: var(--paper-raised);
  border: var(--rule-hair) solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out);
}
.lp-related__card:hover { transform: translateY(-4px); border-color: var(--signal-line); }
.lp-related__tag { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--signal-deep); }
.lp-related__title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); color: var(--ink); line-height: var(--leading-tight); letter-spacing: var(--tracking-snug); }
.lp-related__card p { color: var(--ink-soft); font-size: var(--text-sm); }
.lp-related__card .link-arrow { margin-top: auto; }
@media (max-width: 640px) { .lp-related { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   Treść ZAWSZE widoczna - landing to narzędzie sprzedażowe/SEO, więc nie
   chowamy sekcji za reveal-on-scroll. Pewność dla użytkownika i crawlerów,
   brak zależności od JS/IntersectionObserver. (Homepage zachowuje reveal.)
   ===================================================================== */
.reveal { opacity: 1 !important; transform: none !important; }

/* =====================================================================
   Drobne korekty łamania wierszy + szersza kolumna CTA na landingu
   (krótka, narzucona kolumna CTA z homepage łamała długie słowa typu
   "obsługujecie"; tu dajemy jej więcej oddechu). Słowa złożone (e-commerce)
   trzymamy w całości przez .nowrap.
   ===================================================================== */
.nowrap { white-space: nowrap; }
.cta .cta__inner { max-width: 30rem; }