/* Sigov - wspólny arkusz landingów segmentowych (/dla/<slug>/, ADR-0427).
   Wyciąg z szablonu jasnego landing/index.html (te same tokeny i klasy, bez radaru,
   karuzeli i sekcji, których strony segmentowe nie mają) + komponenty segmentowe na końcu.
   Zmieniasz wygląd wspólnych klas w index.html -> przenieś zmianę tutaj. */
:root { --paper: #ffffff; --paper-2: #f2f5f8; --ink: #0f1a26; --muted: #46566a; --dim: #65717d; --navy: #0b4da2; --navy-deep: #083a7c; --red: #d2233c; --line: #dbe2e9; --line-strong: #c3cdd8; --serif: Georgia, "Times New Roman", Times, serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace; --maxw: 1120px; --ease: cubic-bezier(.22, .61, .36, 1) }
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden }
a { color: inherit; text-decoration: none }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; text-wrap: balance; line-height: 1.12 }
p { margin: 0 }
::selection { background: var(--navy); color: #fff }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px) }
.eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--dim) }
.eyebrow .dot { color: var(--red) }
.accent { color: var(--navy) }
header.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); border-top: 3px solid var(--red); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s }
header.bar.scrolled { border-bottom-color: var(--line); box-shadow: 0 2px 14px rgba(15, 26, 38, .06) }
.bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 64px }
.brand { display: flex; align-items: center; gap: 11px }
.brand svg { display: block; width: 30px; height: 30px; flex: none }
.brand .wm { display: flex; flex-direction: column; line-height: 1 }
.brand .name { font-family: var(--mono); font-weight: 600; letter-spacing: .2em; font-size: 15px; color: var(--navy-deep) }
.brand .sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em; color: var(--dim); text-transform: uppercase; margin-top: 3px }
.btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 13px; letter-spacing: .04em; font-weight: 600; padding: 12px 22px; border-radius: 4px; border: 1px solid var(--navy); color: #fff; background: var(--navy); transition: background .2s, border-color .2s, box-shadow .25s; white-space: nowrap }
.btn:hover { background: var(--navy-deep); border-color: var(--navy-deep); box-shadow: 0 6px 20px -8px rgba(11, 77, 162, .5) }
.btn.ghost { background: transparent; color: var(--navy); border-color: var(--navy) }
.btn.ghost:hover { background: rgba(11, 77, 162, .07); box-shadow: none }
.bar .btn { padding: 9px 17px }
.bar-cta { display: flex; align-items: center; gap: clamp(10px, 2.5vw, 22px) }
.signin { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--muted); white-space: nowrap; transition: color .2s }
.signin:hover { color: var(--navy) }
/* ---------- menu paska: <details> bez JS (menu.js tylko domyka po kliknięciu) ----------
   >= 1100 px: Jak działa | Dla branż ▾ | Wiedza ▾ | Kontakt, po prawej Zaloguj się + 2 przyciski.
   < 1100 px (tablet i telefon): logo, [Próbka] (+ [Umów rozmowę] od 760 px) i ☰ z panelem. */
