/* Strona główna produktu — projekt „Revcounter Landing" (ciemny, czerwony akcent).
   Kolorów diagnoz używamy tylko tam, gdzie mowa o diagnozach. Bez skryptu strona
   wygląda tak samo, tylko bez animacji (landing.js). */

.landing {
  --bg: #0b0708;
  --surface: #130c0e;
  --line: #2a1b1f;
  --line-strong: #3d2830;
  --text: #f7f1f0;
  --muted: #a99a9d;
  --faint: #77686c;
  --red: #d4202f;
  --red-soft: #ef3d4b;
  --red-ink: #ffffff;
  --stripe: #1b1113;
  --shadow: rgba(0, 0, 0, 0.6);
  --d-template: #3fbf8f;
  --d-hidden_gem: #e0a93b;
  --d-weak_cta: #8b97fa;
  --d-promise_gap: #f0755c;
  --d-reach_only: #7fa3c3;
  --d-drop: #8b93a1;
  --lp-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lp-mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--bg);
  color: var(--text);
  font-family: var(--lp-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  text-wrap: pretty;
}

:root[data-theme="light"] .landing {
  --bg: #faf6f5;
  --surface: #ffffff;
  --line: #ebdfe0;
  --line-strong: #d9c8ca;
  --text: #170c0e;
  --muted: #675a5d;
  --faint: #8f8386;
  --red: #a80f1f;
  --red-soft: #c8202f;
  --stripe: #f1e9e9;
  --shadow: rgba(60, 20, 25, 0.18);
  --d-template: #0e7a55;
  --d-hidden_gem: #96650f;
  --d-weak_cta: #4750c4;
  --d-promise_gap: #bf4430;
  --d-reach_only: #3e6c92;
  --d-drop: #616b7a;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .landing {
    --bg: #faf6f5;
    --surface: #ffffff;
    --line: #ebdfe0;
    --line-strong: #d9c8ca;
    --text: #170c0e;
    --muted: #675a5d;
    --faint: #8f8386;
    --red: #a80f1f;
    --red-soft: #c8202f;
    --stripe: #f1e9e9;
    --shadow: rgba(60, 20, 25, 0.18);
    --d-template: #0e7a55;
    --d-hidden_gem: #96650f;
    --d-weak_cta: #4750c4;
    --d-promise_gap: #bf4430;
    --d-reach_only: #3e6c92;
    --d-drop: #616b7a;
  }
}

html { scroll-behavior: smooth; }
.landing a { color: var(--text); }
.landing a:hover { color: var(--red-soft); }
.landing em { font-style: normal; color: var(--red); }
.landing h1, .landing h2, .landing h3, .landing h4, .landing p, .landing ol, .landing ul, .landing dl { margin: 0; }
.landing ol, .landing ul { list-style: none; padding: 0; }

[data-diagnosis="template"] { --c: var(--d-template); }
[data-diagnosis="hidden_gem"] { --c: var(--d-hidden_gem); }
[data-diagnosis="weak_cta"] { --c: var(--d-weak_cta); }
[data-diagnosis="promise_gap"] { --c: var(--d-promise_gap); }
[data-diagnosis="reach_only"] { --c: var(--d-reach_only); }
[data-diagnosis="drop"] { --c: var(--d-drop); }

/* Układ */
.lp-wrap, .lp-top, .lp-foot {
  max-width: 1160px;
  margin: 0 auto;
  padding-left: clamp(16px, 6vw, 64px);
  padding-right: clamp(16px, 6vw, 64px);
}
.lp-sec { padding-top: clamp(88px, 13vw, 170px); }
.lp-sec--wide { padding-top: clamp(100px, 15vw, 200px); }
.lp-sec--near { padding-top: clamp(72px, 11vw, 150px); }

.lp-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.lp-split--gap { margin-top: 48px; }
.lp-split--center { align-items: center; }
.lp-split--end { align-items: end; }

