/* =====================================================================
   Napisy AI – strona główna 3.0 („montażownia”). Ładowane tylko na „/”.
   Kierunek: ciemny monitor programu w nagłówku (tak wygląda praca montażysty),
   jasne sekcje treści według motywu. Sygnatura: aktywne słowo napisów – żółty chip.
   Kolor = znaczenie: niebieski – interakcja, żółty – napisy, różowy/fiolet/zielony
   na makietach – kolory klipów z osi czasu Premiere (grafika / wideo / audio).
   Krój: Montserrat (OFL, assets/fonts) – tym samym krojem wtyczka pisze napisy.
   Wszystko widoczne bez JS; landing.js (GSAP) tylko dodaje ruch.
   ===================================================================== */

@font-face {
  font-family: "Montserrat L2";
  src: url("../fonts/montserrat-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.l2 {
  --l2-ink: #0b0c10;          /* monitor programu */
  --l2-ink-2: #14161c;
  --l2-ink-3: #1e2129;
  --l2-line-d: rgba(255, 255, 255, .09);
  --l2-on-d: #f4f5f7;         /* 18.6:1 na --l2-ink */
  --l2-on-d-2: #a7abb6;       /* 8.4:1 na --l2-ink */
  --l2-cap: var(--caption);
  --l2-cap-ink: #111111;
  --l2-pr-graphic: #b8336a;   /* klip grafiki w Premiere */
  --l2-pr-video: #5a63c4;
  --l2-pr-audio: #2f8f5b;
  --l2-pr-head: #3d8bff;
  --l2-display: "Montserrat L2", var(--font-display);
  --l2-tile: var(--bg-grouped);   /* karta na jasnym tle sekcji */
  --l2-tile-2: var(--surface);    /* pole wewnątrz karty */
  --l2-radius: 28px;
  background: var(--bg);
  color: var(--text);
  overflow-x: clip;
}
.l2 h1, .l2 h2, .l2 h3, .l2 p, .l2 figure { margin: 0; }
.l2 ul, .l2 ol { margin-block: 0; padding: 0; list-style: none; }
.l2 ul:not(.l2-wrap), .l2 ol:not(.l2-wrap) { margin-inline: 0; }
.l2 ul.l2-wrap { padding-inline: clamp(16px, 4vw, 36px); }

/* ---------- układ ---------- */
.l2-wrap { max-width: 1180px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 36px); }
.l2-narrow { max-width: 820px; }
.l2-wide { max-width: 1260px; }
.l2-center { text-align: center; }
.l2-section { padding-block: clamp(80px, 10vw, 136px); }
.l2-bg { background: var(--bg); }
.l2-grouped { background: var(--bg-grouped); }

/* ---------- typografia ---------- */
.l2-display {
  font-family: var(--l2-display); font-weight: 800;
  font-size: clamp(2.5rem, 5.4vw, 4.6rem); line-height: 1.03; letter-spacing: -.04em;
  color: var(--l2-on-d); text-wrap: balance;
}
.l2-headline {
  font-family: var(--l2-display); font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.06; letter-spacing: -.035em;
  margin-bottom: .4em !important; text-wrap: balance;
}
.l2-headline-sm { font-size: clamp(1.75rem, 3.4vw, 2.6rem); margin-bottom: clamp(28px, 4vw, 48px) !important; }
.l2-h3 { font-family: var(--l2-display); font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 1.85rem); line-height: 1.12; letter-spacing: -.03em; margin: 6px 0 10px !important; text-wrap: balance; }
.l2-eyebrow { margin-bottom: 14px !important; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.l2-lead { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--l2-on-d-2); max-width: 36em; text-wrap: pretty; }
.l2-lead-dark { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.l2-center .l2-lead-dark { max-width: 40em; margin-inline: auto; }
.l2-lead-center { max-width: 40em; margin-inline: auto; }
.l2-note { margin-top: 18px !important; font-size: .875rem; color: var(--text-2); }
.l2-fine { margin-top: 18px !important; font-size: .9375rem; color: var(--l2-on-d-2); }

/* sygnatura: aktywne słowo */
.l2-mark {
  background: var(--l2-cap); color: var(--l2-cap-ink);
  padding: 0 .16em; margin: 0 -.04em; border-radius: .14em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- przyciski ---------- */
.l2-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 3.4vw, 36px); }
.l2-actions-center { justify-content: center; }
.l2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 11px 22px; border-radius: 12px; border: 1px solid transparent;
  font-size: 1rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; text-align: center;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.l2-btn:hover { text-decoration: none; }
.l2-btn:active { transform: translateY(1px); }
.l2-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.l2-btn-lg { min-height: 52px; padding: 14px 26px; font-size: 1.0625rem; }
.l2-btn-primary { background: var(--accent); color: var(--on-accent); }
.l2-btn-primary:hover { background: var(--accent-hover); }
.l2-btn-ghost { color: var(--l2-on-d); border-color: rgba(255, 255, 255, .22); }
.l2-btn-ghost:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .4); }
.l2-btn-quiet { background: var(--fill); color: var(--text); }
.l2-btn-quiet:hover { background: var(--fill-2); }

/* =====================================================================
   Hero – monitor programu (zawsze ciemny: to treść, nie interfejs strony)
   ===================================================================== */
.l2-hero {
  position: relative; isolation: isolate;
  background:
    radial-gradient(60% 55% at 78% 30%, rgba(255, 214, 10, .10), transparent 70%),
    var(--l2-ink);
  color: var(--l2-on-d);
  padding-top: clamp(40px, 6vw, 84px);
}
/* linijka timecode u góry – drobny detal z montażowni */
.l2-hero::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 10px; z-index: -1;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .14) 0 1px, transparent 1px 24px);
  opacity: .5;
}
.l2-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.l2-chip {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px !important;
  padding: 6px 12px; border: 1px solid var(--l2-line-d); border-radius: 999px;
  font-size: .8125rem; font-weight: 600; color: var(--l2-on-d-2); background: rgba(255, 255, 255, .03);
}
.l2-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 3px rgba(255, 59, 48, .2); }
.l2-display { margin-bottom: 22px !important; }
.l2-k { padding: 0 .08em; margin: 0 -.08em; border-radius: .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.l2-k-on { background: var(--l2-cap); color: var(--l2-cap-ink); }
.l2-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 24px !important; font-size: .875rem; color: var(--l2-on-d-2); }
.l2-trust li { display: inline-flex; align-items: center; gap: 8px; }
.l2-trust li::before { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; color: var(--l2-cap); }
.l2-trust li { color: var(--l2-on-d-2); }