.bar-cta { margin-left: auto }
.navl { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 24px); flex: 1 1 auto; margin-left: clamp(8px, 2vw, 28px); font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .04em }
.navl > a, .navl summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); white-space: nowrap; cursor: pointer; list-style: none; transition: color .2s }
.navl > a:hover, .navl summary:hover, .navl details[open] > summary { color: var(--navy) }
.bar summary::-webkit-details-marker { display: none }
.navl summary::after, .menu-sub > summary::after { content: ""; flex: none; margin-left: 6px; border: 4px solid transparent; border-top-color: currentColor; border-bottom-width: 0; transition: transform .2s }
.navl details[open] > summary::after, .menu-sub[open] > summary::after { transform: rotate(180deg) }
.navl details { position: relative }
.menu-drop { position: absolute; top: calc(100% + 6px); left: -14px; z-index: 55; min-width: 230px; padding: 6px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: 0 10px 28px rgba(0, 0, 0, .14) }
.menu-drop-2 { display: grid; grid-template-columns: 1fr 1fr; width: 540px }
.menu-drop a, .menu-drop [aria-current] { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 4px; font-family: var(--sans); font-size: 14.5px; font-weight: 500; letter-spacing: 0; color: var(--muted) }
.menu-drop a:hover { background: var(--paper-2); color: var(--navy) }
.menu-drop [aria-current] { color: var(--navy); font-weight: 700 }
.menu-drop .menu-inna { grid-column: 1 / -1; margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 4px 4px; color: var(--navy) }
.bar a:focus-visible, .bar summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 4px }
.bar-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.menu-mobile { display: none }
@media (max-width: 1399.98px) {
  .bar .name-hide { display: none }
}
@media (max-width: 1099.98px) {
  .navl, .signin { display: none }
  .menu-mobile { display: block }
  .bar-inner { gap: 10px }
  .bar-cta { gap: 10px }
  .bar .btn { padding: 0 14px; min-height: 44px; font-size: 12.5px }
  .menu-mobile > summary { list-style: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; cursor: pointer; border-radius: 6px }
  .hb, .hb::before, .hb::after { display: block; width: 20px; height: 2px; background: var(--navy-deep); border-radius: 2px; content: "" }
  .hb { position: relative }
  .hb::before { position: absolute; top: -6px; left: 0 }
  .hb::after { position: absolute; top: 6px; left: 0 }
  .menu-mobile[open] .hb { background: transparent }
  .menu-mobile[open] .hb::before { top: 0; transform: rotate(45deg) }
  .menu-mobile[open] .hb::after { top: 0; transform: rotate(-45deg) }
  /* panel względem paska (position: fixed): cała szerokość, przewijany, gdy nie mieści (68 px = pasek 64 + kreski 3 i 1) */
  .menu-panel { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 68px); max-height: calc(100dvh - 68px); overflow-y: auto; padding: 14px clamp(20px, 5vw, 48px) 24px; background: var(--paper); border-bottom: 1px solid var(--line-strong); box-shadow: 0 14px 28px rgba(0, 0, 0, .14) }
  .menu-panel nav { display: flex; flex-direction: column }
  .menu-panel nav > a:not(.btn), .menu-sub > summary { display: flex; align-items: center; min-height: 48px; padding: 0 2px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--navy-deep); list-style: none; cursor: pointer }
  .menu-sub > summary::after { margin-left: auto }
  .menu-sub > div { display: flex; flex-direction: column; padding: 0 0 6px 14px; border-bottom: 1px solid var(--line) }
  .menu-sub > div a, .menu-sub > div [aria-current] { display: flex; align-items: center; min-height: 44px; font-family: var(--sans); font-size: 15px; color: var(--muted) }
  .menu-sub > div [aria-current] { color: var(--navy-deep); font-weight: 700 }
  .menu-sub > div .menu-inna { color: var(--navy-deep); font-weight: 600 }
  .menu-panel .btn { justify-content: center; min-height: 48px; margin-bottom: 8px; font-size: 14px }
}
/* telefon: w pasku [Próbka] + ☰; „Umów rozmowę” jest na górze panelu */
@media (max-width: 759.98px) {
  .bar-cta > .btn.ghost { display: none }
}
@media (min-width: 760px) {
  .menu-panel .btn { display: none }
}
/* bardzo wąski ekran: „Próbka sygnałów” skraca się do „Próbka” (pełna nazwa zostaje dla czytników ekranu) */
@media (max-width: 400px) {
  .bar-dluga { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
}
.micro-link { color: var(--navy); border-bottom: 1px solid rgba(11, 77, 162, .35); transition: border-color .2s }
.micro-link:hover { border-bottom-color: var(--navy) }
.hero { position: relative; padding: clamp(120px, 20vh, 190px) 0 clamp(72px, 12vh, 120px); overflow: hidden }
.hero .wrap { position: relative; z-index: 2 }
.hero-eyebrow { margin-bottom: 26px; opacity: 0; animation: rise .8s var(--ease) .1s forwards }
.hero h1 { font-size: clamp(38px, 6.2vw, 72px); max-width: 17ch; margin-bottom: 26px; color: var(--ink); opacity: 0; animation: rise .9s var(--ease) .22s forwards }
.hero h1 em { font-style: italic; color: var(--red) }
.hero .lede { font-size: clamp(17px, 2vw, 20px); color: var(--muted); max-width: 54ch; line-height: 1.55; margin-bottom: 40px; opacity: 0; animation: rise .9s var(--ease) .36s forwards }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; opacity: 0; animation: rise .9s var(--ease) .5s forwards }
.hero .micro { font-family: var(--mono); font-size: 12px; color: var(--dim); letter-spacing: .03em; margin-left: 4px }
@keyframes rise {from { opacity: 0; transform: translateY(18px) }  to { opacity: 1; transform: none }}
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper-2) }
.strip-inner { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: 14px clamp(18px, 3.5vw, 40px); padding: 22px 0; font-family: var(--mono); font-size: 13.5px; letter-spacing: .03em; color: var(--muted) }
@media (max-width:820px) {
  .strip-inner { flex-direction: column; align-items: center; gap: 10px }
  .strip-inner span { max-width: 34ch }
}
.strip-inner b { color: var(--navy-deep); font-weight: 700 }
section { position: relative }
section[id] { scroll-margin-top: 76px }
.band { padding: clamp(76px, 11vh, 128px) 0 }
.band+.band { border-top: 1px solid var(--line) }
.kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 22px }
.kicker .rule { height: 2px; width: 38px; background: var(--red) }
.h2 { font-size: clamp(28px, 4vw, 42px); max-width: 22ch; margin-bottom: 22px; color: var(--ink) }
.say { font-size: clamp(17px, 1.7vw, 19px); color: var(--muted); max-width: 60ch; line-height: 1.6 }
.roi-center { text-align: center; max-width: 62ch; margin: 0 auto }
.roi-center .h2 { margin-left: auto; margin-right: auto; max-width: none }
.roi-center .say { margin: 0 auto }
.roi-center .cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px }
.final { position: relative; overflow: hidden }
.final .panel { position: relative; border-radius: 8px; background: linear-gradient(155deg, var(--navy), var(--navy-deep) 75%); padding: clamp(40px, 6vw, 72px) clamp(28px, 5vw, 64px); text-align: center; overflow: hidden; color: #fff }
.final .panel .eyebrow { color: rgba(255, 255, 255, .70) }
.final .panel .h2 { margin: 0 auto 18px; color: #fff }
.final .panel .say { margin: 0 auto 34px; color: rgba(255, 255, 255, .82) }
.final .cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center }
.final .btn { background: #fff; border-color: #fff; color: var(--navy-deep) }
.final .btn:hover { background: #eef3fa; border-color: #eef3fa; box-shadow: 0 8px 26px -10px rgba(0, 0, 0, .4) }
.final .btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6) }
.final .btn.ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .1) }
.final .panel>div { position: relative; z-index: 2 }
/* stopka: cztery kolumny (Sigov, Dla branż, Wiedza, Kontakt) i pas prawny; te same klasy ma index.html (zmiana wyglądu = w obu miejscach) */
footer { border-top: 1px solid var(--line); padding: 48px 0 40px; background: var(--paper-2) }
.foot-cols { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2.4fr) minmax(0, .9fr) minmax(0, 1.2fr); gap: 32px }
.foot-h { margin: 0 0 10px; font-family: var(--mono); font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--dim) }
.foot-list { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 1.4; color: var(--muted) }
/* cel kliknięcia min. 24 px (WCAG 2.5.8) */
.foot-list a, .foot-list [aria-current] { display: inline-block; min-height: 24px; padding: 4px 0 }
.foot-list a:hover { color: var(--navy) }
.foot-list [aria-current] { color: var(--ink); font-weight: 600 }
/* 14 branż: dwie podkolumny, gdy kolumna jest dość szeroka, inaczej jedna */
.foot-branze { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); column-gap: 20px }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 28px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line) }
.foot-legal { font-family: var(--mono); font-size: 12px; line-height: 1.9; color: var(--dim); text-align: right }
.foot-legal a { display: inline-block; min-height: 24px }
.foot-legal a:hover { color: var(--navy) }
@media (max-width:900px) {
  .foot-cols { grid-template-columns: 1fr 1fr }
}
@media (max-width:560px) {
  .foot-cols { grid-template-columns: 1fr; gap: 26px }
  .foot-bottom { flex-direction: column; align-items: flex-start }
  .foot-legal { text-align: left }
}
@media (prefers-reduced-motion:reduce) {
  * { animation-duration: .001ms !important; transition: none !important }
  .hero-eyebrow, .hero h1, .hero .lede, .hero .cta-row { opacity: 1 !important; animation: none !important }
}
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease) }
.reveal.in { opacity: 1; transform: none }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 40px 0 20px }
.facts .f { border-top: 2px solid var(--navy); padding-top: 14px }
.facts .f b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.4vw, 40px); line-height: 1; color: var(--navy-deep); letter-spacing: -.02em }
.facts .f span { display: block; font-size: 14px; color: var(--muted); margin-top: 8px; line-height: 1.45 }
.facts .f strong { color: var(--ink); font-weight: 600 }
.faq { --fw: min(1440px, 100vw - 2 * clamp(20px, 5vw, 48px)); width: var(--fw); margin: 52px 0 0 calc(50% - var(--fw) / 2); display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px }
.faq .q { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: clamp(24px, 2.4vw, 36px) clamp(22px, 2.4vw, 36px) clamp(26px, 2.6vw, 40px); min-height: 100% }
.faq .q h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.22; margin-bottom: 14px; letter-spacing: -.01em }
.faq .q h3::before { content: "\201E"; color: var(--red) }
.faq .q h3::after { content: "\201D"; color: var(--red) }
.faq .q p { font-size: clamp(15.5px, 1.25vw, 18px); color: var(--muted); line-height: 1.6 }
.faq .q p b { color: var(--ink); font-weight: 600 }
@media (max-width: 820px) {
  .facts, .faq { grid-template-columns: 1fr }
  .faq { width: auto; margin-left: 0; margin-top: 36px; gap: 16px }
}
/* ---------- komponenty stron segmentowych ---------- */
/* ból odbiorcy: trzy krótkie scenariusze z jego branży */
.pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px }
.pain { border-top: 2px solid var(--red); padding-top: 14px }
.pain h3 { font-size: 22px; line-height: 1.25; margin-bottom: 8px }
.pain p { font-size: 15.5px; color: var(--muted); line-height: 1.55 }
.cost { margin-top: 34px; padding: 6px 0 6px 18px; border-left: 3px solid var(--red); font-size: clamp(18px, 1.8vw, 21px); line-height: 1.5; color: var(--ink); max-width: 62ch; font-family: var(--serif) }
/* przykłady sygnałów */
.samples { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 40px }
.sample { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--navy); border-radius: 6px; padding: 20px 22px 22px }
.sample .who { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim) }
.sample h3 { font-size: 21px; line-height: 1.3; margin: 10px 0 10px }
.sample .amt { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--navy-deep) }
.sample .stage { display: inline-block; margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--red); text-transform: uppercase }
.sample .move { margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: var(--muted) }
.sample .move b { color: var(--ink) }
.note { font-family: var(--mono); font-size: 12px; letter-spacing: .03em; color: var(--dim); margin-top: 22px; max-width: 90ch }
/* co zyskujesz (bez numeracji - to nie jest kolejność) */
.gains { padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 40px; list-style: none }
.gains li { border-top: 2px solid var(--navy); padding-top: 14px; font-size: 16px; color: var(--muted); line-height: 1.55 }
.gains li b { display: block; color: var(--ink); font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.25; margin-bottom: 6px }
/* jak to działa / jak zacząć (to JEST kolejność, stąd numery) */
.steps-n { padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; list-style: none; counter-reset: krok }
.steps-n li { counter-increment: krok; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 22px 22px 24px; font-size: 15.5px; color: var(--muted); line-height: 1.55 }
.steps-n li::before { content: counter(krok); display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; font-family: var(--mono); font-size: 13px; font-weight: 700; margin-bottom: 12px }
.steps-n li b { display: block; color: var(--ink); font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.25; margin-bottom: 6px }
.price-line { margin: 30px auto 0; max-width: 62ch; text-align: center; font-size: 17px; color: var(--muted); line-height: 1.6 }
.price-line b { color: var(--ink) }
@media (max-width: 820px) {
  .pains, .gains, .steps-n { grid-template-columns: 1fr }
  .hero .micro { margin-left: 0 }
}
/* hero ze zdjęciem branży (strony z polem foto w danych): tekst | zdjęcie z kartą sygnału */
.hero-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 56px); align-items: center }
.hero-split h1 { font-size: clamp(36px, 5vw, 60px) }
.foto { position: relative; margin: 0 }
.foto img { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 8px; box-shadow: 0 30px 70px -34px rgba(15, 26, 38, .55) }
.sig-card { position: absolute; left: -28px; bottom: 28px; max-width: 280px; background: #fff; border: 1px solid var(--line-strong); border-left: 3px solid var(--red); border-radius: 6px; padding: 12px 14px; box-shadow: 0 18px 40px -18px rgba(15, 26, 38, .45); font-size: 13.5px; line-height: 1.4; color: var(--ink) }
.sig-card .lbl { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: 4px }
.sig-card b { display: block; font-family: var(--mono); color: var(--navy-deep); margin-top: 6px }
.why-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 4vw, 56px); align-items: center }
@media (max-width: 820px) {
  .hero-split, .why-split { grid-template-columns: 1fr }
  .hero-split .foto { max-width: 420px }
  .sig-card { left: 12px; bottom: 12px; max-width: 240px }
}