/* Pasek górny */
.lp-top {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding-top: 20px;
  padding-bottom: 20px;
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.landing .lp-logo, .landing .lp-logo:hover { font-size: 26px; color: var(--text); }
.landing .lp-logo-small, .landing .lp-logo-small:hover { font-size: 20px; color: var(--text); opacity: 0.85; }
.lp-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; font-size: 14px; }
.lp-nav a { color: var(--muted); text-decoration: none; }
.lp-theme {
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: transparent;
  color: var(--text);
  font: 600 11px var(--lp-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 12px;
  cursor: pointer;
}
@media (max-width: 720px) {
  .lp-nav a[href^="#"] { display: none; }
}

/* Drobne elementy wspólne */
.lp-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px !important;
  font: 600 11px var(--lp-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
}
.lp-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--red); }
.lp-label {
  display: block;
  font: 600 10px var(--lp-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.lp-step { font: 600 11px var(--lp-mono); letter-spacing: 0.12em; color: var(--faint); }
.lp-dim { color: var(--muted); }
.lp-red { color: var(--red); }
.lp-small { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
.lp-redact {
  display: inline-block;
  width: 2.1em;
  height: 0.58em;
  margin-right: 0.18em;
  background: currentColor;
  border-radius: 1px;
}
.lp-stripes {
  background: repeating-linear-gradient(135deg, var(--stripe) 0 8px, var(--surface) 8px 16px);
}

.lp-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 28px;
  border: 0;
  border-radius: 3px;
  background: var(--red);
  color: var(--red-ink) !important;
  font: 700 16px var(--lp-sans);
  text-decoration: none;
  cursor: pointer;
}
.lp-cta:hover { background: var(--red-soft); }
.lp-arrow { display: inline-block; animation: lp-drift 1.2s ease-in-out infinite alternate; }

/* Nagłówki i akapity */
.lp-h2 {
  max-width: 20ch;
  margin-bottom: 40px !important;
  font-size: clamp(32px, 1rem + 3.2vw, 62px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}
#jak .lp-h2 { max-width: 18ch; margin-bottom: 48px !important; }
.lp-h2--mid { font-size: clamp(30px, 1rem + 2.8vw, 56px); line-height: 1.02; }
.lp-h3 {
  max-width: 20ch;
  margin-bottom: 20px !important;
  font-size: clamp(28px, 1rem + 2.6vw, 52px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.lp-h3--short { max-width: 16ch; margin-bottom: 24px !important; }
.lp-intro { margin-bottom: 40px !important; font-size: clamp(17px, 1rem + 0.5vw, 21px); line-height: 1.5; color: var(--muted); }
.lp-intro--narrow { max-width: 52ch; }
.lp-lead { max-width: 52ch; font-size: clamp(17px, 1rem + 0.6vw, 23px); line-height: 1.45; color: var(--muted); }
.lp-big { margin-bottom: 20px !important; font-size: clamp(18px, 1rem + 0.8vw, 25px); line-height: 1.4; }
.lp-body { margin-bottom: 18px !important; font-size: clamp(16px, 1rem + 0.35vw, 20px); line-height: 1.5; color: var(--muted); }
.lp-body--gap { max-width: 56ch; margin: 48px 0 28px !important; }
.lp-punch { font-size: clamp(18px, 1rem + 0.6vw, 23px); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.lp-punch--gap { margin-top: 28px !important; }

/* Hero */
.lp-hero { position: relative; padding-top: clamp(48px, 9vw, 110px); }
.lp-hero::before {
  content: "";
  position: absolute;
  inset: -200px -200px auto;
  height: 760px;
  pointer-events: none;
  background: radial-gradient(closest-side ellipse at 30% 40%, color-mix(in oklab, var(--red) 16%, transparent), transparent 100%);
}
.lp-hero > * { position: relative; }
.lp-hero h1 {
  max-width: 24ch;
  margin-bottom: 28px;
  font-size: clamp(38px, 1rem + 5.4vw, 86px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.lp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 40px; }
.lp-hint { font-size: 15px; color: var(--faint); }

.lp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  column-gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(48px, 7vw, 88px);
  border-bottom: 1px solid var(--line);
}
.lp-stats > div { padding: 26px 0; border-top: 1px solid var(--line); }
.lp-num {
  display: block;
  margin-top: 8px;
  font: 600 clamp(30px, 3.4vw, 46px) var(--lp-mono);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.lp-money .lp-label, .lp-money .lp-num { color: var(--red); }
.lp-caption { margin-top: 12px !important; font: 11px var(--lp-mono); color: var(--faint); }

/* Zaufanie */
.lp-claim {
  max-width: 30ch;
  font-size: clamp(24px, 1rem + 2vw, 44px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.lp-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1px;
  margin-top: 40px;
  background: var(--line);
  border: 1px solid var(--line);
}
.lp-quotes blockquote { margin: 0; padding: 24px; background: var(--surface); }
.lp-quotes p { font-size: 17px; line-height: 1.5; }
.lp-quotes cite { display: block; margin-top: 12px; font: 600 12px var(--lp-mono); font-style: normal; color: var(--faint); }

/* Karty */
.lp-card { padding: 22px; border: 1px solid var(--line); background: var(--surface); }
.lp-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font: 600 10px var(--lp-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.lp-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.lp-row--strong { font-weight: 600; }
.lp-row--strong:first-of-type, .lp-row:not(.lp-row--strong) + .lp-row--strong { border-top-color: var(--line-strong); }
.lp-ok, .lp-missing { font: 600 12px var(--lp-mono); }
.lp-ok { color: var(--d-template); }
.lp-missing { color: var(--red); animation: lp-blink 1.6s steps(1) infinite; }
.lp-missing--2 { animation-delay: 0.4s; }
.lp-missing--3 { animation-delay: 0.8s; }

/* Lejek */
.lp-funnel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  column-gap: clamp(20px, 3vw, 44px);
  border-bottom: 1px solid var(--line);
}
.lp-funnel li { padding: 26px 0; border-top: 1px solid var(--line); }
.lp-funnel p { font-size: 17px; line-height: 1.4; }
.lp-bar { display: block; height: 6px; margin: 14px 0 18px; overflow: hidden; background: var(--line); }
.lp-bar i {
  display: block;
  height: 100%;
  width: var(--w);
  background: var(--text);
  transition: width 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.lp-funnel-money .lp-step { color: var(--red); }
.lp-funnel-money .lp-bar i { background: var(--red); }
.lp-funnel-money p { font-weight: 600; }

.lp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.lp-pair > div { padding: 22px; background: var(--surface); }
.lp-sum { display: block; margin-top: 10px; font: 600 28px var(--lp-mono); letter-spacing: -0.03em; }
.lp-sum--faint { color: var(--faint); }

/* Dziury i diagnozy */
.lp-holes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
}
.lp-hole { padding: 28px; }
.lp-hole > p:last-child { font-size: 17px; line-height: 1.5; }
.lp-tag {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 600 11px var(--lp-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c);
}
.lp-tag::before, .lp-marquee span::before, .lp-verdicts dt::before, .lp-overlay-verdict::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background: currentColor;
}
.lp-flow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 20px;
  font: 600 13px var(--lp-mono);
  color: var(--muted);
}
.lp-flow span { padding: 8px 12px; border: 1px solid var(--line-strong); white-space: nowrap; }
.lp-flow .lp-flow-end { border-style: dashed; color: var(--faint); }
.lp-flow i { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 12px); }

.lp-marquee {
  overflow: hidden;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.lp-marquee-track {
  display: flex;
  gap: 56px;
  width: max-content;
  font: 600 15px var(--lp-mono);
  white-space: nowrap;
  animation: lp-marquee 38s linear infinite;
}
.lp-marquee span { display: flex; align-items: center; gap: 10px; color: var(--c); }

.lp-verdicts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  column-gap: 56px;
  margin-top: 8px !important;
}
.lp-verdicts > div { padding: 20px 0; border-bottom: 1px solid var(--line); }
.lp-verdicts dt { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--c); }
.lp-verdicts dd { margin: 6px 0 0 18px; color: var(--muted); }

/* Konkurencja */
.lp-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  line-height: 1.5;
}
.lp-list li:last-child { border-bottom: 1px solid var(--line); }
.lp-list li > span:first-child { padding-top: 5px; font: 600 12px var(--lp-mono); color: var(--red); }
.lp-rivals { display: grid; gap: 14px; padding: 20px; }
.lp-rival {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.lp-rival .lp-stripes { height: 44px; border: 1px solid var(--line); }
.lp-ratio { font: 600 15px var(--lp-mono); color: var(--red); }
.lp-ratio--flat { color: var(--muted); }
.lp-gap-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px dashed var(--line-strong);
  font: 600 12px var(--lp-mono);
  color: var(--muted);
}
.lp-pulse { flex: none; width: 8px; height: 8px; background: var(--red); animation: lp-pulse 1.8s ease-in-out infinite; }

/* Nakładka */
.lp-window { position: relative; border: 1px solid var(--line); background: var(--surface); }
.lp-window-bar { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.lp-window-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.lp-window-body {
  aspect-ratio: 16 / 8;
  min-height: 220px;
  background: repeating-linear-gradient(135deg, var(--stripe) 0 12px, var(--surface) 12px 24px);
}
.lp-overlay {
  position: absolute;
  left: clamp(12px, 4%, 40px);
  right: clamp(12px, 4%, 40px);
  bottom: clamp(12px, 6%, 48px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  box-shadow: 0 20px 60px -20px var(--shadow);
  font: 600 13px var(--lp-mono);
  color: var(--muted);
}
.lp-overlay b { color: var(--text); }
.lp-overlay b.lp-red { color: var(--red); }
.lp-overlay-mark { display: flex; align-items: center; gap: 8px; color: var(--text); }
.lp-overlay-mark::before { content: ""; width: 8px; height: 8px; background: var(--red); }
.lp-overlay-verdict { display: flex; align-items: center; gap: 8px; margin-left: auto; color: var(--c); }

/* Jak to działa */
.lp-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.lp-steps li { padding-top: 20px; border-top: 1px solid var(--line-strong); }
.lp-steps .lp-step { font-size: 12px; letter-spacing: 0.15em; color: var(--red); }
.lp-steps h4 { margin: 12px 0 10px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.lp-steps p { color: var(--muted); line-height: 1.5; }
.lp-code {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  font: 13px var(--lp-mono);
  color: var(--muted);
  overflow-wrap: anywhere;
}
.lp-caret { animation: lp-blink 1s steps(1) infinite; }

/* Bezpieczeństwo */
.lp-safe { max-width: 74ch; }
.lp-safe li { padding: 24px 0; border-top: 1px solid var(--line); line-height: 1.5; }
.lp-safe li:last-child { border-bottom: 1px solid var(--line); }

/* Cena */
.lp-amount {
  margin-bottom: 8px !important;
  font: 600 clamp(48px, 1rem + 5vw, 100px) var(--lp-mono);
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--red);
}
.lp-per { font-size: 18px; color: var(--muted); }
#cena .lp-body { max-width: 44ch; }
#cena .lp-cta { margin-top: 10px; }

/* Pytania */
.lp-faq { max-width: 82ch; border-top: 1px solid var(--line); }
.lp-faq details { border-bottom: 1px solid var(--line); }
.lp-faq summary {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(17px, 1rem + 0.4vw, 21px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary .lp-step { color: var(--red); }
.lp-faq summary:hover { color: var(--red-soft); }
.lp-faq details p { max-width: 66ch; margin: 0 0 24px 40px; font-size: 17px; line-height: 1.55; color: var(--muted); }

/* Zamknięcie i formularz */
.lp-close { position: relative; padding-bottom: clamp(80px, 10vw, 140px); }
.lp-close::before {
  content: "";
  position: absolute;
  inset: -160px -200px;
  pointer-events: none;
  background: radial-gradient(closest-side ellipse at 62% 55%, color-mix(in oklab, var(--red) 16%, transparent), transparent 100%);
}
.lp-close > * { position: relative; }
.lp-closing {
  max-width: 24ch;
  margin-bottom: 24px !important;
  font-size: clamp(34px, 1rem + 3.6vw, 72px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
}
.lp-close .lp-lead { margin-bottom: 36px; }
.lp-error { margin-bottom: 20px; color: var(--red-soft); font-weight: 600; }

.lp-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 24px 32px;
  max-width: 760px;
}
.lp-form label { display: grid; gap: 8px; font: 600 11px var(--lp-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.lp-form .lp-dim { text-transform: none; letter-spacing: 0; }
.lp-form-wide { grid-column: 1 / -1; }
.lp-form input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: 400 18px var(--lp-sans);
  letter-spacing: 0;
  text-transform: none;
}
.lp-form input::placeholder { color: var(--faint); }
.lp-form input:focus { outline: none; border-bottom-color: var(--red); }
.lp-form .lp-cta { justify-self: start; }
.lp-trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Stopka */
.lp-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 36px;
  padding-bottom: 56px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--faint);
}
.lp-foot p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.lp-foot a { color: var(--muted); text-decoration: none; }

/* Animacje — ukrywanie przed wjazdem tylko wtedy, gdy działa landing.js */
.lp-js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.lp-js [data-reveal].is-in { opacity: 1; transform: none; }
.lp-js .lp-bar i:not(.is-in) { width: 0; }

@keyframes lp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes lp-pulse { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes lp-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes lp-drift { from { transform: translateX(0); } to { transform: translateX(6px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .landing *, .landing *::before { animation: none !important; transition: none !important; }
  .lp-js [data-reveal] { opacity: 1; transform: none; }
  .lp-js .lp-bar i:not(.is-in) { width: var(--w); }
}