/* ---------- makieta: scena ---------- */
.l2-stage { position: relative; min-height: 560px; }
.l2-phone {
  position: relative; container-type: inline-size; overflow: hidden;
  width: 100%; aspect-ratio: 9 / 16; border-radius: 30px;
  background: #000; box-shadow: 0 0 0 6px #1b1d23, 0 0 0 7px rgba(255, 255, 255, .08), 0 30px 80px rgba(0, 0, 0, .55);
}
.l2-phone-hero { position: absolute; left: 4%; top: 0; width: min(270px, 46%); z-index: 2; }
.l2-scene { position: absolute; inset: 0; background: linear-gradient(180deg, #2a3a5c 0%, #6d5a7a 46%, #c98a5e 70%, #3b2a22 100%); }
.l2-scene i { position: absolute; display: block; }
.l2-sun { width: 34%; aspect-ratio: 1; left: 56%; top: 40%; border-radius: 50%; background: radial-gradient(circle, #ffe7a8, #ffb35c 60%, transparent 72%); opacity: .9; }
.l2-hill { left: -10%; right: -10%; bottom: 0; height: 36%; background: #1f1712; border-radius: 50% 50% 0 0 / 30% 30% 0 0; }
.l2-person { width: 38%; height: 46%; left: 22%; bottom: 0; background: #120d0b; border-radius: 48% 48% 10% 10% / 34% 34% 10% 10%; box-shadow: 0 -62% 0 -18% #120d0b; }
.l2-scene-b { background: linear-gradient(180deg, #14324a, #2f6b78 55%, #b8a36e 78%, #2b2a1f); }
.l2-scene-c { background: linear-gradient(180deg, #3a1f3f, #8c3f63 50%, #e08c5a 74%, #2a1714); }
.l2-scene-d { background: linear-gradient(180deg, #19331f, #3f7a4a 52%, #c6b25c 76%, #1e2416); }
.l2-scene-e { background: linear-gradient(180deg, #202640, #4d4a8c 50%, #a98bd1 72%, #1f1a2e); }
.l2-ui-top { position: absolute; top: 5%; left: 0; right: 0; display: flex; justify-content: center; gap: 12%; font: 600 4.6cqw/1 var(--font); color: rgba(255, 255, 255, .7); }
.l2-ui-top b { color: #fff; font-weight: 700; }
.l2-ui-side { position: absolute; right: 4%; bottom: 18%; display: grid; gap: 7cqw; }
.l2-ui-side i { width: 9cqw; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .85); }

/* ---------- napisy na kadrze (te same zasady co style wtyczki) ---------- */
.l2-cap {
  position: absolute; left: 8%; right: 8%; top: 60%; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .14em .26em;
  font-family: var(--l2-display); font-weight: 900; font-size: 9.6cqw; line-height: 1.12; letter-spacing: -.01em;
  color: #fff; text-align: center;
  text-shadow: 0 .05em 0 #000, 0 0 .14em rgba(0, 0, 0, .8);
}
.l2-w { display: inline-block; padding: .02em .14em; border-radius: .16em; transform-origin: 50% 70%; }
/* stan spoczynku (bez JS): 3. słowo jest „aktywne” */
.l2-cap:not(.is-live) .l2-w:nth-child(3), .l2-w.is-on { background: var(--l2-cap); color: var(--l2-cap-ink); text-shadow: none; }
.l2-st-karaoke { font-weight: 800; font-size: 8.4cqw; text-transform: none; }
.l2-st-karaoke:not(.is-live) .l2-w:nth-child(3), .l2-st-karaoke .l2-w.is-on { background: transparent; color: var(--l2-cap); text-shadow: 0 .05em 0 #000, 0 0 .14em rgba(0, 0, 0, .8); }
.l2-st-karaoke .l2-w.is-past { color: var(--l2-cap); }
.l2-st-komiks { font-size: 11cqw; letter-spacing: .01em; -webkit-text-stroke: .06em #000; paint-order: stroke fill; text-shadow: .06em .08em 0 #000; }
.l2-st-komiks:not(.is-live) .l2-w:nth-child(3), .l2-st-komiks .l2-w.is-on { background: transparent; color: var(--l2-cap); text-shadow: .06em .08em 0 #000; }
.l2-st-jedno { top: 50%; font-size: 15cqw; }
.l2-st-jedno.is-live .l2-w { display: none; }
.l2-st-jedno.is-live .l2-w.is-on { display: inline-block; }

/* ---------- makieta: panel wtyczki ---------- */
.l2-plugin {
  position: absolute; right: 0; top: 6%; z-index: 3; width: min(250px, 50%);
  padding: 14px; border-radius: 14px; background: #232427; border: 1px solid #34363c;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5); font-size: 11px; color: #e7e7ea;
}
.l2-plugin-head { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.l2-plugin-head em { margin-left: auto; font-style: normal; color: #8e9099; font-size: 10.5px; }
.l2-plugin-logo { width: 16px; height: 12px; border-radius: 3px; background: var(--l2-cap); }
.l2-plugin-mods { display: flex; gap: 3px; margin: 11px -2px 12px; padding-bottom: 10px; border-bottom: 1px solid #34363c; }
.l2-plugin-mods span { flex: 1; padding: 5px 0; border-radius: 6px; text-align: center; font-size: 9.5px; font-weight: 600; color: #8e9099; }
.l2-plugin-mods .is-on { background: var(--l2-cap); color: #111; }
.l2-plugin-label { margin: 8px 0 5px !important; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8e9099; }
.l2-plugin-styles { display: flex; gap: 5px; }
.l2-plugin-styles span { flex: 1; padding: 6px 0; border-radius: 7px; background: #2d2f34; text-align: center; font-weight: 600; color: #c9cad0; }
.l2-plugin-styles .is-on { box-shadow: inset 0 0 0 1.5px var(--l2-cap); color: #fff; }
.l2-plugin-btn { display: block; margin-top: 14px; padding: 9px 0; border-radius: 8px; background: var(--l2-cap); color: #111; text-align: center; font-weight: 800; font-size: 12px; }
.l2-plugin-status { display: flex; align-items: center; gap: 6px; margin-top: 10px !important; color: #9fe3b6; font-weight: 600; }
.l2-plugin-status i { width: 7px; height: 7px; border-radius: 50%; background: #34c759; }

/* ---------- makieta: oś czasu ---------- */
.l2-tl {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; overflow: hidden;
  padding: 10px 10px 10px 34px; border-radius: 12px; background: #1b1c20; border: 1px solid #2e3036;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5); display: grid; gap: 5px;
}
.l2-tl-row { position: relative; display: flex; gap: 3px; height: 22px; }
.l2-tl-row::before { position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); font: 600 10px/1 var(--font); color: #7d808a; }
.l2-tl-v2::before { content: "V2"; }
.l2-tl-v1::before { content: "V1"; }
.l2-tl-a1::before { content: "A1"; }
.l2-tl-row b, .l2-tl-row i { display: flex; align-items: center; min-width: 0; padding: 0 6px; border-radius: 4px; overflow: hidden; white-space: nowrap; font: 600 9.5px/1 var(--font); color: #fff; }
.l2-tl-v2 b { flex: 1; background: var(--l2-pr-graphic); }
.l2-tl-v2 b:first-child { flex: 1.6; }
.l2-tl-v1 i { flex: 1; background: var(--l2-pr-video); font-style: normal; }
.l2-tl-v1 i:nth-child(2) { flex: 1.5; }
.l2-tl-a1 { background: var(--l2-pr-audio); border-radius: 4px; }
.l2-tl-a1 svg { width: 100%; height: 100%; fill: rgba(255, 255, 255, .7); }
.l2-playhead { position: absolute; top: 4px; bottom: 4px; left: 42%; width: 2px; background: var(--l2-pr-head); border-radius: 1px; }
.l2-playhead::before { content: ""; position: absolute; top: -4px; left: -4px; width: 10px; height: 8px; background: var(--l2-pr-head); clip-path: polygon(0 0, 100% 0, 50% 100%); }

/* ---------- fakty ---------- */
.l2-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  margin-top: clamp(48px, 7vw, 88px) !important; border-top: 1px solid var(--l2-line-d);
}
.l2-facts li { display: grid; gap: 4px; padding: 26px 20px 34px 0; }
.l2-facts li + li { padding-left: 20px; border-left: 1px solid var(--l2-line-d); }
.l2-facts b { font-family: var(--l2-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; color: var(--l2-on-d); }
.l2-facts span { font-size: .875rem; line-height: 1.45; color: var(--l2-on-d-2); }

/* =====================================================================
   Sekcje treści
   ===================================================================== */
/* problem → rozwiązanie */
.l2-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 960px; margin-top: clamp(36px, 5vw, 56px); }
.l2-compare-card { padding: clamp(24px, 3.4vw, 36px); border-radius: var(--l2-radius); }
.l2-compare-card h3 { font-family: var(--l2-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; margin-bottom: 18px !important; }
.l2-compare-card ul { display: grid; gap: 12px; }
.l2-compare-card li { position: relative; padding-left: 30px; line-height: 1.45; }
.l2-compare-card li::before { content: ""; position: absolute; left: 0; top: .12em; width: 20px; height: 20px; border-radius: 50%; }
.is-before { background: var(--l2-tile); color: var(--text-2); }
.is-before h3 { color: var(--text-2); }
.is-before li::before { background: var(--fill-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 7l6 6M13 7l-6 6' stroke='%236e6e73' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.is-after { background: var(--l2-ink); color: var(--l2-on-d); }
.is-after h3 { color: var(--l2-cap); }
.is-after li::before { background: var(--l2-cap) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14.2 7.4' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }

/* sekcje dzielone */
.l2-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.l2-split-rev .l2-split-copy { order: 2; }
.l2-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px !important; }
.l2-tags li { padding: 7px 13px; border-radius: 999px; background: var(--fill); font-size: .875rem; font-weight: 600; }
.l2-tags li:nth-child(2) { background: var(--l2-cap); color: var(--l2-cap-ink); }
.l2-styles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 18px); }
.l2-styles figure { display: grid; gap: 10px; }
.l2-styles .l2-phone { border-radius: 20px; box-shadow: 0 0 0 4px #1b1d23, 0 18px 40px rgba(0, 0, 0, .25); }
.l2-styles figcaption { text-align: center; font-size: .8125rem; font-weight: 600; color: var(--text-2); }

/* kafle: edycja i słownik */
.l2-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.l2-tile { display: flex; flex-direction: column; padding: clamp(28px, 4vw, 44px); border-radius: var(--l2-radius); background: var(--l2-tile); }
.l2-tile > p:not(.l2-eyebrow) { color: var(--text-2); line-height: 1.55; max-width: 34em; }
.l2-find, .l2-dict { margin-top: auto; padding-top: 28px; display: grid; gap: 8px; }
.l2-find-row, .l2-dict-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--l2-tile-2); }
.l2-find-row span, .l2-dict-row span { width: 7.5em; flex: none; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.l2-find-row b { font-family: var(--mono); font-weight: 600; }
.l2-find-out { display: flex; align-items: center; gap: 8px; padding: 4px 4px 0; font-size: .875rem; font-weight: 600; color: var(--success); }
.l2-find-out i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.l2-dict-row s { color: var(--text-2); text-decoration-color: var(--danger); text-decoration-thickness: 2px; }
.l2-dict-row mark { background: var(--l2-cap); color: var(--l2-cap-ink); padding: 0 .3em; border-radius: 5px; font-weight: 700; }

/* sekcja ciemna: hook */
.l2-dark { background: var(--l2-ink); color: var(--l2-on-d); }
.l2-dark .l2-eyebrow, .l2-dark .l2-lead-dark, .l2-dark .l2-note { color: var(--l2-on-d-2); }
.l2-dark .l2-headline { color: var(--l2-on-d); }
.l2-hookviz { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px 28px; align-items: center; padding: clamp(22px, 3vw, 32px); border-radius: var(--l2-radius); background: var(--l2-ink-2); border: 1px solid var(--l2-line-d); }
.l2-score { position: relative; width: 128px; }
.l2-score svg { width: 100%; display: block; transform: rotate(-90deg); }
.l2-score circle { fill: none; stroke-width: 10; }
.l2-score-track { stroke: rgba(255, 255, 255, .1); }
.l2-score-bar { stroke: var(--l2-cap); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 98; }
.l2-score p { position: absolute; inset: 0; display: grid; place-content: center; grid-auto-flow: column; align-items: baseline; gap: 2px; }
.l2-score b { font-family: var(--l2-display); font-weight: 800; font-size: 2.6rem; letter-spacing: -.04em; }
.l2-score span { color: var(--l2-on-d-2); font-weight: 600; }
.l2-hook-tl { position: relative; display: grid; gap: 8px; min-height: 150px; align-content: start; }
.l2-hook-ruler { display: flex; justify-content: space-between; font: 600 11px/1 var(--mono); color: var(--l2-on-d-2); }
.l2-hook-track { height: 28px; border-radius: 6px; background: var(--l2-pr-video); position: relative; overflow: hidden; }
.l2-hook-track i { position: absolute; inset: 0 auto 0 0; width: 14%; background: rgba(0, 0, 0, .35); }
.l2-marker { position: relative; justify-self: start; max-width: 100%; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 8px; border-radius: 8px; background: var(--l2-ink-3); font-size: .8125rem; font-weight: 600; color: var(--l2-on-d); }
.l2-marker::before { content: ""; width: 10px; height: 14px; flex: none; clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); }
.l2-marker.is-red::before { background: #ff5a4f; }
.l2-marker.is-yellow::before { background: var(--l2-cap); }
.l2-marker.is-green::before { background: #3ad07a; }
.l2-marker:nth-of-type(2) { margin-left: 18%; }
.l2-marker:nth-of-type(3) { margin-left: 34%; }
.l2-hook-alt { grid-column: 1 / -1; padding: 16px 18px; border-radius: 14px; background: rgba(255, 214, 10, .08); border: 1px solid rgba(255, 214, 10, .24); font-size: 1.0625rem; font-weight: 600; line-height: 1.45; }
.l2-hook-alt span { display: block; margin-bottom: 4px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--l2-cap); }

/* setki i rolki */
.l2-clipsviz { margin-top: clamp(36px, 5vw, 56px); display: grid; gap: 22px; }
.l2-long { padding: 18px 20px; border-radius: 18px; background: var(--surface); }
.l2-long-label { display: block; margin-bottom: 10px; font-size: .8125rem; font-weight: 600; color: var(--text-2); }
.l2-long-wave {
  position: relative; height: 54px; border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, transparent 0 3px, var(--l2-pr-audio) 3px 5px) center / 100% 70% no-repeat,
    color-mix(in srgb, var(--l2-pr-audio) 16%, transparent);
}
.l2-cut { position: absolute; top: -4px; bottom: -4px; border-radius: 6px; background: rgba(255, 214, 10, .28); box-shadow: inset 0 0 0 2px var(--l2-cap); }
.l2-cut-1 { left: 9%; width: 7%; }
.l2-cut-2 { left: 38%; width: 9%; }
.l2-cut-3 { left: 71%; width: 5%; }
.l2-reels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 760px; margin-inline: auto; width: 100%; }
.l2-reel {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  aspect-ratio: 9 / 13; padding: 16px; border-radius: 20px; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .75)), linear-gradient(160deg, #2b3c62, #7a4f73 55%, #d08b5d);
}
.l2-reel:nth-child(2) { background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .75)), linear-gradient(160deg, #173a3f, #2f7a6f 55%, #c9b469); }
.l2-reel:nth-child(3) { background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .75)), linear-gradient(160deg, #2d2350, #6650a8 55%, #b98fd3); }
.l2-reel b { font-family: var(--l2-display); font-weight: 800; font-size: clamp(.95rem, 1.6vw, 1.15rem); line-height: 1.2; letter-spacing: -.01em; }
.l2-reel em { font-style: normal; font-size: .75rem; color: rgba(255, 255, 255, .78); }
.l2-reel-score { position: absolute; top: 12px; left: 12px; padding: 4px 8px; border-radius: 999px; background: var(--l2-cap); color: #111; font-size: .75rem; font-weight: 800; }

/* drobne funkcje */
.l2-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.l2-mini article { padding: 26px 24px; border-radius: 22px; background: var(--l2-tile); }
.l2-mini svg { width: 30px; height: 30px; margin-bottom: 14px; fill: none; stroke: var(--text); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.l2-mini h3 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; margin-bottom: 6px !important; }
.l2-mini p { color: var(--text-2); font-size: .9375rem; line-height: 1.5; }

/* kroki */
.l2-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); margin-top: clamp(36px, 5vw, 56px) !important; counter-reset: none; }
.l2-steps::before { content: ""; position: absolute; top: 22px; left: 22px; right: 22px; height: 2px; background: var(--separator-opaque); transform-origin: left; transform: scaleX(var(--l2-steps-p, 1)); }
.l2-steps li { position: relative; }
.l2-step-n {
  position: relative; display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 20px;
  border-radius: 14px; background: var(--l2-ink); color: var(--l2-cap);
  font-family: var(--l2-display); font-weight: 800; font-size: 1.2rem;
}
.l2-steps h3 { font-family: var(--l2-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 8px !important; }
.l2-steps p { color: var(--text-2); line-height: 1.55; }

/* cennik */
.l2-billing { position: relative; margin-top: clamp(28px, 4vw, 40px); }
.l2-bill-input { position: absolute; opacity: 0; pointer-events: none; }
.l2-seg { display: flex; width: max-content; max-width: 100%; margin: 0 auto clamp(28px, 4vw, 40px); padding: 4px; border-radius: 12px; background: var(--fill); }
.l2-seg label { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 18px; border-radius: 9px; font-weight: 600; font-size: .9375rem; cursor: pointer; color: var(--text-2); }
.l2-seg label span { padding: 2px 8px; border-radius: 999px; background: var(--l2-cap); color: var(--l2-cap-ink); font-size: .75rem; font-weight: 700; }
#l2-bill-m:checked ~ .l2-seg label[for="l2-bill-m"], #l2-bill-y:checked ~ .l2-seg label[for="l2-bill-y"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
#l2-bill-m:focus-visible ~ .l2-seg label[for="l2-bill-m"], #l2-bill-y:focus-visible ~ .l2-seg label[for="l2-bill-y"] { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
#l2-bill-m:checked ~ .l2-plans .l2-price-y, #l2-bill-y:checked ~ .l2-plans .l2-price-m { display: none; }
.l2-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; align-items: stretch; }
.l2-plan { position: relative; display: flex; flex-direction: column; padding: 28px 24px; border-radius: 24px; background: var(--l2-tile); border: 1px solid transparent; }
.l2-plan h3 { font-family: var(--l2-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; }
.l2-plan-for { margin-top: 4px !important; min-height: 2.9em; font-size: .9375rem; color: var(--text-2); line-height: 1.45; }
.l2-price { display: flex; align-items: baseline; gap: 4px; margin-top: 18px !important; }
.l2-amount { font-family: var(--l2-display); font-weight: 800; font-size: 2.4rem; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.l2-price small { color: var(--text-2); font-size: .9375rem; }
.l2-price-note { margin-top: 2px !important; font-size: .8125rem; color: var(--text-2); }
.l2-plan .l2-btn { margin: 20px 0 22px; width: 100%; }
.l2-plan ul { display: grid; gap: 10px; padding-top: 18px !important; border-top: 1px solid var(--separator); font-size: .9375rem; line-height: 1.4; }
.l2-plan li { position: relative; padding-left: 24px; }
.l2-plan li::before { content: ""; position: absolute; left: 0; top: .2em; width: 15px; height: 15px; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.l2-plan.is-featured { background: var(--surface); border: 2px solid var(--accent); box-shadow: 0 18px 50px rgba(0, 113, 227, .14); }
.l2-plan-badge { position: absolute; top: -13px; left: 22px; padding: 5px 11px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .75rem; font-weight: 700; letter-spacing: .01em; }
.l2-billing-note { margin-top: 22px !important; text-align: center; font-size: .9375rem; color: var(--text-2); }
.l2-studio { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; margin-top: 28px; padding: 22px 26px; border-radius: 20px; background: var(--l2-tile); }
.l2-studio p { flex: 1 1 380px; color: var(--text-2); line-height: 1.5; }
.l2-studio strong { color: var(--text); }

/* FAQ */
.l2-faq { margin-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--separator); }
.l2-faq details { border-bottom: 1px solid var(--separator); }
.l2-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 64px; padding: 16px 0;
  cursor: pointer; list-style: none; font-size: 1.125rem; font-weight: 600; letter-spacing: -.015em;
}
.l2-faq summary::-webkit-details-marker { display: none; }
.l2-faq summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M14 9v10M9 14h10' stroke='%236e6e73' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 28px no-repeat; transition: transform .2s var(--ease); }
.l2-faq details[open] summary::after { transform: rotate(45deg); }
.l2-faq summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; }
.l2-faq details p { padding: 0 44px 22px 0; color: var(--text-2); line-height: 1.6; }

/* finał */
.l2-final { padding-block: clamp(88px, 11vw, 150px); background: radial-gradient(50% 70% at 50% 100%, rgba(255, 214, 10, .14), transparent 70%), var(--l2-ink); color: var(--l2-on-d); }
.l2-final .l2-headline { color: var(--l2-on-d); max-width: 16em; margin-inline: auto; }

/* ---------- nagłówek nad ciemnym hero ---------- */
body.is-home { background: #0b0c10; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .l2 { --l2-tile: var(--surface); --l2-tile-2: var(--surface-2); }
  :root:not([data-theme="light"]) .is-after { box-shadow: inset 0 0 0 1px var(--l2-line-d); }
}
:root[data-theme="dark"] .l2 { --l2-tile: var(--surface); --l2-tile-2: var(--surface-2); }
:root[data-theme="dark"] .is-after { box-shadow: inset 0 0 0 1px var(--l2-line-d); }
.is-home .site-header { background: rgba(11, 12, 16, .86); border-bottom-color: rgba(255, 255, 255, .08); }
.is-home .site-header .brand, .is-home .site-header .nav a:not(.btn) { color: #f4f5f7; }
.is-home .site-header .theme-toggle { background: rgba(255, 255, 255, .1); color: #f4f5f7; }
.is-home .site-header .btn-ghost { color: #f4f5f7; }

/* =====================================================================
   Responsywność
   ===================================================================== */
/* ---------- demo na żywo (#demo, assets/js/demo.js) ---------- */
.l2-demo label { margin: 0; font-size: inherit; font-weight: inherit; color: inherit; }
.l2-demo-switch b { color: var(--l2-on-d); font-weight: 700; }
.l2-demo-switch small { font-weight: 400; }
.l2-demo-swatches .sw[data-hex="#ffd60a"] { background: #ffd60a; }
.l2-demo-swatches .sw[data-hex="#59ff4d"] { background: #59ff4d; }
.l2-demo-swatches .sw[data-hex="#ff4fa3"] { background: #ff4fa3; }
.l2-demo-swatches .sw[data-hex="#3dd5ff"] { background: #3dd5ff; }
.l2-demo-head { margin-bottom: clamp(36px, 5vw, 56px) !important; }
.l2-demo {
  display: grid; gap: 20px 28px; align-items: start;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  grid-template-areas: "stage panel" "tl tl";
  padding: clamp(16px, 2.6vw, 28px); border-radius: var(--l2-radius);
  background: var(--l2-ink); color: var(--l2-on-d);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .18);
}
.l2-demo-stage { grid-area: stage; display: grid; gap: 14px; }
.l2-demo-panel { grid-area: panel; display: grid; gap: 18px; align-content: start; min-width: 0; }
.l2-demo-tl { grid-area: tl; }

.l2-demo-phone { border-radius: 26px; box-shadow: 0 0 0 5px #1b1d23, 0 0 0 6px rgba(255, 255, 255, .08); --demo-size: 9.3cqw; --demo-active: var(--l2-cap); }
.l2-demo-cap { top: auto; bottom: 30%; transition: bottom .35s var(--ease); font-size: var(--demo-size); z-index: 3; }
.l2-demo-cap .l2-w { transition: color .12s, background-color .12s, opacity .2s; }
/* style: ten sam wygląd co szablony .mogrt (styles.js) */
.l2-demo-cap.st-klasyczny { font-family: Arial, var(--font); font-weight: 700; letter-spacing: 0; -webkit-text-stroke: .1em #000; paint-order: stroke fill; text-shadow: none; }
.l2-demo-cap.st-klasyczny .l2-w.is-on { background: transparent; color: var(--demo-active); }
.l2-demo-cap.st-mocny { -webkit-text-stroke: .12em #000; paint-order: stroke fill; }
.l2-demo-cap.st-mocny .l2-w.is-on { background: transparent; color: var(--demo-active); text-shadow: 0 .05em 0 #000, 0 0 .14em rgba(0, 0, 0, .8); }
.l2-demo-cap.st-komiks { letter-spacing: .01em; -webkit-text-stroke: .15em #000; paint-order: stroke fill; text-shadow: .07em .09em 0 #000; }
.l2-demo-cap.st-komiks .l2-w.is-on { background: transparent; color: var(--demo-active); text-shadow: .07em .09em 0 #000; }
.l2-demo-cap.st-karaoke { font-family: var(--font); font-weight: 800; letter-spacing: -.01em; }
.l2-demo-cap.st-karaoke .l2-w { padding: .04em .2em; border-radius: .22em; }
.l2-demo-cap.st-karaoke .l2-w.is-on { background: var(--demo-active); color: #fff; text-shadow: none; }
.l2-demo-cap.st-minimal { font-family: var(--font); font-weight: 600; letter-spacing: -.01em; color: #9e9e9e; text-shadow: 0 .04em .18em rgba(0, 0, 0, .6); }
.l2-demo-cap.st-minimal .l2-w.is-on, .l2-demo-cap.st-minimal .l2-w.is-past { background: transparent; color: var(--demo-active); text-shadow: 0 .04em .18em rgba(0, 0, 0, .6); }
.l2-demo-cap.st-blok { left: 6%; right: 6%; gap: 0 .26em; padding: .22em .4em; border-radius: .3em; background: rgba(0, 0, 0, .72); font-family: var(--font); font-weight: 700; letter-spacing: -.01em; text-shadow: none; }
.l2-demo-cap.st-blok:empty { display: none; }
.l2-demo-cap.st-blok .l2-w { padding: 0; }
.l2-demo-cap.st-blok .l2-w.is-on { background: transparent; color: var(--demo-active); }
.l2-demo-cap.st-jedno-slowo { -webkit-text-stroke: .1em #000; paint-order: stroke fill; }
.l2-demo-cap.st-jedno-slowo .l2-w { display: none; }
.l2-demo-cap.st-jedno-slowo .l2-w.is-on { display: inline-block; background: transparent; color: var(--demo-active); }
/* ruch (presety wtyczki) */
.l2-demo-cap.anim-pop .l2-w.is-on { animation: l2d-pop .22s var(--ease); }
.l2-demo-cap.anim-bounce .l2-w.is-on { animation: l2d-bounce .38s cubic-bezier(.3, 1.6, .5, 1); }
.l2-demo-cap.anim-fade.is-in { animation: l2d-fade .25s ease-out; }
.l2-demo-cap.anim-slide.is-in { animation: l2d-slide .3s var(--ease); }
@keyframes l2d-pop { 0% { transform: scale(.8); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes l2d-bounce { 0% { transform: translateY(.35em) scale(.85); } 100% { transform: none; } }
@keyframes l2d-fade { from { opacity: 0; } }
@keyframes l2d-slide { from { opacity: 0; transform: translateY(.5em); } }

/* strefy interfejsu platformy */
.l2-demo-zone { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.l2-demo-zone i { position: absolute; display: block; background: repeating-linear-gradient(135deg, rgba(255, 59, 48, .32) 0 6px, rgba(255, 59, 48, .14) 6px 12px); outline: 1px solid rgba(255, 90, 80, .7); outline-offset: -1px; }
.l2-demo-zone .z-top { left: 0; right: 0; top: 0; height: var(--z-top); }
.l2-demo-zone .z-bottom { left: 0; right: 0; bottom: 0; height: var(--z-bottom); }
.l2-demo-zone .z-right { right: 0; width: var(--z-right); top: var(--z-right-from); bottom: var(--z-bottom); }
.l2-demo-beep { position: absolute; top: 14%; left: 50%; z-index: 4; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; background: #ff3b30; color: #fff; font: 800 11px/1.2 var(--font); letter-spacing: .08em; }

.l2-demo-transport { display: flex; align-items: center; gap: 12px; }
.l2-demo-play { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--l2-cap); color: #111; cursor: pointer; }
.l2-demo-play svg { width: 18px; height: 18px; fill: currentColor; }
.l2-demo .i-pause, .l2-demo.is-playing .i-play { display: none; }
.l2-demo.is-playing .i-pause { display: inline; }
.l2-demo-seek { flex: 1; min-width: 0; accent-color: var(--l2-cap); }
.l2-demo-time { font: 600 .8125rem/1 var(--mono); color: var(--l2-on-d-2); font-variant-numeric: tabular-nums; }

.l2-demo-panel-head { display: flex; align-items: center; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--l2-line-d); font-size: 14px; }
.l2-demo-panel-head em { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--l2-on-d-2); font: 600 11px/1.4 var(--font); text-transform: uppercase; letter-spacing: .08em; }
.l2-demo-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.l2-demo-group legend { margin-bottom: 8px; padding: 0; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--l2-on-d-2); }
.l2-demo input[type="radio"], .l2-demo input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.l2-demo-chips, .l2-demo-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.l2-demo-chips span, .l2-demo-seg span { display: inline-block; padding: 7px 12px; border-radius: 9px; background: rgba(255, 255, 255, .06); color: var(--l2-on-d); font-size: .875rem; font-weight: 600; cursor: pointer; transition: background .15s, box-shadow .15s; }
.l2-demo-chips label:hover span, .l2-demo-seg label:hover span { background: rgba(255, 255, 255, .11); }
.l2-demo-chips input:checked + span, .l2-demo-seg input:checked + span { background: var(--l2-cap); color: #111; }
.l2-demo input:focus-visible + span, .l2-demo input:focus-visible + .sw { outline: 2px solid var(--l2-cap); outline-offset: 2px; }
.l2-demo-swatches { display: flex; gap: 10px; }
.l2-demo-swatches .sw { display: block; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .15); }
.l2-demo-swatches .sw-auto { background: var(--l2-cap); position: relative; }
.l2-demo-swatches .sw-auto::after { content: "A"; position: absolute; inset: 0; display: grid; place-items: center; font: 800 12px/1 var(--font); color: #111; }
.l2-demo-swatches input:checked + .sw { box-shadow: 0 0 0 2px var(--l2-ink), 0 0 0 4px #fff; }
.l2-demo-note { margin: 8px 0 0 !important; font-size: .8125rem; line-height: 1.4; color: var(--l2-on-d-2); min-height: 2.8em; }
.l2-demo-note.is-fix { color: #ffb3ad; }
.l2-demo-toggles { display: grid; gap: 4px; }
.l2-demo-switch { display: flex; align-items: center; gap: 12px; padding: 8px 0; cursor: pointer; }
.l2-demo-switch > span { display: grid; gap: 1px; font-size: .9375rem; }
.l2-demo-switch small { font-size: .8125rem; color: var(--l2-on-d-2); }
.l2-demo-switch::before { content: ""; flex: none; width: 40px; height: 24px; border-radius: 999px; background: rgba(255, 255, 255, .16) radial-gradient(circle at 12px 50%, #fff 9px, transparent 10px); transition: background .2s; }
.l2-demo-switch:has(input:checked)::before { background: var(--l2-cap) radial-gradient(circle at 28px 50%, #111 9px, transparent 10px); }
.l2-demo-switch:has(input:disabled) { opacity: .45; cursor: default; }
.l2-demo-switch:has(input:focus-visible)::before { outline: 2px solid var(--l2-cap); outline-offset: 2px; }
.l2-demo-lines { list-style: none; padding: 0 !important; margin: 0 !important; display: grid; gap: 6px; }
.l2-demo-lines input { width: 100%; padding: 8px 12px; border: 1px solid var(--l2-line-d); border-radius: 9px; background: rgba(255, 255, 255, .04); color: var(--l2-on-d); font: 500 .9375rem/1.3 var(--font); }
.l2-demo-lines input:focus { outline: none; border-color: var(--l2-cap); background: rgba(255, 255, 255, .07); }

.l2-demo-tl { position: relative; display: grid; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--l2-ink-2); cursor: pointer; }
.l2-demo-tl-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; }
.l2-demo-tl-lab { font: 700 10px/1 var(--mono); color: var(--l2-on-d-2); }
.l2-demo-tl-track { position: relative; height: 22px; border-radius: 4px; background: rgba(255, 255, 255, .04); overflow: hidden; }
.l2-demo-tl-track b { position: absolute; top: 0; bottom: 0; padding: 0 5px; overflow: hidden; border-radius: 3px; border-left: 1px solid rgba(0, 0, 0, .35); background: var(--l2-pr-graphic); color: #fff; font: 600 10px/22px var(--font); white-space: nowrap; text-overflow: ellipsis; }
.l2-demo-tl-track[data-demo-track="a"] b { background: #ff3b30; text-transform: uppercase; }
.l2-demo-tl-audio { background: var(--l2-pr-audio) repeating-linear-gradient(90deg, transparent 0 3px, rgba(0, 0, 0, .22) 3px 4px); opacity: .85; }
.l2-demo-tl-over { position: absolute; top: 6px; bottom: 6px; left: 48px; right: 12px; pointer-events: none; }
.l2-demo-tl-head { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: var(--l2-pr-head); }
.l2-demo-tl-head::before { content: ""; position: absolute; top: -4px; left: -4px; width: 10px; height: 8px; background: var(--l2-pr-head); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.l2-demo-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: 32px !important; text-align: center; }
.l2-demo-cta p { margin: 0 !important; color: var(--text-2); font-size: 1.0625rem; }

@media (max-width: 860px) {
  .l2-demo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "tl" "panel"; }
  .l2-demo-stage { max-width: 320px; width: 100%; margin-inline: auto; }
}

/* =====================================================================
   Dema produktów (partials/demo/*.php) – wspólny ciemny „monitor”, przełączniki jak w panelu wtyczki.
   Wybór pokazuje CSS :has() (bez JS); demo-products.js dodaje tylko ruch napisów i zakładki.
   ===================================================================== */
.ico { width: 22px; height: 22px; flex: none; vertical-align: -.3em; }
.ico-sm { width: 16px; height: 16px; vertical-align: -.2em; }
.l2-dm {
  display: grid; gap: 20px; padding: clamp(16px, 2.6vw, 28px); border-radius: var(--l2-radius);
  background: var(--l2-ink); color: var(--l2-on-d); box-shadow: 0 30px 80px rgba(0, 0, 0, .18);
  text-align: left;
}
.l2-dm label { margin: 0; font-size: inherit; font-weight: inherit; color: inherit; }
.l2-dm input[type="radio"], .l2-dm input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.l2-dm h3, .l2-dm h4 { color: var(--l2-on-d); }
.dm-label { margin: 0 0 8px !important; padding: 0; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--l2-on-d-2); }
.dm-seg-wrap { margin: 0; padding: 0; border: 0; min-width: 0; }
.dm-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.dm-seg span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 10px; background: rgba(255, 255, 255, .06); font-size: .9375rem; font-weight: 600; cursor: pointer; transition: background .15s; }
.dm-seg-sm span { min-height: 34px; padding: 6px 12px; font-size: .875rem; }
.dm-seg label:hover span { background: rgba(255, 255, 255, .11); }
.dm-seg input:checked + span { background: var(--l2-cap); color: #111; }
.l2-dm input:focus-visible + span, .l2-dm input:focus-visible ~ .dm-item-score { outline: 2px solid var(--l2-cap); outline-offset: 2px; }
.dm-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.dm-switch > span { display: grid; gap: 1px; }
.dm-switch b { font-weight: 700; color: var(--l2-on-d); }
.dm-switch small { font-size: .8125rem; color: var(--l2-on-d-2); }
.dm-switch::before { content: ""; flex: none; width: 40px; height: 24px; border-radius: 999px; background: rgba(255, 255, 255, .16) radial-gradient(circle at 12px 50%, #fff 9px, transparent 10px); transition: background .2s; }
.dm-switch:has(input:checked)::before { background: var(--l2-cap) radial-gradient(circle at 28px 50%, #111 9px, transparent 10px); }
.dm-switch:has(input:focus-visible)::before { outline: 2px solid var(--l2-cap); outline-offset: 2px; }
.dm-foot { margin: 0 !important; display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--l2-on-d-2); }
.dm-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.l2-dm .muted { color: var(--l2-on-d-2); }

/* ---------- hook ---------- */
.dm-hook { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.dm-hook > .dm-seg-wrap { grid-column: 1; }
.dm-hook > .dm-switch { grid-column: 2; }
.dm-hook > .dm-hook-result, .dm-hook > .dm-foot { grid-column: 1 / -1; }
.dm-hook-result { display: none; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: clamp(18px, 3vw, 32px); align-items: start; }
.dm-hook:has(input[data-v="a"]:checked) .dm-hook-result[data-for="a"],
.dm-hook:has(input[data-v="b"]:checked) .dm-hook-result[data-for="b"],
.dm-hook:has(input[data-v="c"]:checked) .dm-hook-result[data-for="c"] { display: grid; }
.dm-hook:not(:has(input[data-img]:checked)) .is-img { display: none; }
.dm-hook-stage { display: grid; gap: 12px; }
.dm-hook-phone { border-radius: 22px; box-shadow: 0 0 0 4px #1b1d23; }
.dm-hook-ontext { position: absolute; left: 8%; right: 8%; top: 22%; z-index: 2; margin: 0; padding: .2em .4em; border-radius: .3em; background: var(--l2-cap); color: #111; font: 900 7cqw/1.15 var(--l2-display); text-align: center; }
.dm-hook-line { margin: 0 !important; font-size: .9375rem; line-height: 1.45; color: var(--l2-on-d); }
.dm-hook-body { display: grid; gap: 18px; min-width: 0; }
.dm-score-row { display: flex; align-items: center; gap: 20px; }
.dm-score { position: relative; width: 104px; flex: none; }
.dm-score svg { width: 100%; display: block; transform: rotate(-90deg); }
.dm-score circle { fill: none; stroke-width: 10; }
.dm-score-track { stroke: rgba(255, 255, 255, .1); }
.dm-score-bar { stroke-linecap: round; animation: dm-ring .7s var(--ease) both; }
.dm-score-bar.is-good { stroke: #3ad07a; }
.dm-score-bar.is-mid { stroke: var(--l2-cap); }
.dm-score-bar.is-bad { stroke: #ff5a4f; }
@keyframes dm-ring { from { stroke-dashoffset: 327; } }
.dm-score p { position: absolute; inset: 0; margin: 0; display: grid; place-content: center; grid-auto-flow: column; align-items: baseline; gap: 2px; }
.dm-score b { font: 800 2.2rem/1 var(--l2-display); letter-spacing: -.04em; }
.dm-score span { color: var(--l2-on-d-2); font-weight: 600; }
.dm-why { margin: 0 !important; font-size: 1.0625rem; line-height: 1.5; }
.dm-ruler svg { display: block; width: 100%; height: auto; overflow: visible; }
.dm-ruler-clip { fill: var(--l2-pr-video); }
.dm-ruler-tick { stroke: rgba(255, 255, 255, .35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dm-mk path { stroke: rgba(0, 0, 0, .4); stroke-width: .5; }
.dm-mk text { font: 700 9px/1 var(--font); text-anchor: middle; fill: #111; }
.dm-mk.is-red path { fill: #ff5a4f; }
.dm-mk.is-yellow path { fill: var(--l2-cap); }
.dm-mk.is-green path { fill: #3ad07a; }
.dm-ruler-lab { display: flex; justify-content: space-between; margin-top: 4px; font: 600 11px/1 var(--mono); color: var(--l2-on-d-2); }
.dm-notes { display: grid; gap: 8px; }
.dm-notes li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--l2-ink-2); font-size: .9375rem; line-height: 1.4; }
.dm-note-n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 800 .75rem/1 var(--font); color: #111; }
.dm-notes .is-red .dm-note-n { background: #ff5a4f; }
.dm-notes .is-yellow .dm-note-n { background: var(--l2-cap); }
.dm-notes .is-green .dm-note-n { background: #3ad07a; }
.dm-notes b { font-weight: 700; }
.dm-note-src { color: var(--l2-on-d-2); font-size: .8125rem; }
.dm-better { padding: 14px 16px; border-radius: 14px; background: rgba(255, 214, 10, .08); border: 1px solid rgba(255, 214, 10, .24); }
.dm-better ul { display: grid; gap: 6px; }
.dm-better li { font-weight: 600; line-height: 1.4; }

/* ---------- setki i rolki ---------- */
.dm-long { padding: 14px 16px; border-radius: 16px; background: var(--l2-ink-2); }
.dm-long-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: .875rem; font-weight: 600; color: var(--l2-on-d-2); }
.dm-long-head > span:first-child { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.dm-long-wave { display: block; width: 100%; height: 64px; }
.dm-wave-bar { fill: var(--l2-pr-audio); opacity: .75; }
.dm-seg-mark { stroke-width: 2; cursor: pointer; vector-effect: non-scaling-stroke; transition: fill .2s; }
.dm-seg-mark.is-setka { fill: rgba(58, 208, 122, .3); stroke: #3ad07a; }
.dm-seg-mark.is-rolka { fill: rgba(61, 139, 255, .3); stroke: var(--l2-pr-head); }
.dm-seg-mark.is-on.is-setka { fill: #3ad07a; }
.dm-seg-mark.is-on.is-rolka { fill: var(--l2-pr-head); }
.dm-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0 !important; font-size: .8125rem; }
.dm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dm-legend .is-setka::before, .dm-legend .is-rolka::before { content: ""; width: 12px; height: 12px; border-radius: 3px; }
.dm-legend .is-setka::before { background: #3ad07a; }
.dm-legend .is-rolka::before { background: var(--l2-pr-head); }
.dm-rolki-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(18px, 3vw, 32px); align-items: start; }
.dm-rolki-list { display: grid; gap: 12px; }
.dm-items { display: grid; gap: 6px; }
.dm-rolki:has(input[data-f="rolka"]:checked) .dm-items li.is-setka,
.dm-rolki:has(input[data-f="setka"]:checked) .dm-items li.is-rolka { display: none; }
.dm-item { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px; border-radius: 12px; background: var(--l2-ink-2); cursor: pointer; border: 1px solid transparent; transition: border-color .15s, background .15s; }
.dm-item:hover { background: var(--l2-ink-3); }
.dm-item:has(input:checked) { border-color: var(--l2-cap); background: var(--l2-ink-3); }
.dm-item-score { flex: none; padding: 4px 8px; border-radius: 999px; background: var(--l2-cap); color: #111; font: 800 .75rem/1.2 var(--font); }
.is-setka .dm-item-score { background: #3ad07a; }
.dm-item-main { display: grid; gap: 2px; min-width: 0; }
.dm-item-main b { font-weight: 700; line-height: 1.3; }
.dm-item-main small { color: var(--l2-on-d-2); font-size: .75rem; }
.dm-rolki-prev { display: none; gap: 14px; }
.dm-rolki:has(input[data-i="0"]:checked) .dm-rolki-prev[data-for="0"],
.dm-rolki:has(input[data-i="1"]:checked) .dm-rolki-prev[data-for="1"],
.dm-rolki:has(input[data-i="2"]:checked) .dm-rolki-prev[data-for="2"],
.dm-rolki:has(input[data-i="3"]:checked) .dm-rolki-prev[data-for="3"],
.dm-rolki:has(input[data-i="4"]:checked) .dm-rolki-prev[data-for="4"],
.dm-rolki:has(input[data-i="5"]:checked) .dm-rolki-prev[data-for="5"],
.dm-rolki:has(input[data-i="6"]:checked) .dm-rolki-prev[data-for="6"] { display: grid; }
.dm-crop { display: grid; grid-template-columns: minmax(0, 1.6fr) auto minmax(0, .62fr); align-items: center; gap: 12px; }
.dm-crop-wide { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; }
.dm-crop-box { position: absolute; top: 0; bottom: 0; left: 50%; width: 31.64%; transform: translateX(-50%); box-shadow: 0 0 0 999px rgba(0, 0, 0, .55); outline: 2px solid var(--l2-cap); }
.dm-crop-arrow { color: var(--l2-on-d-2); }
.dm-rolki-phone { border-radius: 16px; box-shadow: 0 0 0 3px #1b1d23; }
.dm-rolki-cap { top: 62%; font-size: 9cqw; -webkit-text-stroke: .1em #000; paint-order: stroke fill; }
.dm-rolki-cap .l2-w.is-on { background: transparent; color: var(--l2-cap); }
.dm-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.dm-facts div { padding: 10px 12px; border-radius: 12px; background: var(--l2-ink-2); }
.dm-facts dt { font-size: .75rem; color: var(--l2-on-d-2); }
.dm-facts dd { margin: 2px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.dm-hookfrom { margin: 0 !important; display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--l2-cap); }
.dm-desc { padding: 12px 14px; border-radius: 12px; background: var(--l2-ink-2); font-size: .9375rem; line-height: 1.45; }
.dm-desc p { margin: 0 !important; }

/* ---------- viral radar ---------- */
.dm-viral-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.dm-viral-mode { margin: 0 !important; display: block; max-width: 30em; line-height: 1.45; font-size: .875rem; color: var(--l2-on-d-2); }
.dm-viral-mode b { color: var(--l2-on-d); }
.dm-viral-niche { display: none; gap: 16px; }
.dm-viral:has(input[data-n="kawiarnie"]:checked) .dm-viral-niche[data-for="kawiarnie"],
.dm-viral:has(input[data-n="fitness"]:checked) .dm-viral-niche[data-for="fitness"],
.dm-viral:has(input[data-n="b2b"]:checked) .dm-viral-niche[data-for="b2b"] { display: grid; }
.dm-viral-progress { margin: 0 !important; display: block; font-size: .875rem; color: var(--l2-on-d-2); }
.dm-viral-progress .ico { color: #3ad07a; }
.dm-viral-progress b { color: var(--l2-on-d); font-variant-numeric: tabular-nums; }
.dm-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dm-video { display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: 16px; background: var(--l2-ink-2); }
.dm-video h4 { margin: 0; font-size: 1rem; line-height: 1.3; font-weight: 700; }
.dm-video p { margin: 0 !important; }
.dm-video-meta { font-size: .8125rem; color: var(--l2-on-d-2); }
.dm-video-meta b { color: var(--l2-cap); font-variant-numeric: tabular-nums; }
.dm-badge { display: inline-block; padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, .1); color: var(--l2-on-d); font-weight: 600; }
.dm-video-sub { font-size: .8125rem; color: var(--l2-on-d-2); }
.dm-video-hook { font-size: .9375rem; line-height: 1.4; }
.dm-chip { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: rgba(255, 214, 10, .14); color: var(--l2-cap); font-size: .75rem; font-weight: 700; }
.dm-beats { display: flex; flex-wrap: wrap; gap: 4px; counter-reset: beat; }
.dm-beats li { counter-increment: beat; padding: 3px 8px; border-radius: 6px; background: var(--l2-ink-3); font-size: .75rem; font-weight: 600; }
.dm-beats li::before { content: counter(beat) ". "; color: var(--l2-on-d-2); }
.dm-script { border-radius: 16px; background: var(--l2-ink-2); }
.dm-script summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 16px; cursor: pointer; list-style: none; }
.dm-script summary::-webkit-details-marker { display: none; }
.dm-script summary:focus-visible { outline: 2px solid var(--l2-cap); outline-offset: 2px; border-radius: 16px; }
.dm-script-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: 10px; background: var(--l2-cap); color: #111; font-weight: 700; }
.dm-script[open] .dm-script-btn { background: rgba(255, 255, 255, .1); color: var(--l2-on-d); }
.dm-script-topic { font-size: .875rem; color: var(--l2-on-d-2); }
.dm-script-body { display: grid; gap: 10px; padding: 0 16px 18px; }
.dm-script-body h4 { margin: 4px 0 0; font: 800 1.25rem/1.2 var(--l2-display); letter-spacing: -.02em; }
.dm-script-body p { margin: 0 !important; line-height: 1.5; }
.dm-hooks { display: grid; gap: 4px; padding-left: 1.4em !important; list-style: decimal !important; }
.dm-hooks li { line-height: 1.4; }
.dm-table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--l2-line-d); }
.dm-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .875rem; line-height: 1.4; }
.dm-table th { padding: 8px 10px; text-align: left; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--l2-on-d-2); background: var(--l2-ink-3); }
.dm-table td { padding: 8px 10px; border-top: 1px solid var(--l2-line-d); vertical-align: top; }

/* ---------- zakładki dem (strona główna) ---------- */
.l2-demo-tabs { display: flex; justify-content: center; margin-bottom: 20px; }
.l2-demo-tablist { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 4px; border-radius: 14px; background: var(--fill); max-width: 100%; }
.l2-demo-tablist [role="tab"] { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 11px; background: transparent; color: var(--text-2); font: 600 .9375rem/1.2 var(--font); cursor: pointer; }
.l2-demo-tablist [role="tab"]:hover { color: var(--text); }
.l2-demo-tablist [role="tab"][aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.l2-demo-tablist [role="tab"]:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.l2-demo-panelmore { display: flex; justify-content: center; margin-top: 18px; }
.l2-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--link); }

@media (max-width: 860px) {
  .dm-hook { grid-template-columns: minmax(0, 1fr); }
  .dm-hook > .dm-switch { grid-column: 1; }
  .dm-hook-result { grid-template-columns: minmax(0, 1fr); }
  .dm-hook-stage { grid-template-columns: 120px minmax(0, 1fr); align-items: center; }
  .dm-rolki-grid { grid-template-columns: minmax(0, 1fr); }
  .dm-videos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .dm-crop { grid-template-columns: minmax(0, 1fr) auto minmax(0, .5fr); gap: 8px; }
  .dm-facts div { padding: 8px 10px; }
  .dm-facts dd { font-size: .8125rem; }
  .dm-score-row { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .dm-score-bar { animation: none; }
}

/* =====================================================================
   Strony produktów (/produkty/<slug>, templates/product.php)
   ===================================================================== */
.pp-hero { position: relative; padding-block: clamp(28px, 4vw, 48px) clamp(64px, 8vw, 104px); background: radial-gradient(60% 70% at 50% 0%, rgba(255, 214, 10, .09), transparent 70%), var(--l2-ink); color: var(--l2-on-d); }
.pp-hero-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pp-switch { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 100%; margin-bottom: clamp(36px, 5vw, 56px); padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .07); }
.pp-switch a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border-radius: 11px; color: var(--l2-on-d-2); font-size: .875rem; font-weight: 600; text-decoration: none; }
.pp-switch a:hover { color: var(--l2-on-d); background: rgba(255, 255, 255, .06); }
.pp-switch a[aria-current="page"] { background: var(--l2-cap); color: #111; }
.pp-switch a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.pp-title { max-width: 18em; font-size: clamp(2.2rem, 4.8vw, 4rem); }
.pp-lead { margin-inline: auto; max-width: 38em; }
.pp-head { margin-bottom: clamp(28px, 4vw, 44px) !important; }
.pp-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pp-benefit { display: grid; gap: 10px; align-content: start; padding: clamp(24px, 3vw, 32px); border-radius: 24px; background: var(--l2-tile-2); }
.pp-benefit h3 { font-family: var(--l2-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.2; }
.pp-benefit p { color: var(--text-2); line-height: 1.55; }
.pp-benefit-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--l2-ink); color: var(--l2-cap); }
.pp-benefit-ico .ico { width: 24px; height: 24px; }
.pp-facts-sec { padding-block: clamp(56px, 7vw, 88px); }
.pp-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--separator); border-bottom: 1px solid var(--separator); }
.pp-facts li { display: grid; gap: 6px; align-content: start; padding: 24px 20px; }
.pp-facts li + li { border-left: 1px solid var(--separator); }
.pp-facts b { font-family: var(--l2-display); font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pp-facts span { color: var(--text-2); font-size: .9375rem; line-height: 1.45; }
.pp-plans { margin-top: 24px !important; }
.pp-plans a { font-weight: 600; }
.pp-others { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.pp-other { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: 24px; background: var(--l2-tile); color: var(--text); text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.pp-other:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 0, 0, .1); }
.pp-other:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.pp-other b { font-family: var(--l2-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; }
.pp-other > span:not(.pp-benefit-ico):not(.l2-link) { color: var(--text-2); line-height: 1.5; font-size: .9375rem; }
@media (max-width: 860px) {
  .pp-benefits { grid-template-columns: minmax(0, 1fr); }
  .pp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-facts li:nth-child(3) { border-left: 0; }
  .pp-facts li:nth-child(n+3) { border-top: 1px solid var(--separator); }
}
@media (max-width: 480px) {
  .pp-switch a span { font-size: .8125rem; }
  .pp-switch a { padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) { .pp-other { transition: none; } .pp-other:hover { transform: none; } }

/* produkty na stronie głównej */
.l2-hero .l2-display { font-size: clamp(2.4rem, 4.3vw, 3.9rem); }
.l2-anchor { display: block; position: relative; top: -80px; }
.l2-prods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(28px, 4vw, 44px); }
.l2-prod { display: grid; gap: 10px; align-content: start; grid-template-rows: auto auto 1fr auto; padding: clamp(24px, 3vw, 34px); border-radius: var(--l2-radius); background: var(--l2-tile-2); color: var(--text); text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.l2-prod:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0, 0, 0, .1); }
.l2-prod:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.l2-prod h3 { margin-top: 6px !important; font-family: var(--l2-display); font-weight: 800; font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: -.025em; }
.l2-prod p { color: var(--text-2); line-height: 1.55; max-width: 34em; }
.l2-prod-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 14px; border-top: 1px solid var(--separator); }
.l2-prod-plans { font-size: .8125rem; color: var(--text-2); }
.l2-demo-panel-wrap:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 6px; border-radius: var(--l2-radius); }
@media (max-width: 760px) { .l2-prods { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .l2-prod { transition: none; } .l2-prod:hover { transform: none; } }

@media (max-width: 1080px) {
  .l2-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .l2-hero-copy { max-width: 720px; }
  .l2-stage { max-width: 640px; width: 100%; margin-inline: auto; }
  .l2-split, .l2-split-rev { grid-template-columns: minmax(0, 1fr); }
  .l2-split-rev .l2-split-copy { order: 0; }
  .l2-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l2-facts li:nth-child(3) { padding-left: 0; border-left: 0; }
  .l2-facts li:nth-child(n+3) { border-top: 1px solid var(--l2-line-d); }
}
@media (max-width: 760px) {
  .l2-compare, .l2-tiles, .l2-steps { grid-template-columns: minmax(0, 1fr); }
  .l2-steps::before { display: none; }
  .l2-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; margin-inline: auto; }
  .l2-hookviz { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .l2-score { width: 104px; }
  .l2-marker:nth-of-type(2), .l2-marker:nth-of-type(3) { margin-left: 0; }
  .l2-reels { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .l2-reel { padding: 10px; border-radius: 14px; }
  .l2-reel em { display: none; }
}
@media (max-width: 600px) {
  .l2-stage { min-height: 0; display: grid; gap: 14px; justify-items: center; }
  .l2-phone-hero, .l2-tl { position: relative; inset: auto; }
  .l2-phone-hero { width: min(240px, 70%); left: 0; }
  .l2-plugin { display: none; }
  .l2-tl { width: 100%; }
  .l2-facts { grid-template-columns: minmax(0, 1fr); }
  .l2-facts li, .l2-facts li + li { padding: 18px 0; border-left: 0; }
  .l2-facts li + li { border-top: 1px solid var(--l2-line-d); }
  .l2-actions .l2-btn { flex: 1 1 100%; }
  .l2-seg label { padding: 8px 12px; }
  .l2-faq summary { font-size: 1.0625rem; }
  .l2-faq details p { padding-right: 0; }
  .l2-reel b { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .l2 *, .l2 *::before, .l2 *::after { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  .l2-mark, .l2-k-on, .l2-w.is-on { forced-color-adjust: none; }
}