/* wzór branżowy w tle strony (body[data-wzor]); delikatny, niebieski na bieli, nie konkuruje z treścią */
body[data-wzor="drogi"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22120%22 viewBox=%220 0 160 120%22%3E%3Cg fill=%22none%22 stroke=%22%230b4da2%22 stroke-opacity=%22.09%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M0 30h22M38 30h22M76 30h22M114 30h22M152 30h8%22/%3E%3Cpath d=%22M0 90h160%22 stroke-dasharray=%222 10%22/%3E%3Cpath d=%22M60 62l14-8-14-8M46 54h28%22/%3E%3C/g%3E%3C/svg%3E") }
body[data-wzor="wod-kan"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22140%22 height=%22140%22 viewBox=%220 0 140 140%22%3E%3Cg fill=%22none%22 stroke=%22%230b4da2%22 stroke-opacity=%22.09%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M0 40h50v60h90M50 40V0M95 100v40%22/%3E%3Ccircle cx=%2250%22 cy=%2240%22 r=%226%22/%3E%3Ccircle cx=%2295%22 cy=%22100%22 r=%226%22/%3E%3C/g%3E%3C/svg%3E") }
body[data-wzor="oze"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22 viewBox=%220 0 120 120%22%3E%3Cg fill=%22none%22 stroke=%22%230b4da2%22 stroke-opacity=%22.09%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 20h36v24H14zM14 32h36M26 20v24M38 20v24%22/%3E%3Cpath d=%22M74 76h36v24H74zM74 88h36M86 76v24M98 76v24%22/%3E%3Ccircle cx=%2292%22 cy=%2230%22 r=%227%22/%3E%3Cpath d=%22M92 16v4M92 40v4M78 30h4M102 30h4%22/%3E%3C/g%3E%3C/svg%3E") }
body[data-wzor="kubatura"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%2260%22 viewBox=%220 0 120 60%22%3E%3Cg fill=%22none%22 stroke=%22%230b4da2%22 stroke-opacity=%22.09%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M0 0h120M0 30h120M0 60h120M30 0v30M90 0v30M0 30v30M60 30v30M120 30v30%22/%3E%3C/g%3E%3C/svg%3E") }
body[data-wzor="projektanci"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22 viewBox=%220 0 120 120%22%3E%3Cg fill=%22none%22 stroke=%22%230b4da2%22 stroke-opacity=%22.09%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M0 0h120v120M60 0v120M0 60h120%22 stroke-opacity=%22.05%22/%3E%3Cpath d=%22M14 96h44M14 92v8M58 92v8%22/%3E%3Ccircle cx=%2292%22 cy=%2228%22 r=%2212%22/%3E%3Cpath d=%22M92 12v32M76 28h32%22/%3E%3C/g%3E%3C/svg%3E") }
body[data-wzor="doradcy"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22140%22 height=%22140%22 viewBox=%220 0 140 140%22%3E%3Cg fill=%22none%22 stroke=%22%230b4da2%22 stroke-opacity=%22.09%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 18h34l10 10v40H20zM54 18v10h10M28 38h26M28 48h26M28 58h16%22/%3E%3Cpath d=%22M90 96l8 8 16-18%22/%3E%3C/g%3E%3C/svg%3E") }
body[data-wzor="ochrona"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22104%22 height=%22120%22 viewBox=%220 0 104 120%22%3E%3Cg fill=%22none%22 stroke=%22%230b4da2%22 stroke-opacity=%22.09%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M26 15l26-15 26 15v30L52 60 26 45zM0 75l26-15 26 15v30L26 120 0 105zM52 75l26-15 26 15v30L78 120 52 105z%22/%3E%3C/g%3E%3C/svg%3E") }
body[data-wzor="sport"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22120%22 viewBox=%220 0 180 120%22%3E%3Cg fill=%22none%22 stroke=%22%230b4da2%22 stroke-opacity=%22.09%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 10h160v100H10zM90 10v100%22/%3E%3Ccircle cx=%2290%22 cy=%2260%22 r=%2218%22/%3E%3Cpath d=%22M10 40h22v40H10M170 40h-22v40h22%22/%3E%3C/g%3E%3C/svg%3E") }
body[data-wzor="oswietlenie"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22140%22 height=%22140%22 viewBox=%220 0 140 140%22%3E%3Cg fill=%22none%22 stroke=%22%230b4da2%22 stroke-opacity=%22.09%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M30 124V36q0-8 8-8h18M50 28l-2 6h16l-2-6M56 44v6M48 42l-3 5M64 42l3 5%22/%3E%3Cpath d=%22M0 124h140%22 stroke-dasharray=%222 10%22/%3E%3Ccircle cx=%22104%22 cy=%2278%22 r=%225%22/%3E%3Cpath d=%22M104 64v4M104 88v4M90 78h4M114 78h4%22/%3E%3C/g%3E%3C/svg%3E") }
body[data-wzor="odpady"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22140%22 height=%22140%22 viewBox=%220 0 140 140%22%3E%3Cg fill=%22none%22 stroke=%22%230b4da2%22 stroke-opacity=%22.077%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 36h36M22 36l4 44h20l4-44M32 30h8M30 50v20M42 50v20%22/%3E%3Ccircle cx=%2230%22 cy=%2286%22 r=%223%22/%3E%3Ccircle cx=%2244%22 cy=%2286%22 r=%223%22/%3E%3Cpath d=%22M96 78l10-16 10 16M120 86l-4 8h-20M92 94l-4-8%22/%3E%3C/g%3E%3C/svg%3E") }
body[data-wzor="zielen"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22140%22 height=%22140%22 viewBox=%220 0 140 140%22%3E%3Cg fill=%22none%22 stroke=%22%230b4da2%22 stroke-opacity=%22.09%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2238%22 cy=%2250%22 r=%2216%22/%3E%3Cpath d=%22M38 66v28M30 94h16%22/%3E%3Cpath d=%22M90 52q8-22 28-20q-2 20-28 20zM90 52l18-14%22/%3E%3Cpath d=%22M78 112l4-8 4 8M100 112l4-8 4 8%22/%3E%3C/g%3E%3C/svg%3E") }
body[data-wzor="transport"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22120%22 viewBox=%220 0 160 120%22%3E%3Cg fill=%22none%22 stroke=%22%230b4da2%22 stroke-opacity=%22.077%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 34h54a6 6 0 0 1 6 6v26H18zM18 48h60M32 34v14M46 34v14M60 34v14%22/%3E%3Ccircle cx=%2232%22 cy=%2270%22 r=%225%22/%3E%3Ccircle cx=%2264%22 cy=%2270%22 r=%225%22/%3E%3Cpath d=%22M122 104V64%22/%3E%3Ccircle cx=%22122%22 cy=%2256%22 r=%228%22/%3E%3Cpath d=%22M0 104h160%22 stroke-dasharray=%222 10%22/%3E%3C/g%3E%3C/svg%3E") }
body[data-wzor="mosty"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22110%22 viewBox=%220 0 120 110%22%3E%3Cg fill=%22none%22 stroke=%22%230b4da2%22 stroke-opacity=%22.09%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M0 44h120M10 80Q60 20 110 80M35 44v13M60 44v6M85 44v13M10 44v36M110 44v36%22/%3E%3Cpath d=%22M14 96h18M52 96h18M90 96h18%22/%3E%3C/g%3E%3C/svg%3E") }
body[data-wzor="zabytki"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22140%22 height=%22140%22 viewBox=%220 0 140 140%22%3E%3Cg fill=%22none%22 stroke=%22%230b4da2%22 stroke-opacity=%22.068%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 30h32M22 36h24M26 36v46M42 36v46M22 82h24M18 88h32M34 22l16 8H18z%22/%3E%3Cpath d=%22M90 108V72a14 14 0 0 1 28 0v36zM104 58v50M90 84h28%22/%3E%3C/g%3E%3C/svg%3E") }
/* zdjęcie przy sekcji „Znasz to?” i baner w „Co zyskujesz” */
.bol-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 4vw, 56px); align-items: center }
.banner { margin: 34px 0 0 }
.banner img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 8px }
@media (max-width: 820px) { .bol-split { grid-template-columns: 1fr } .bol-split .foto { max-width: 420px } }
/* Preferencja systemowa "więcej kontrastu" (WCAG 2.1 AA ma 4.5:1; tu ~7:1 dla osób, które o to proszą
   w systemie) - tylko nadpisanie tokenów, bez przycisku i bez JS. */
@media (prefers-contrast: more) {
  :root { --dim: #495561; --muted: #2f3b4a; --red: #ab001c }
  .final .panel .eyebrow { color: #fff }
}