/* ===== SIGMA czcionki lokalnie START ===== */
/* 1:1 jak Google Fonts (osobny blok na grubosc, latin + latin-ext); pliki w assets/fonts */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ===== SIGMA czcionki lokalnie END ===== */

  /* ===== PRELOADER z logo (06.09.2026) — blok generowany przez narzedzia/preloader.py ===== */
  #preloader { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; background: #09090B; opacity: 1; visibility: visible; transition: opacity .45s ease, visibility 0s linear .45s; }
  #preloader.pre-ukryty { opacity: 0; visibility: hidden; }
  html.preloader-trwa { overflow: hidden; }
  .pre-logo { width: 240px; height: auto; overflow: visible; }
  /* Logo po prostu sie pisze: sygnet (o + kropka) jako pierwszy, potem p-i-m-e-d-i-a, kazdy element od lewej (clip-path). */
  .pre-litera { clip-path: inset(0 100% 0 0); animation: pre-pisz .22s ease-out forwards; animation-delay: calc(.15s + var(--i) * .1s); }
  @keyframes pre-pisz { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  .pre-pasek { position: relative; width: 220px; height: 2px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
  .pre-pasek-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; background-image: linear-gradient(115deg, #09090B 0%, #09090B 10%, #BF1E28 100%); animation: pre-postep 1.5s cubic-bezier(.3, .6, .4, 1) .1s forwards; }
  @keyframes pre-postep { from { width: 0; } to { width: 92%; } }
  #preloader.pre-koniec .pre-pasek-fill { animation: none; width: 100%; transition: width .25s ease-out; }
  /* Animacje strony czekają, aż preloader zniknie (inaczej odegrałyby się pod spodem) */
  html.preloader-trwa .rt-char { animation-play-state: paused !important; }
  html.preloader-trwa .reveal.is-visible, html.preloader-trwa .reveal-blur.is-visible, html.preloader-trwa .reveal-blur-slide-up.is-visible { opacity: 0 !important; }
  html.preloader-trwa .kreska-anim::after { width: 0 !important; transition: none !important; }
  @media (max-width: 640px) { .pre-logo { width: 180px; } .pre-pasek { width: 160px; } }
  @media (prefers-reduced-motion: reduce) { .pre-litera, .pre-pasek-fill { animation: none !important; opacity: 1; clip-path: none; width: 100%; } }
  /* ===== koniec PRELOADER CSS ===== */
  .grecaptcha-badge { visibility: hidden; }
  html { scroll-behavior: smooth; }
  section[id], footer[id] { scroll-margin-top: 88px; }
  *, *::before, *::after { box-sizing: border-box; }
  html, body { max-width: 100%; overflow-x: clip; }
  body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  ::selection { background: #BF1E28; color: #FFFFFF; }

  .bg-brand { background-image: linear-gradient(115deg, #09090B 0%, #09090B 10%, #BF1E28 100%); }
  .text-brand { background-image: linear-gradient(120deg, #09090B 0%, #BF1E28 30%, #BF1E28 65%, #BF1E28 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .ring-brand:focus-visible { outline: 2px solid #BF1E28; outline-offset: 2px; }



  

  .cta-roll { --cta-roll-ease: cubic-bezier(0.2, 0.7, 0.2, 1); }
  .cta-roll:not(.bg-brand):hover,
  .cta-roll:not(.bg-brand):focus-visible {
    background-color: #09090B;
    border-color: #09090B;
    color: #FFFFFF;
  }
  .cta-roll__text {
    position: relative;
    display: block;
    overflow: hidden;
    height: 1.45em;
    line-height: 1.45em;
  }
  .cta-roll__text span {
    display: block;
    white-space: nowrap;
    transition: transform 0.4s var(--cta-roll-ease);
  }
  .cta-roll__clone {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(100%);
  }
  .cta-roll:hover .cta-roll__orig,
  .cta-roll:focus-visible .cta-roll__orig {
    transform: translateY(-100%);
  }
  .cta-roll:hover .cta-roll__clone,
  .cta-roll:focus-visible .cta-roll__clone {
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .cta-roll__text span { transition: none; }
    .cta-roll__clone { display: none; }
    .cta-roll:hover .cta-roll__orig,
    .cta-roll:focus-visible .cta-roll__orig,
    .cta-roll:hover .cta-roll__clone,
    .cta-roll:focus-visible .cta-roll__clone {
      transform: none;
    }
  }

  .text-outline { color: transparent; -webkit-text-stroke: 1px #76787C; }

  .glossary-term {
    position: relative;
    display: inline;
    border-bottom: 1px dotted #BF1E28;
    color: #09090B;
    cursor: help;
    text-decoration: none;
  }
  .glossary-term:focus-visible {
    outline: 2px solid #BF1E28;
    outline-offset: 3px;
  }
  .glossary-tooltip-portal {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 70;
    width: max-content;
    max-width: min(340px, calc(100vw - 32px));
    padding: 10px 12px;
    border: 1px solid #76787C;
    background: #FFFFFF;
    color: #09090B;
    box-shadow: 0 18px 40px -24px rgba(9, 9, 11, 0.45);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(var(--tooltip-x, 16px), var(--tooltip-y, 16px), 0);
    transition: opacity 0.16s ease, visibility 0.16s ease;
    white-space: normal;
  }
  .glossary-tooltip-portal.is-visible {
    opacity: 1;
    visibility: visible;
  }
  .glossary-tooltip-portal::before {
    content: "";
    position: absolute;
    left: var(--tooltip-arrow-x, 50%);
    top: 100%;
    width: 8px;
    height: 8px;
    border-right: 1px solid #76787C;
    border-bottom: 1px solid #76787C;
    background: #FFFFFF;
    transform: translate(-50%, -4px) rotate(45deg);
  }
  .glossary-tooltip-portal.is-below::before {
    top: 0;
    transform: translate(-50%, -4px) rotate(45deg);
  }

  /* cien jest wypalony w obrazkach - zaden filtr w przegladarce */
  .reveal.is-visible { will-change: auto; }
  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .marquee-track { animation: marquee 34s linear infinite; }
  .marquee-text { color: #09090B; }
  .marquee-text i { font-style: normal; color: #BF1E28; padding: 0 .06em; }
  @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

  /* Premium Scroll Reveal Animations */
  .reveal {
    opacity: 0;
    transition: opacity 1.6s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform, opacity;
  }
  
  .reveal-slide-up {
    transform: translateY(32px);
  }
  
  .reveal-slide-down {
    transform: translateY(-32px);
  }

  .reveal-slide-left {
    transform: translateX(32px);
  }

  .reveal-slide-right {
    transform: translateX(-32px);
  }

  .reveal.is-visible {
    opacity: 1;
    transform: translate(0, 0) !important;
  }

  /* Blur Reveal Animations */
  .reveal-blur {
    opacity: 0;
    filter: blur(12px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, filter;
  }
  .reveal-blur.is-visible {
    opacity: 1;
    filter: blur(0);
  }

  .reveal-blur-slide-up {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(24px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, filter, transform;
  }
  .reveal-blur-slide-up.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) !important;
  }

  /* Terminals that will be animated starts hidden */
  .terminal-animate .terminal-body > * {
    opacity: 0;
  }
  .terminal-animate .terminal-body > .terminal-cursor {
    opacity: 1 !important;
  }

  /* Transition delays for staggered animations */
  .delay-75  { transition-delay: 75ms; }
  .delay-100 { transition-delay: 100ms; }
  .delay-150 { transition-delay: 150ms; }
  .delay-200 { transition-delay: 200ms; }
  .delay-250 { transition-delay: 250ms; }
  .delay-300 { transition-delay: 300ms; }
  .delay-400 { transition-delay: 400ms; }
  .delay-500 { transition-delay: 500ms; }
  .delay-700 { transition-delay: 700ms; }

  /* Kreska przed nadtytułem: rozsuwa się od lewej, gdy wjedzie na ekran (jak podkreślenie w menu) — 06.09.2026.
     Animowana jest SZEROKOŚĆ paska w ::after (nie transform), żeby 1 px kreska była zawsze ostra i pełnej grubości. */
  .kreska-anim { position: relative; background: none; height: 2px !important; } /* !important, bo Tailwind (.h-px) ładuje się później. 2 px na życzenie klienta (06.09.2026) — wszystkie kreski jednakowe */
  .kreska-anim::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 0; background-image: linear-gradient(115deg, #09090B 0%, #09090B 10%, #BF1E28 100%); transition: width 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s; }
  .kreska-anim.is-visible::after { width: 100%; }
  @media (prefers-reduced-motion: reduce) { .kreska-anim::after { width: 100%; transition: none; } }

  /* Premium Hover Underline Animation (Uiverse.io inspired, customized to brand) */
  .hover-underline-link {
    position: relative;
    display: inline-block;
  }
  .hover-underline-link::after {
    content: "";
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: #BF1E28;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
  }
  .hover-underline-link:hover::after,
  a:hover > .hover-underline-link::after,
  .group:hover .hover-underline-link::after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }

  /* Custom accordion styling */
  .offer-row { transition: border-color 0.3s; }
  .offer-row .offer-toggle { cursor: pointer; outline: none; }

  /* Grid height transition */
  .offer-row .offer-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-in-out;
  }
  .offer-row.is-active .offer-content {
    grid-template-rows: 1fr;
  }

  /* Fade-in and slide inner wrapper */
  .offer-row .offer-content > div {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.22s ease-in-out, transform 0.22s ease-in-out;
  }
  .offer-row.is-active .offer-content > div {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease-in-out 0.05s, transform 0.3s ease-in-out 0.05s;
  }

  /* Hover: title fades on closed rows */
  .offer-row:not(.is-active) .offer-toggle:hover h3 { color: #76787C; }
  .offer-row:not(.is-active) .offer-toggle:hover .toggle-pill { border-color: #09090B; }

  /* Active state colors */
  .offer-row.is-active .offer-toggle h3 {
    background-image: linear-gradient(120deg, #09090B 0%, #BF1E28 30%, #BF1E28 65%, #BF1E28 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .offer-row.is-active .toggle-pill {
    background-image: linear-gradient(115deg, #09090B 0%, #09090B 10%, #BF1E28 100%);
    border-color: transparent; color: #FFFFFF;
  }

  /* Phone tab bar — aktywna vs nieaktywna */
  .phone-tab .tab-icon { color: #76787C; }
  .phone-tab .tab-label { color: #76787C; font-weight: 500; }
  .phone-tab:hover .tab-icon { background-color: #FFFFFF; color: #09090B; }
  .phone-tab.is-active .tab-icon {
    background-image: linear-gradient(115deg, #09090B 0%, #09090B 10%, #BF1E28 100%);
    color: #FFFFFF;
    box-shadow: 0 10px 18px -10px rgba(191, 30, 40, 0.9);
  }
  .phone-tab.is-active .tab-label { color: #09090B; font-weight: 600; }

  /* ── Terminal blocks (light & dark) ── */
  .dark-terminal { background: #09090B; border: 1px solid #09090B; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(9, 9, 11, 0.1), 0 2px 4px -1px rgba(9, 9, 11, 0.06); overflow: hidden; display: flex; flex-direction: column; }
  .dark-terminal .terminal-bar { display: flex; align-items: center; gap: 7px; padding: 10px 16px; background: #09090B; border-bottom: 1px solid #09090B; }
  .dark-terminal .terminal-dot { width: 11px; height: 11px; border-radius: 50%; }
  .dark-terminal .terminal-dot--red { background: #BF1E28; }
  .dark-terminal .terminal-dot--yellow { background: #BF1E28; }
  .dark-terminal .terminal-dot--green { background: #BF1E28; }
  .dark-terminal .terminal-body { padding: 20px 22px; font-family: 'Consolas', 'SF Mono', 'Fira Code', monospace; font-size: 13px; line-height: 1.75; color: #76787C; background: #09090B; flex: 1; }
  .dark-terminal .terminal-prompt { color: #BF1E28; font-weight: 600; }
  .dark-terminal .terminal-path { color: #76787C; }
  .dark-terminal .terminal-bling { color: #BF1E28; }
  .dark-terminal .terminal-comment { color: #09090B; }
  .dark-terminal .terminal-string { color: #76787C; }
  .dark-terminal .terminal-keyword { color: #76787C; font-weight: 600; }
  .dark-terminal .terminal-fn { color: #76787C; }

   .light-terminal { background: #FFFFFF; border: 1px solid #76787C; border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(9, 9, 11, 0.04), 0 8px 30px -12px rgba(9, 9, 11, 0.08); overflow: hidden; display: flex; flex-direction: column; }
   .light-terminal .terminal-bar { display: flex; align-items: center; gap: 7px; padding: 10px 16px; background: #FFFFFF; border-bottom: 1px solid #76787C; }
   .light-terminal .terminal-dot { width: 11px; height: 11px; border-radius: 50%; }
   .light-terminal .terminal-dot--red { background: #BF1E28; }
   .light-terminal .terminal-dot--yellow { background: #BF1E28; }
   .light-terminal .terminal-dot--green { background: #BF1E28; }
   .light-terminal .terminal-body { padding: 20px 22px; font-family: 'Consolas', 'SF Mono', 'Fira Code', monospace; font-size: 13px; line-height: 1.75; color: #09090B; background: #FFFFFF; flex: 1; overflow-x: auto; }
   .light-terminal .terminal-prompt { color: #BF1E28; font-weight: 600; }
   .light-terminal .terminal-path { color: #BF1E28; }
   .light-terminal .terminal-bling { color: #09090B; }
   .light-terminal .terminal-comment { color: #76787C; }
   .light-terminal .terminal-string { color: #BF1E28; }
   .light-terminal .terminal-keyword { color: #BF1E28; font-weight: 600; }
   .light-terminal .terminal-fn { color: #BF1E28; }
   .terminal-cursor { display: inline-block; width: 8px; height: 17px; background: #BF1E28; vertical-align: text-bottom; animation: termBlink 1s step-end infinite; }
   @keyframes termBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

   /* ── Editorial: vertical text & watermark ── */
   .vertical-label { writing-mode: vertical-lr; transform: rotate(180deg); letter-spacing: 0.5em; }
    .watermark-text { position: absolute; z-index: 0; font-family: 'Space Grotesk', sans-serif; font-weight: 700; pointer-events: none; user-select: none; white-space: nowrap; line-height: 0.85; opacity: 0; filter: blur(16px); transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1), filter 1.6s cubic-bezier(0.16, 1, 0.3, 1), transform 1.6s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity, filter; }

    /* Watermark text custom animations from top */
    .watermark-text.is-visible {
      opacity: 1;
      filter: blur(0);
    }

   /* Portfolio and general watermarks with translate-x-1/2 only */
   .watermark-text.-translate-x-1\/2:not(.-translate-y-1\/2) {
     transform: translate(-50%, -120px);
   }
   .watermark-text.-translate-x-1\/2:not(.-translate-y-1\/2).is-visible {
     transform: translate(-50%, 0);
   }
   
   /* Portfolio and general watermarks with both translates */
   .watermark-text.-translate-x-1\/2.-translate-y-1\/2 {
     transform: translate(-50%, calc(-50% - 120px));
   }
   .watermark-text.-translate-x-1\/2.-translate-y-1\/2.is-visible {
     transform: translate(-50%, -50%);
   }

   /* Watermarks without translate-x-1/2 (e.g. some service pages) */
   .watermark-text:not(.-translate-x-1\/2) {
     transform: translateY(-80px);
   }
   .watermark-text:not(.-translate-x-1\/2).is-visible {
     transform: translateY(0);
   }

   /* Service page specific watermarks (centered on mobile/desktop section bg-zinc-50) */
   .service-page section.bg-zinc-50 .watermark-text:not(.is-visible) {
     transform: translate(-50%, calc(-50% - 80px)) !important;
   }
   .service-page section.bg-zinc-50 .watermark-text.is-visible {
     transform: translate(-50%, -50%) !important;
   }

   /* Service pages: keep editorial layouts inside narrow mobile viewports */
   .service-page { overflow-x: clip; }
   .service-page .grid > * { min-width: 0; }
   .service-page .light-terminal,
   .service-page .dark-terminal { max-width: 100%; min-width: 0; }
   .service-page .terminal-body { max-width: 100%; min-width: 0; }
   .service-page .terminal-body > div { min-width: max-content; }
   .service-page section.bg-zinc-50 .watermark-text {
     left: 50% !important;
     right: auto !important;
     top: 50% !important;
     transform: translate(-50%, -50%) !important;
     font-size: clamp(6rem, 18vw, 12rem) !important;
   }

   @supports not (overflow: clip) {
     html, body,
     .service-page { overflow-x: hidden; }
   }

   @media (max-width: 767px) {
     .service-page .grid-cols-12 {
       grid-template-columns: minmax(0, 1fr);
     }
     .service-page .grid-cols-12 > * {
       grid-column: 1 / -1 !important;
     }
     .service-page h1,
     .service-page h2,
     .service-page h3,
     .service-page blockquote,
     .service-page p,
     .service-page a {
       overflow-wrap: anywhere;
     }
     .service-page h1 {
       font-size: clamp(2.25rem, 12vw, 2.9rem);
     }
     .service-page h2,
     .service-page h3 {
       font-size: clamp(2rem, 10vw, 2.4rem);
     }
     .service-page blockquote {
       padding-left: 1rem;
       font-size: clamp(1.75rem, 8vw, 2rem);
     }
     .service-page .terminal-bar {
       padding-left: 12px;
       padding-right: 12px;
     }
     .service-page .terminal-bar .ml-auto {
       max-width: calc(100% - 58px);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
     .service-page .terminal-body {
       padding: 16px;
       font-size: 12px;
     }
     .service-page section.bg-zinc-50 .watermark-text {
       font-size: clamp(5.6rem, 26vw, 7.25rem) !important;
     }

     /* Zapobieganie scrollowaniu i zmniejszenie rozmiaru terminali na telefonach */
     .light-terminal,
     .dark-terminal {
       max-width: 100% !important;
       min-width: 0 !important;
       margin-top: 1rem !important;
       margin-bottom: 1rem !important;
     }
     .light-terminal .terminal-bar,
     .dark-terminal .terminal-bar {
       padding: 8px 12px !important;
     }
     .light-terminal .terminal-body,
     .dark-terminal .terminal-body {
       max-width: 100% !important;
       min-width: 0 !important;
       overflow-x: hidden !important;
       white-space: pre-wrap !important;
       word-break: break-word !important;
       overflow-wrap: anywhere !important;
       padding: 10px 12px !important;
       font-size: 10px !important;
       line-height: 1.3 !important;
     }
     .light-terminal .terminal-body > div,
     .dark-terminal .terminal-body > div,
     .service-page .terminal-body > div,
     .oferta-page .terminal-body > div {
       min-width: 0 !important;
       margin: 0 !important;
       padding: 0 !important;
       white-space: pre-wrap !important;
       word-break: break-word !important;
       overflow-wrap: anywhere !important;
     }
     .light-terminal .terminal-body .whitespace-pre,
     .dark-terminal .terminal-body .whitespace-pre {
       white-space: pre-wrap !important;
     }
   }

  /* ===== Cookie Consent (inlined) ===== */
  .cookie-consent-hidden{display:none!important}
  .cookie-consent-banner{position:fixed;right:24px;bottom:24px;left:24px;z-index:1000;color:#09090B;pointer-events:none}
  .cookie-consent-banner__inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;max-width:1120px;margin:0 auto;padding:20px;border:1px solid #76787C;background:rgba(255, 255, 255, 0.96);box-shadow:0 24px 60px -30px rgba(9, 9, 11, 0.35);backdrop-filter:blur(18px);pointer-events:auto}
  .cookie-consent-banner__title,.cookie-consent-modal__title{margin:0;color:#09090B;font-size:18px;font-weight:650;line-height:1.25}
  .cookie-consent-banner__text,.cookie-consent-modal__text{margin:8px 0 0;color:#09090B;font-size:14px;line-height:1.6}
  .cookie-consent-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
  .cookie-consent-button{display:inline-flex;min-height:44px;align-items:center;justify-content:center;border:1px solid #09090B;border-radius:999px;padding:10px 18px;background:#FFFFFF;color:#09090B;font:inherit;font-size:14px;font-weight:600;line-height:1;cursor:pointer;transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease,box-shadow 160ms ease}
  .cookie-consent-button:hover{border-color:#BF1E28;color:#BF1E28}
  .cookie-consent-button:focus-visible,.cookie-consent-link:focus-visible,.cookie-consent-trigger:focus-visible{outline:2px solid #BF1E28;outline-offset:3px}
  .cookie-consent-button--primary,.cookie-consent-button--neutral{min-width:158px}
  .cookie-consent-button--primary{border-color:transparent;background:linear-gradient(115deg,#09090B 0%, #09090B 10%, #BF1E28 100%);color:#FFFFFF;box-shadow:0 14px 24px -16px rgba(191, 30, 40, 0.8)}
  .cookie-consent-button--primary:hover{border-color:transparent;background:linear-gradient(115deg,#09090B 0%, #09090B 10%, #BF1E28 100%);color:#FFFFFF;box-shadow:0 18px 30px -18px rgba(191, 30, 40, 0.95)}
  .cookie-consent-button--neutral{border-color:#BF1E28;background:#FFFFFF;color:#BF1E28;box-shadow:inset 0 0 0 1px rgba(191, 30, 40, 0.28)}
  .cookie-consent-button--neutral:hover{border-color:#BF1E28;background:#FFFFFF;color:#BF1E28}
  .cookie-consent-button--ghost{border-color:#76787C;color:#BF1E28}
  .cookie-consent-button--ghost:hover{border-color:#09090B;background:#FFFFFF;color:#BF1E28}
  .cookie-consent-modal{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(9, 9, 11, 0.52)}
  .cookie-consent-modal__dialog{width:min(100%,640px);max-height:calc(100vh - 48px);overflow:auto;border:1px solid #76787C;background:#FFFFFF;box-shadow:0 24px 70px -32px rgba(9, 9, 11, 0.45)}
  .cookie-consent-modal__header{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;padding:24px 24px 16px;border-bottom:1px solid #76787C}
  .cookie-consent-modal__close{display:inline-flex;width:38px;height:38px;flex:0 0 auto;align-items:center;justify-content:center;border:1px solid #76787C;border-radius:999px;background:#FFFFFF;color:#09090B;font-size:24px;line-height:1;cursor:pointer}
  .cookie-consent-modal__body{display:grid;gap:12px;padding:18px 24px 24px}
  .cookie-consent-option{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:flex-start;padding:16px;border:1px solid #76787C;background:#FFFFFF}
  .cookie-consent-option input{width:20px;height:20px;margin-top:2px;accent-color:#BF1E28}
  .cookie-consent-option__title{display:block;color:#09090B;font-size:15px;font-weight:650;line-height:1.3}
  .cookie-consent-option__text{display:block;margin-top:4px;color:#09090B;font-size:13px;line-height:1.55}
  .cookie-consent-modal__footer{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;padding:16px 24px 24px;border-top:1px solid #76787C}
  .cookie-consent-link{border:0;padding:0;background:transparent;color:inherit;font:inherit;text-decoration:none;cursor:pointer}
  .cookie-consent-link:hover{color:#09090B}
  .cookie-consent-trigger{position:fixed;left:18px;bottom:18px;z-index:999;display:inline-flex;width:46px;height:46px;align-items:center;justify-content:center;border:1px solid #76787C;border-radius:999px;background:#FFFFFF;color:#BF1E28;box-shadow:0 16px 36px -22px rgba(9, 9, 11, 0.5);cursor:pointer}
  .cookie-consent-trigger svg{width:20px;height:20px}
  body.cookie-consent-modal-open{overflow:hidden}
  @media(max-width:767px){
    .cookie-consent-banner{right:12px;bottom:12px;left:12px}
    .cookie-consent-banner__inner{grid-template-columns:minmax(0,1fr);padding:16px}
    .cookie-consent-actions,.cookie-consent-modal__footer{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
    .cookie-consent-button,.cookie-consent-button--primary,.cookie-consent-button--neutral{width:100%;min-width:0}
    .cookie-consent-modal{align-items:flex-start;padding:12px}
    .cookie-consent-modal__dialog{max-height:calc(100vh - 24px)}
    .cookie-consent-modal__header,.cookie-consent-modal__body,.cookie-consent-modal__footer{padding-right:16px;padding-left:16px}
  }
   /* ── menu: rozwijane "Uslugi" (najechanie na desktopie, klikniecie na dotyku) ─── */
   .menu-uslugi-lista { display: none; }
   .menu-uslugi:hover .menu-uslugi-lista,
   .menu-uslugi.is-open .menu-uslugi-lista { display: block; }
   .menu-uslugi:hover .menu-uslugi-strzalka,
   .menu-uslugi.is-open .menu-uslugi-strzalka { transform: rotate(180deg); }
   .menu-uslugi:hover .menu-uslugi-przycisk,
   .menu-uslugi.is-open .menu-uslugi-przycisk { color: #09090B; }
   /* ── "pisany" naglowek hero (rt = reveal text): litery wjezdzaja od dolu jedna po drugiej ── */
   .rt { display: block; }
   .rt-word { white-space: nowrap; }
   .rt-char, .rt-word { display: inline-block; }
   .rt-char { opacity: 0; transform: translateY(var(--rt-translate-y, 24px)); will-change: transform, opacity; }
   .rt.is-inview .rt-char { animation: rt-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
   @keyframes rt-rise { from { opacity: 0; transform: translateY(var(--rt-translate-y, 24px)); } to { opacity: 1; transform: translateY(0); } }
   @media (prefers-reduced-motion: reduce) { .rt-char { opacity: 1 !important; transform: none !important; animation: none !important; } }




*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#FFFFFF;--tw-ring-color:rgba(191, 30, 40, 0.5);--tw-ring-offset-shadow:0 0 rgba(9, 9, 11, 0);--tw-ring-shadow:0 0 rgba(9, 9, 11, 0);--tw-shadow:0 0 rgba(9, 9, 11, 0);--tw-shadow-colored:0 0 rgba(9, 9, 11, 0);--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#FFFFFF;--tw-ring-color:rgba(191, 30, 40, 0.5);--tw-ring-offset-shadow:0 0 rgba(9, 9, 11, 0);--tw-ring-shadow:0 0 rgba(9, 9, 11, 0);--tw-shadow:0 0 rgba(9, 9, 11, 0);--tw-shadow-colored:0 0 rgba(9, 9, 11, 0);--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #76787C;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:Consolas,SF Mono,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#76787C;opacity:1}input::placeholder,textarea::placeholder{color:#76787C;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.-left-1{left:-.25rem}.-left-12{left:-3rem}.-left-2{left:-.5rem}.-left-4{left:-1rem}.-top-10{top:-2.5rem}.-top-2{top:-.5rem}.-top-4{top:-1rem}.left-0{left:0}.left-1\/2{left:50%}.right-0{right:0}.top-0{top:0}.top-1\/2{top:50%}.top-28{top:7rem}.top-4{top:1rem}.top-6{top:1.5rem}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.order-1{order:1}.order-2{order:2}.col-span-1{grid-column:span 1/span 1}.col-span-12{grid-column:span 12/span 12}.col-span-4{grid-column:span 4/span 4}.mx-auto{margin-left:auto;margin-right:auto}.my-24{margin-bottom:6rem;margin-top:6rem}.-ml-px{margin-left:-1px}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.ml-auto{margin-left:auto}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-14{margin-top:3.5rem}.mt-16{margin-top:4rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-7{margin-top:1.75rem}.mt-8{margin-top:2rem}.mt-9{margin-top:2.25rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.aspect-\[21\/9\]{aspect-ratio:21/9}.aspect-video{aspect-ratio:16/9}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-9{height:2.25rem}.h-\[68px\]{height:68px}.h-auto{height:auto}.h-full{height:100%}.h-px{height:1px}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-9{width:2.25rem}.w-\[270px\]{width:270px}.w-\[285px\]{width:285px}.w-\[300px\]{width:300px}.w-\[80\%\]{width:80%}.w-full{width:100%}.w-px{width:1px}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-\[240px\]{max-width:240px}.max-w-full{max-width:100%}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-sm{max-width:24rem}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.origin-center{transform-origin:center}.-translate-x-1{--tw-translate-x:-0.25rem}.-translate-x-1,.-translate-x-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-y-1{--tw-translate-y:-0.25rem}.-translate-y-1,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.translate-x-1\/2{--tw-translate-x:50%}.scale-95,.translate-x-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-1\.5{gap:.375rem}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-14{gap:3.5rem}.gap-16{gap:4rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-9{gap:2.25rem}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.625rem*var(--tw-space-y-reverse));margin-top:calc(.625rem*(1 - var(--tw-space-y-reverse)))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.75rem*var(--tw-space-y-reverse));margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1.25rem*var(--tw-space-y-reverse));margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(2rem*var(--tw-space-y-reverse));margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)))}.space-y-9>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(2.25rem*var(--tw-space-y-reverse));margin-top:calc(2.25rem*(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.whitespace-pre{white-space:pre}.text-wrap{text-wrap:wrap}.text-balance{text-wrap:balance}.rounded-2xl{border-radius:1rem}.rounded-\[2rem\]{border-radius:2rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-l{border-left-width:1px}.border-l-2{border-left-width:2px}.border-t{border-top-width:1px}.border-transparent{border-color:transparent}.border-zinc-100{--tw-border-opacity:1;border-color:rgb(244 244 245/var(--tw-border-opacity,1))}.border-zinc-200{--tw-border-opacity:1;border-color:rgb(228 228 231/var(--tw-border-opacity,1))}.border-zinc-200\/80{border-color:hsla(240,6%,90%,.8)}.border-zinc-300{--tw-border-opacity:1;border-color:rgb(212 212 216/var(--tw-border-opacity,1))}.bg-\[\#e6003d\]\/5{background-color:rgba(191, 30, 40, 0.05)}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/80{background-color:hsla(0,0%,100%,.8)}.bg-zinc-100\/60{background-color:hsla(240,5%,96%,.6)}.bg-zinc-200{--tw-bg-opacity:1;background-color:rgb(228 228 231/var(--tw-bg-opacity,1))}.bg-zinc-50{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.from-\[\#e6003d\]\/5{--tw-gradient-from:rgba(191, 30, 40, 0.05) var(--tw-gradient-from-position);--tw-gradient-to:rgba(191, 30, 40, 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-\[\#e6003d\]\/10{--tw-gradient-to:rgba(191, 30, 40, 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(191, 30, 40, 0.1) var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-\[\#e6003d\]\/20{--tw-gradient-to:rgba(191, 30, 40, 0.2) var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.object-top{-o-object-position:top;object-position:top}.p-8{padding:2rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-7{padding-left:1.75rem;padding-right:1.75rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-10{padding-bottom:2.5rem;padding-top:2.5rem}.py-16{padding-bottom:4rem;padding-top:4rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-2\.5{padding-bottom:.625rem;padding-top:.625rem}.py-28{padding-bottom:7rem;padding-top:7rem}.py-3\.5{padding-bottom:.875rem;padding-top:.875rem}.py-4{padding-bottom:1rem;padding-top:1rem}.py-5{padding-bottom:1.25rem;padding-top:1.25rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.py-7{padding-bottom:1.75rem;padding-top:1.75rem}.pb-12{padding-bottom:3rem}.pb-16{padding-bottom:4rem}.pb-2{padding-bottom:.5rem}.pb-20{padding-bottom:5rem}.pb-24{padding-bottom:6rem}.pb-3{padding-bottom:.75rem}.pb-8{padding-bottom:2rem}.pb-9{padding-bottom:2.25rem}.pl-5{padding-left:1.25rem}.pr-6{padding-right:1.5rem}.pt-10{padding-top:2.5rem}.pt-12{padding-top:3rem}.pt-20{padding-top:5rem}.pt-24{padding-top:6rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-display{font-family:Space Grotesk,Inter,sans-serif}.font-mono{font-family:Consolas,SF Mono,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-5xl{font-size:3rem;line-height:1}.text-\[1\.25rem\]{font-size:1.25rem}.text-\[1\.35rem\]{font-size:1.35rem}.text-\[1\.5rem\]{font-size:1.5rem}.text-\[1\.85rem\]{font-size:1.85rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[12vw\]{font-size:12vw}.text-\[13\.5px\]{font-size:13.5px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.text-\[15vw\]{font-size:15vw}.text-\[16px\]{font-size:16px}.text-\[17px\]{font-size:17px}.text-\[18px\]{font-size:18px}.text-\[2\.2rem\]{font-size:2.2rem}.text-\[2\.4rem\]{font-size:2.4rem}.text-\[2\.5rem\]{font-size:2.5rem}.text-\[2\.6rem\]{font-size:2.6rem}.text-\[2\.8rem\]{font-size:2.8rem}.text-\[2\.9rem\]{font-size:2.9rem}.text-\[26vw\]{font-size:26vw}.text-\[2rem\]{font-size:2rem}.text-\[3\.4rem\]{font-size:3.4rem}.text-\[3\.5rem\]{font-size:3.5rem}.text-\[32vw\]{font-size:32vw}.text-\[3rem\]{font-size:3rem}.text-\[6rem\]{font-size:6rem}.text-\[7rem\]{font-size:7rem}.text-\[8rem\]{font-size:8rem}.text-\[9vw\]{font-size:9vw}.font-bold{font-weight:700}.font-light{font-weight:300}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-7{line-height:1.75rem}.leading-8{line-height:2rem}.leading-\[0\.88\]{line-height:.88}.leading-\[0\.92\]{line-height:.92}.leading-\[0\.95\]{line-height:.95}.leading-\[0\.98\]{line-height:.98}.leading-\[1\.04\]{line-height:1.04}.leading-\[1\.05\]{line-height:1.05}.leading-\[1\.06\]{line-height:1.06}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-\[0\.16em\]{letter-spacing:.16em}.tracking-\[0\.22em\]{letter-spacing:.22em}.tracking-\[0\.24em\]{letter-spacing:.24em}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-\[0\.3em\]{letter-spacing:.3em}.tracking-tight{letter-spacing:-.025em}.tracking-tighter{letter-spacing:-.05em}.text-\[\#e6003d\]\/10{color:rgba(191, 30, 40, 0.1)}.text-\[\#e6003d\]\/20{color:rgba(191, 30, 40, 0.2)}.text-transparent{color:transparent}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-zinc-100\/70{color:hsla(240,5%,96%,.7)}.text-zinc-100\/80{color:hsla(240,5%,96%,.8)}.text-zinc-200{--tw-text-opacity:1;color:rgb(228 228 231/var(--tw-text-opacity,1))}.text-zinc-300{--tw-text-opacity:1;color:rgb(212 212 216/var(--tw-text-opacity,1))}.text-zinc-400{--tw-text-opacity:1;color:rgb(161 161 170/var(--tw-text-opacity,1))}.text-zinc-500{--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity,1))}.text-zinc-600{--tw-text-opacity:1;color:rgb(82 82 91/var(--tw-text-opacity,1))}.text-zinc-700{--tw-text-opacity:1;color:rgb(63 63 70/var(--tw-text-opacity,1))}.text-zinc-900{--tw-text-opacity:1;color:rgb(24 24 27/var(--tw-text-opacity,1))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.shadow-\[0_10px_18px_-10px_rgba\(230\2c 0\2c 61\2c 0\.8\)\]{--tw-shadow:0 10px 18px -10px rgba(191, 30, 40, 0.8);--tw-shadow-colored:0 10px 18px -10px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 rgba(9, 9, 11, 0)),var(--tw-ring-shadow,0 0 rgba(9, 9, 11, 0)),var(--tw-shadow)}.shadow-\[0_14px_24px_-14px_rgba\(230\2c 0\2c 61\2c 0\.7\)\]{--tw-shadow:0 14px 24px -14px rgba(191, 30, 40, 0.7);--tw-shadow-colored:0 14px 24px -14px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 rgba(9, 9, 11, 0)),var(--tw-ring-shadow,0 0 rgba(9, 9, 11, 0)),var(--tw-shadow)}.shadow-\[0_14px_28px_-14px_rgba\(230\2c 0\2c 61\2c 0\.6\)\]{--tw-shadow:0 14px 28px -14px rgba(191, 30, 40, 0.6);--tw-shadow-colored:0 14px 28px -14px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 rgba(9, 9, 11, 0)),var(--tw-ring-shadow,0 0 rgba(9, 9, 11, 0)),var(--tw-shadow)}.shadow-\[0_18px_30px_-14px_rgba\(230\2c 0\2c 61\2c 0\.6\)\]{--tw-shadow:0 18px 30px -14px rgba(191, 30, 40, 0.6);--tw-shadow-colored:0 18px 30px -14px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 rgba(9, 9, 11, 0)),var(--tw-ring-shadow,0 0 rgba(9, 9, 11, 0)),var(--tw-shadow)}.outline{outline-style:solid}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-1,.ring-2{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 rgba(9, 9, 11, 0))}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-\[\#e6003d\]{--tw-ring-opacity:1;--tw-ring-color:rgb(230 0 61/var(--tw-ring-opacity,1))}.ring-transparent{--tw-ring-color:transparent}.ring-zinc-200{--tw-ring-opacity:1;--tw-ring-color:rgb(228 228 231/var(--tw-ring-opacity,1))}.ring-zinc-200\/50{--tw-ring-color:hsla(240,6%,90%,.5)}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.delay-100{transition-delay:.1s}.delay-150{transition-delay:.15s}.delay-200{transition-delay:.2s}.delay-300{transition-delay:.3s}.delay-500{transition-delay:.5s}.delay-700{transition-delay:.7s}.delay-75{transition-delay:75ms}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.duration-700{transition-duration:.7s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.first\:mt-32:first-child{margin-top:8rem}.first\:border-t-0:first-child{border-top-width:0}.hover\:scale-\[1\.04\]:hover{--tw-scale-x:1.04;--tw-scale-y:1.04;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-zinc-900:hover{--tw-border-opacity:1;border-color:rgb(24 24 27/var(--tw-border-opacity,1))}.hover\:text-\[\#e6003d\]:hover{--tw-text-opacity:1;color:rgb(230 0 61/var(--tw-text-opacity,1))}.hover\:text-zinc-700:hover{--tw-text-opacity:1;color:rgb(63 63 70/var(--tw-text-opacity,1))}.hover\:text-zinc-900:hover{--tw-text-opacity:1;color:rgb(24 24 27/var(--tw-text-opacity,1))}.hover\:text-zinc-950:hover{--tw-text-opacity:1;color:rgb(9 9 11/var(--tw-text-opacity,1))}.hover\:shadow-\[0_22px_40px_-12px_rgba\(230\2c 0\2c 61\2c 0\.7\)\]:hover{--tw-shadow:0 22px 40px -12px rgba(191, 30, 40, 0.7);--tw-shadow-colored:0 22px 40px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 rgba(9, 9, 11, 0)),var(--tw-ring-shadow,0 0 rgba(9, 9, 11, 0)),var(--tw-shadow)}.hover\:ring-zinc-300:hover{--tw-ring-opacity:1;--tw-ring-color:rgb(212 212 216/var(--tw-ring-opacity,1))}.hover\:brightness-\[1\.06\]:hover{--tw-brightness:brightness(1.06);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.group:hover .group-hover\:translate-x-0\.5{--tw-translate-x:0.125rem}.group:hover .group-hover\:translate-x-0\.5,.group:hover .group-hover\:translate-x-1{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:translate-x-1{--tw-translate-x:0.25rem}.group:hover .group-hover\:scale-\[1\.02\]{--tw-scale-x:1.02;--tw-scale-y:1.02}.group:hover .group-hover\:scale-\[1\.02\],.group:hover .group-hover\:scale-\[1\.04\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:scale-\[1\.04\]{--tw-scale-x:1.04;--tw-scale-y:1.04}.group:hover .group-hover\:bg-zinc-100\/60{background-color:hsla(240,5%,96%,.6)}.group:hover .group-hover\:text-\[\#e6003d\]{--tw-text-opacity:1;color:rgb(230 0 61/var(--tw-text-opacity,1))}.group.is-active .group-\[\.is-active\]\:rotate-180{--tw-rotate:180deg}.group.is-active .group-\[\.is-active\]\:rotate-180,.group.is-active .group-\[\.is-active\]\:scale-y-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group.is-active .group-\[\.is-active\]\:scale-y-0{--tw-scale-y:0}.group.is-active .group-\[\.is-active\]\:opacity-0{opacity:0}@media (min-width:640px){.sm\:flex{display:flex}.sm\:w-\[350px\]{width:350px}.sm\:w-\[375px\]{width:375px}.sm\:w-\[423px\]{width:423px}.sm\:w-fit{width:-moz-fit-content;width:fit-content}.sm\:max-w-\[280px\]{max-width:280px}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-\[120px_1fr\]{grid-template-columns:120px 1fr}.sm\:grid-cols-\[96px_1fr\]{grid-template-columns:96px 1fr}.sm\:flex-row{flex-direction:row}.sm\:gap-6{gap:1.5rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-6xl{font-size:3.75rem;line-height:1}.sm\:text-7xl{font-size:4.5rem;line-height:1}.sm\:text-\[3\.1rem\]{font-size:3.1rem}}@media (min-width:768px){.md\:col-span-4{grid-column:span 4/span 4}.md\:col-span-5{grid-column:span 5/span 5}.md\:col-span-7{grid-column:span 7/span 7}.md\:col-span-8{grid-column:span 8/span 8}.md\:my-32{margin-bottom:8rem;margin-top:8rem}.md\:mb-20{margin-bottom:5rem}.md\:mt-24{margin-top:6rem}.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:max-w-\[320px\]{max-width:320px}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-\[1\.1fr_1fr\]{grid-template-columns:1.1fr 1fr}.md\:grid-cols-\[1\.3fr_1fr\]{grid-template-columns:1.3fr 1fr}.md\:grid-cols-\[1\.5fr_1fr_1fr_1\.1fr\]{grid-template-columns:1.5fr 1fr 1fr 1.1fr}.md\:grid-cols-\[1fr_1\.12fr\]{grid-template-columns:1fr 1.12fr}.md\:items-end{align-items:flex-end}.md\:items-center{align-items:center}.md\:gap-10{gap:2.5rem}.md\:gap-16{gap:4rem}.md\:justify-self-end{justify-self:end}.md\:border-b-0{border-bottom-width:0}.md\:border-r{border-right-width:1px}.md\:border-zinc-200{--tw-border-opacity:1;border-color:rgb(228 228 231/var(--tw-border-opacity,1))}.md\:p-10{padding:2.5rem}.md\:px-10{padding-left:2.5rem;padding-right:2.5rem}.md\:px-8{padding-left:2rem;padding-right:2rem}.md\:py-10{padding-bottom:2.5rem;padding-top:2.5rem}.md\:py-12{padding-bottom:3rem;padding-top:3rem}.md\:py-20{padding-bottom:5rem;padding-top:5rem}.md\:py-24{padding-bottom:6rem;padding-top:6rem}.md\:py-36{padding-bottom:9rem;padding-top:9rem}.md\:py-40{padding-bottom:10rem;padding-top:10rem}.md\:py-9{padding-bottom:2.25rem;padding-top:2.25rem}.md\:pb-2{padding-bottom:.5rem}.md\:pb-24{padding-bottom:6rem}.md\:pb-28{padding-bottom:7rem}.md\:pb-32{padding-bottom:8rem}.md\:pl-8{padding-left:2rem}.md\:pl-\[calc\(13px\+2\.5rem\)\]{padding-left:calc(13px + 2.5rem)}.md\:pr-8{padding-right:2rem}.md\:pt-1{padding-top:.25rem}.md\:pt-24{padding-top:6rem}.md\:pt-28{padding-top:7rem}.md\:pt-32{padding-top:8rem}.md\:text-right{text-align:right}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-7xl{font-size:4.5rem;line-height:1}.md\:text-\[10vw\]{font-size:10vw}.md\:text-\[12rem\]{font-size:12rem}.md\:text-\[15px\]{font-size:15px}.md\:text-\[18vw\]{font-size:18vw}.md\:text-\[2\.8rem\]{font-size:2.8rem}.md\:text-\[26vw\]{font-size:26vw}.md\:text-\[3\.5rem\]{font-size:3.5rem}.md\:text-\[5vw\]{font-size:5vw}.md\:text-\[8rem\]{font-size:8rem}.md\:text-\[9rem\]{font-size:9rem}}@media (min-width:1024px){.lg\:order-1{order:1}.lg\:order-2{order:2}.lg\:col-span-1{grid-column:span 1/span 1}.lg\:col-span-4{grid-column:span 4/span 4}.lg\:col-span-7{grid-column:span 7/span 7}.lg\:flex{display:flex}.lg\:w-\[406px\]{width:406px}.lg\:w-\[440px\]{width:440px}.lg\:w-\[499px\]{width:499px}.lg\:max-w-\[360px\]{max-width:360px}.lg\:-translate-x-8{--tw-translate-x:-2rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-\[1\.15fr_0\.85fr\]{grid-template-columns:1.15fr .85fr}.lg\:grid-cols-\[1\.2fr_0\.8fr\]{grid-template-columns:1.2fr .8fr}.lg\:justify-end{justify-content:flex-end}.lg\:justify-center{justify-content:center}.lg\:gap-0{gap:0}.lg\:gap-10{gap:2.5rem}.lg\:gap-20{gap:5rem}.lg\:pb-16{padding-bottom:4rem}.lg\:pl-4{padding-left:1rem}.lg\:pr-12{padding-right:3rem}.lg\:text-\[3\.3rem\]{font-size:3.3rem}}@media (min-width:1280px){.xl\:text-\[16rem\]{font-size:16rem}.xl\:text-\[22rem\]{font-size:22rem}.xl\:text-\[24rem\]{font-size:24rem}}


  .sekcja-ciemna { background-color: #09090B !important; color: #FFFFFF; }
  .sekcja-ciemna .text-zinc-900 { color: #FFFFFF !important; }
  /* W hero (z animacja w tle) naglowek caly bialy; w pozostalych czarnych sekcjach gradient w naglowkach zostaje */
  #top h1 .text-brand { background-image: none; -webkit-background-clip: initial; background-clip: initial; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF; }
  .sekcja-ciemna .text-zinc-700,
  .sekcja-ciemna .text-zinc-600,
  .sekcja-ciemna .text-zinc-500 { color: #FFFFFF !important; }
  .sekcja-ciemna .text-zinc-400 { color: #76787C !important; }
  .sekcja-ciemna .text-zinc-300 { color: #76787C !important; }
  .sekcja-ciemna .border-zinc-200,
  .sekcja-ciemna .border-zinc-300,
  .sekcja-ciemna .md\:border-zinc-200 { border-color: #09090B !important; }
  .sekcja-ciemna .bg-zinc-200 { background-color: #09090B !important; }
  .sekcja-ciemna .bg-white { background-color: #09090B !important; }
  .sekcja-ciemna .ring-zinc-200\/50 { --tw-ring-color: #09090B !important; }
  .sekcja-ciemna .group:hover .bg-white { background-color: #09090B !important; }
  .sekcja-ciemna .hover\:text-zinc-900:hover,
  .sekcja-ciemna .hover\:text-zinc-700:hover { color: #FFFFFF !important; }
  .sekcja-ciemna .hover\:border-zinc-900:hover { border-color: #76787C !important; }
  /* Hero: drugi przycisk biały z czarnym napisem (06.09.2026) */
  #top .przycisk-bialy { background-color: #FFFFFF !important; border-color: #76787C !important; color: #09090B !important; }
  #top .przycisk-bialy:hover, #top .przycisk-bialy:focus-visible { background-color: #FFFFFF !important; border-color: #76787C !important; color: #09090B !important; }
  /* Menu na czarnym nagłówku: białe linki, kreska po najechaniu w czerwieni marki (jak w oryginale) */
  #site-header.sekcja-ciemna .text-zinc-500 { color: #FFFFFF !important; }
  /* Stopka wyższa (2 x +20%) */
  footer .sekcja-ciemna .py-16 { padding-top: 8.375rem; padding-bottom: 8.375rem; }
  footer .sekcja-ciemna .py-6 { padding-top: 2.625rem; padding-bottom: 2.625rem; }
  footer .sekcja-ciemna a:hover,
  footer .sekcja-ciemna button:hover { color: #BF1E28 !important; }
  /* Stopka: wszystkie napisy białe, link po najechaniu jasnoróżowy */
  footer .sekcja-ciemna,
  footer .sekcja-ciemna .text-zinc-400,
  footer .sekcja-ciemna .text-zinc-500,
  footer .sekcja-ciemna .text-zinc-600 { color: #FFFFFF !important; }
  /* Biała kreska nad paskiem z copyright */
  footer .sekcja-ciemna .stopka-pasek-linia { border-top-color: #76787C !important; } /* kreska nad copyright w szerokości treści (klient: „w marginesie") */



  #top h1 .hero-br, .br-lg { display: none; }
  @media (min-width: 1024px) { .br-lg { display: inline; } }
  /* "Jak zadbamy": większy nagłówek, mniejszy i przycięty zrzut, kolumny 1.1 : 1 */
  #dlaczego-my .obraz-wyniki { max-width: 520px; aspect-ratio: 1309 / 1320; }
  @media (min-width: 768px) { #dlaczego-my .siatka-dolna { grid-template-columns: 1.1fr 1fr; } }
  /* zrzut z Google przyklejony podczas przewijania (68 px nagłówek + 24 px luzu), aż do końca siatki */
  @media (min-width: 768px) { #dlaczego-my .obraz-lepki { position: sticky; top: 92px; align-self: start; } #dlaczego-my .punkt-lepki { min-height: 11rem; } }
  /* Nagłówek po lewej + akapit po prawej wyrównany do górnej linii nagłówka */
  @media (min-width: 768px) { .naglowek-akapit { align-items: start; } .naglowek-akapit .akapit-gora { padding-top: 0.55rem; } }
  @media (min-width: 1024px) {
    #top h1 { font-size: 4.95rem; text-wrap: normal; }
    #top h1 .hero-br { display: inline; }
  }
  @media (min-width: 1280px) { #top h1 { font-size: 5.75rem; } }
  #top > div { padding-top: 3rem !important; }
  /* naglowek hero "pisze sie" litera po literze po zniknieciu preloadera */
  #top h1 .lit { opacity: 0; animation: lit-pisz 0.25s ease-out forwards; animation-delay: calc(var(--i) * 42ms + 0.2s); }
  #top h1.napisane .lit { opacity: 1 !important; animation: none !important; }
  @keyframes lit-pisz { to { opacity: 1; } }
  #top h1 .kursor { display: inline-block; width: 0.06em; height: 0.85em; margin-left: 0.08em; vertical-align: -0.08em; background: #BF1E28; animation: kursor-mig 0.7s steps(1) infinite; }
  @keyframes kursor-mig { 50% { opacity: 0; } }
  html.preloader-trwa #top h1 .lit { animation-play-state: paused !important; }
  @media (prefers-reduced-motion: reduce) { #top h1 .lit { opacity: 1 !important; animation: none !important; } #top h1 .kursor { display: none; } }
  .hero-wyrownanie { display: none; }
  @media (min-width: 1024px) { #top .hero-wyrownanie { display: block; height: calc(3.9rem * 1.04); } }
  @media (min-width: 1280px) { #top .hero-wyrownanie { height: calc(4.5rem * 1.04); } }


  :root { --t1: 2.5rem; --t2: 1.375rem; --t3: 1rem; --sekcja: 4.5rem; }
  @media (min-width: 640px)  { :root { --t1: 3.5rem;  --t2: 1.625rem; --sekcja: 6rem; } }
  @media (min-width: 1024px) { :root { --t1: 4.5rem;  --t2: 1.75rem;  --sekcja: 8rem; } }
  body, .font-display, .font-sans, button, input, textarea, select { font-family: 'Space Grotesk', system-ui, sans-serif; }
  .gbp, .gbp * { font-family: Roboto, "Helvetica Neue", Arial, sans-serif; }   /* atrapa karty Google udaje Google, zostaje w Roboto */
  /* 1. naglowki: styl jak dotychczas (font-display, 600, text-6xl) - bez nadpisan */
  @media (min-width: 1024px) { #top > div { grid-template-columns: minmax(0, 1fr) auto; } }
  /* 2. wazniejsze elementy */
  section h3:not(.gbp h3):not(#oferta-lista h3), footer h3 { font-size: var(--t2) !important; font-weight: 500 !important; line-height: 1.15 !important; letter-spacing: -0.02em; }
  #oferta-lista .pozycja h3 { font-size: 1.75rem !important; font-weight: 600 !important; letter-spacing: -0.03em !important; line-height: 1.02 !important; }
  @media (min-width: 1024px) { #oferta-lista .pozycja h3 { font-size: 2.25rem !important; } }
  /* 3. wyjasnienia */
  section p:not(.gbp p), footer p, section li:not(.gbp li), #oferta-lista .pozycja p { font-size: var(--t3) !important; line-height: 1.55; }
  /* strona "kwadratowa": przyciski, kafle, pola i karty bez zaokraglen (wyjatek: awatary w opiniach) */
  [class*="rounded"], .cta-roll, button, input, textarea, .cookie-consent-button, .cookie-consent-banner, #opinie .strzalka, #wspolpraca > div > div > div, #wspolpraca [style*="border-radius"] { border-radius: 0 !important; }
  #opinie .awatar, #opinie .awatar i { border-radius: 50% !important; }
  /* pionowa kreska w naglowkach sekcji: niebieska; ramka karty "Wspolpraca": niebieska; szare linie miedzy sekcjami: brak */
  section .w-px, footer .w-px { display: none !important; }
  #proces .karta, #opinie .ocena, #korzysci .karta { border-width: 2px !important; }
  #korzysci .karta a { border-top-width: 2px; }
  #opinie .ocena .kreska { height: 2px; }
  #wspolpraca .ring-1 { box-shadow: 0 0 0 2px #BF1E28 !important; }
  main > section.border-t, footer#kontakt.border-t, footer > div.border-t { border-top: 0 !important; }
  /* odstepy: kazda sekcja dokladnie tyle samo u gory i u dolu */
  #oferta-lista > div, #korzysci > div, #proces > div, #liczby > div, #faq > div, #opinie > div, #zyskujesz > div, #wspolpraca > div,
  footer .relative.overflow-hidden > .relative, footer .border-t.sekcja-ciemna > div { padding-top: var(--sekcja) !important; padding-bottom: var(--sekcja) !important; }
  /* sasiednie sekcje o tym samym tle (oferta+korzysci biale, proces+liczby czarne, faq+opinie biale): po polowie, razem 128 */
  #oferta-lista > div, #proces > div, #faq > div { padding-bottom: calc(var(--sekcja) / 2) !important; }
  #korzysci > div, #liczby > div, #opinie > div { padding-top: calc(var(--sekcja) / 2) !important; }


  /* "Dlaczego my": trzy pelne karty (biala, granatowa, niebieska) polaczone w jeden prostokat, ikona u gory, bez numerow */
  #zyskujesz .kafle { border: 0 !important; gap: 1.25rem !important; }
  @media (min-width: 768px) { #zyskujesz .kafle { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; grid-auto-rows: 1fr; gap: 1.5rem !important; } #zyskujesz .kafle > div { grid-column: span 4; } #zyskujesz .kafle > div:nth-child(4) { grid-column: span 7; } #zyskujesz .kafle > div:nth-child(5) { grid-column: span 5; } }
  #zyskujesz .kafle > div:nth-child(4) { background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160' fill='none' stroke='%23162f70' stroke-width='2.5'><circle cx='40' cy='40' r='30'/><path d='M88 10h62v62H88z'/><path d='M96 64V16l46 48V16'/><path d='M10 150V88h62'/><path d='M72 150a62 62 0 0 0-62-62'/><path d='M88 88h62v62'/><path d='M150 150a62 62 0 0 1-62-62'/><path d='M10 10h60v60H10z'/><path d='M104 112l30 30'/></svg>") 0 0 / 160px 160px repeat, linear-gradient(90deg, #BF1E28 0%, #BF1E28 25%, #434549 100%); color: #FFFFFF; }
  #zyskujesz .kafle > div:nth-child(5) { background: #FFFFFF; color: #09090B; }
  #zyskujesz .kafle > div:nth-child(5) p { color: #09090B !important; }
  #zyskujesz .kafle > div:nth-child(4) > .flex > div { color: #FFFFFF !important; }
  #zyskujesz .kafle > div:nth-child(4) p { color: #FFFFFF !important; }
  #zyskujesz .kafle > div { padding: 2rem 2rem 2.25rem !important; border: 0 !important; background: #FFFFFF; color: #09090B; }
  #zyskujesz .kafle > div:nth-child(2) { background: #09090B; color: #FFFFFF; }
  #zyskujesz .kafle > div:nth-child(3) { background: #BF1E28; color: #FFFFFF; }
  #zyskujesz .kafle > div > .flex > span { display: none; }                                   /* numer 01/02/03 */
  #zyskujesz .kafle > div > .flex > div { width: 48px; height: 48px; border-radius: 0; background: transparent !important; box-shadow: none !important; justify-content: flex-start; color: #BF1E28 !important; }
  #zyskujesz .kafle > div > .flex > div svg { width: 36px; height: 36px; stroke-width: 1.2; }
  #zyskujesz .kafle h3 { margin-top: 1rem !important; }
  #zyskujesz .kafle p { margin-top: 0.5rem !important; }
  #zyskujesz .kafle > div:nth-child(2) > .flex > div, #zyskujesz .kafle > div:nth-child(3) > .flex > div { color: #FFFFFF !important; }
  #zyskujesz .kafle h3 { color: inherit !important; }
  #zyskujesz .kafle p { color: #09090B !important; }
  #zyskujesz .kafle > div:nth-child(2) p, #zyskujesz .kafle > div:nth-child(3) p { color: #FFFFFF !important; }


  /* hero: zdjecie lekko przyciemnione granatem, bez poswiat i bez ruchu */
  #top::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: rgba(9, 9, 11, 0.45) !important; animation: none !important; }
  #top::after { display: none !important; }
  /* tla sekcji: biala / szara na przemian, Proces i Liczby granatowe, stopka czarna */
  #korzysci, #opinie, #wspolpraca { background: #FFFFFF !important; }
  #oferta-lista, #faq, #zyskujesz, footer .relative.overflow-hidden { background: #FFFFFF !important; }
  #proces, #liczby { background: #09090B !important; color: #FFFFFF !important; }
  #proces .karta { background: #09090B !important; border: 0 !important; box-shadow: none !important; }
  #proces .text-brand, #liczby .text-brand { background-image: linear-gradient(120deg, #09090B 0%, #BF1E28 100%) !important; }
  #liczby .duza, #liczby .podpis, #liczby h2 { color: #FFFFFF !important; } #liczby .opis p { color: #FFFFFF !important; }
  #opinie .ocena { border-color: #09090B !important; }
  #korzysci .karta:not(.karta--niebieska):not(.karta--granat) { background: #FFFFFF; }
  #zyskujesz .kafle > div:first-child { border: 2px solid #BF1E28 !important; }
  #zyskujesz .kafle > div:nth-child(4) { background: linear-gradient(115deg, #09090B 0%, #BF1E28 100%) !important; }
  /* odstepy: 128 przy roznych tlach; tylko Proces+Liczby (oba granatowe) po polowie */
  #oferta-lista > div, #faq > div { padding-bottom: var(--sekcja) !important; }
  #korzysci > div, #opinie > div { padding-top: var(--sekcja) !important; }


  /* ===== SYSTEM TYPOGRAFII: szesc stopni na cala strone, zadnych wyjatkow =====
     60/600 naglowek sekcji | 24/500 podnaglowek | 16 tresc | 15 drobne | 11 nadtytul | 72 liczba */
  main h2, footer h2 { font-size: 2.6rem !important; font-weight: 600 !important; line-height: 0.98 !important; letter-spacing: -0.03em !important; text-transform: none !important; }
  @media (min-width: 640px) { main h2, footer h2 { font-size: 3.75rem !important; } }
  main h3, footer h3 { font-size: 1.25rem !important; font-weight: 500 !important; line-height: 1.25 !important; letter-spacing: -0.01em !important; text-transform: none !important; }
  @media (min-width: 1024px) { main h3, footer h3 { font-size: 1.5rem !important; } }
  main p, footer p { font-size: 16px !important; line-height: 1.6 !important; }
  #opinie .autor .rola, #komu .wiersz p, footer .stopka-pasek-linia { font-size: 15px !important; }
  #opinie .ocena { font-size: 4.5rem !important; }
  #oferta-lista .pozycja h3, #oferta-lista h3 { font-size: 1.5rem !important; font-weight: 500 !important; letter-spacing: -0.01em !important; }
  #opinie .opinia p { font-size: 16px !important; }
  /* ===== WYROWNANIE: naglowki i akapity w tych samych wierszach ===== */
  #proces .karta-foto h3, #proces .karta-biala h3 { display: flex; align-items: flex-start; min-height: calc(1.5rem * 1.25 * 2); margin: 0 !important; }
  #proces .karta-foto p, #proces .karta-biala p { margin-top: 1.5rem !important; }
  #etapy .etap h3 { display: flex; align-items: center; min-height: 38px; }
  #etapy .etap p { margin-top: 1rem !important; }
  /* ===== BEZ GRADIENTOW: plaskie kolory w napisach, przyciskach i kreskach ===== */
  .text-brand, #proces .text-brand, #etapy .text-brand, #opinie .text-brand, #komu .text-brand, #oferta-lista .text-brand, #top .text-brand { background-image: none !important; background-color: transparent !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: #BF1E28 !important; -webkit-text-fill-color: #BF1E28 !important; }
  .bg-brand, .cta-roll.bg-brand { background-image: none !important; background-color: #BF1E28 !important; }
  .kreska-anim::after { background-image: none !important; background-color: #BF1E28 !important; }
  #etapy .text-brand { color: #BF1E28 !important; -webkit-text-fill-color: #BF1E28 !important; }
  /* jednakowe odstepy we wszystkich sekcjach */
  main > section > div, footer > .border-t > div { padding-top: var(--sekcja) !important; padding-bottom: var(--sekcja) !important; }
  #top > div { padding-top: 0 !important; padding-bottom: var(--karta-nachodzi) !important; }
  /* sasiedzi o tym samym tle: polowa odstepu z kazdej strony */
  #oferta-lista > div, #opinie > div { padding-bottom: calc(var(--sekcja) / 2) !important; }
  #proces > div, #komu > div { padding-top: calc(var(--sekcja) / 2) !important; }


  /* rytm odstepow miedzy sekcjami na calej stronie */
  :root { --sekcja: 3.5rem; }
  @media (min-width: 640px)  { :root { --sekcja: 5rem; } }
  @media (min-width: 1024px) { :root { --sekcja: 7rem; } }
  /* pasek menu nad hero: przezroczysty, biale linki */
  #site-header.sekcja-ciemna { background-color: transparent !important; }
  /* przycisk w pasku menu */
  .cta-roll { padding: 0.7rem 1.4rem !important; font-size: 14px !important; }
  /* pelne menu dopiero od 1024 px (przy 768 pozycje i przycisk wchodzily na siebie) */
  @media (max-width: 1023.98px) {
    #menu-glowne, .naglowek-cta { display: none !important; }
    #nav-toggle { display: inline-flex !important; }
    #mobile-menu:not(.hidden) { display: block !important; }
  }
  @media (min-width: 1024px) {
    #mobile-menu { display: none !important; }
  }


/* ===== DEMO 4 (machala demo 4) – fundament sekcji: tokeny, typografia, przyciski, odslanianie =====
   Ten sam system co w Perfekcie (demo 3), zeby wszystkie demo byly "spod jednej reki".
   Sekcje uzywaja tych klas i zmiennych, a wlasne style pisza tylko pod swoim id (#pf-nazwa ...). */
:root {
  --pf-czern: #09090B;          /* UWAGA: nazwa historyczna - to GRANAT marki, nie czern */
  --pf-grafit: #BF1E28;         /* jasniejszy granat */
  --pf-grafit-2: #09090B;
  --pf-czarny: #09090B;         /* prawdziwa czern (sekcje czarne, stopka) */
  --pf-akcent: #BF1E28;         /* koral - tylko w detalach */
  --pf-akcent-h: #BF1E28;
  --pf-biel: #FFFFFF;
  --pf-mgla: #FFFFFF;
  --pf-linia: #76787C;
  --pf-linia-ciemna: #76787C;
  --pf-tekst: #09090B;
  --pf-tekst-2: #76787C;
  --pf-naglowek: #09090B;       /* naglowki na jasnym tle: czern; na ciemnym biel */
  --pf-granat-93: rgba(9, 9, 11, 0.93);   /* przyciemnienie zdjec pod granatem (metoda z Canvy) */
  --pf-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --pf-ease-out: cubic-bezier(0.16, 0.84, 0.28, 1);
}
.pf-kontener { max-width: 72rem; margin-inline: auto; padding-inline: 1.5rem; }
.pf-ciemna { background: var(--pf-czern); color: #FFFFFF; }

/* nadtytul: napis 14 px / 600 / 0,16 em, pod nim kreska 2 px w akcencie na cala dlugosc napisu,
   wjezdza od lewej, gdy sekcja wchodzi na ekran. Uzywac na <div> (silnik wymusza rozmiar na "section p"). */
.pf-nadtytul { display: block; position: relative; width: fit-content; max-width: 100%; margin: 0; padding-bottom: 0.35rem; font-size: 14px; font-weight: 600; line-height: 1.5; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pf-naglowek); }
.pf-ciemna .pf-nadtytul { color: #FFFFFF; }
.pf-nadtytul::after { content: ""; position: absolute; left: 0; right: 0.16em; bottom: 0; height: 2px; background: var(--pf-akcent); transform: scaleX(0); transform-origin: left center; transition: transform 0.7s ease-out 0.15s; }
.pf-widoczne .pf-nadtytul::after, .pf-nadtytul.pf-widoczne::after { transform: scaleX(1); }

/* naglowek sekcji: dwa pelne wiersze (.l2 = drugi wiersz), oba czarne na jasnym tle, oba biale na ciemnym.
   Bez kropek i znakow zapytania w akcencie. Selektor z main, bo silnik ma globalne "main h2 { ... !important }". */
main .pf-h2 { margin: 0; font-size: clamp(2.4rem, 4.6vw, 3.75rem) !important; line-height: 0.98 !important; letter-spacing: -0.03em !important; font-weight: 600 !important; color: var(--pf-naglowek) !important; -webkit-text-fill-color: var(--pf-naglowek) !important; text-wrap: balance; }
main .pf-h2 .l2 { display: block; color: inherit !important; -webkit-text-fill-color: inherit !important; }
main .pf-ciemna .pf-h2 { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
main .pf-ciemna .pf-h2 .l2 { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
main .pf-kropka { display: none !important; }
/* lead: silnik ma "section p:not(.gbp p) { font-size: var(--t3) !important }", stad drugi selektor z [id^="pf-"] */
main .pf-lead, [id^="pf-"] .pf-lead { font-size: 17px !important; line-height: 1.65 !important; color: var(--pf-tekst); max-width: 36rem; margin: 0; }
main .pf-ciemna .pf-lead, [id^="pf-"].pf-ciemna .pf-lead, [id^="pf-"] .pf-ciemna .pf-lead { color: #FFFFFF; }

/* przyciski: ostre rogi, koral; obrysowany wariant na drugi wybor.
   Wymiar jak "Umow rozmowe" w pasku menu i we wszystkich demo (klient 14.09.2026): 40 px wysokosci,
   napis 14 px / 500, interlinia 21 px, 20 px z bokow. */
.pf-przycisk { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 40px; padding: 9.5px 20px; border: 0; background: var(--pf-akcent); color: #FFFFFF !important; font: inherit; font-size: 14px; font-weight: 500; line-height: 21px; text-decoration: none; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; }
.pf-przycisk:hover, .pf-przycisk:focus-visible { background: var(--pf-akcent-h); }
.pf-przycisk svg { transition: transform 0.25s ease; }
.pf-przycisk:hover svg { transform: translateX(3px); }
.pf-przycisk--obrys { background: transparent; color: var(--pf-czern) !important; box-shadow: inset 0 0 0 1.5px var(--pf-czern); }
.pf-przycisk--obrys:hover, .pf-przycisk--obrys:focus-visible { background: var(--pf-czern); color: #FFFFFF !important; }
.pf-ciemna .pf-przycisk--obrys { color: #FFFFFF !important; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55); }
.pf-ciemna .pf-przycisk--obrys:hover, .pf-ciemna .pf-przycisk--obrys:focus-visible { background: #FFFFFF; color: var(--pf-czern) !important; }
[id^="pf-"] :focus-visible { outline: 2px solid var(--pf-akcent); outline-offset: 3px; }

/* odslanianie: element z [data-pf-reveal] dostaje .pf-widoczne (wspolny IntersectionObserver w _baza.js).
   Dzieci .pf-wjazd wjezdzaja od dolu po kolei - kolejnosc przez --pf-i. */
[data-pf-reveal] .pf-wjazd { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--pf-ease), transform 0.7s var(--pf-ease); transition-delay: calc(var(--pf-i, 0) * 110ms); }
.pf-widoczne .pf-wjazd { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .pf-nadtytul::after { transition: none; transform: scaleX(1); }
  [data-pf-reveal] .pf-wjazd { opacity: 1; transform: none; transition: none; }
}



/* ===== PERFEKT · 01 HERO – wersja powiekszona (ulepek, 14.09.2026) =====
   Uklad, zdjecie, gradient, znak i ruch bez zmian wzgledem hero z 13.09.2026.
   Zmiany wg uwag klienta: caly blok tekstu ok. 12% wiekszy (naglowek, lead, nadtytul,
   przyciski, wiersz z ocena i telefonem, krecacy sie znak); naglowek z 5 slow w dwoch
   wierszach ("Twoja ksiegowosc" / "dopieta na perfekt."), lead w dwoch wierszach od 1024 px.
   Nadtytul w stylu z fundamentu (kreska pod napisem) - tu tylko wiekszy rozmiar. */
#pf-hero {
  --hero-pasek: 68px;
  --hero-kolo: 114px;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin-top: calc(-1 * var(--hero-pasek));
  padding-top: var(--hero-pasek);
  background: var(--pf-czern);
  color: #FFFFFF;
}
/* zdjecie */
#pf-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("assets/10e47b42f877aa63d5a0.webp") center center / cover no-repeat var(--pf-grafit);
}
/* przyciemnienie: ponizej 1024 px ciemna jest cala gora (tam siedzi tekst i menu),
   zdjecie wychodzi dopiero nizej */
#pf-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(9, 9, 11, 0.97) 0%,
    rgba(9, 9, 11, 0.95) 35%,
    rgba(9, 9, 11, 0.92) 55%,
    rgba(9, 9, 11, 0.82) 70%,
    rgba(9, 9, 11, 0.55) 85%,
    rgba(9, 9, 11, 0.35) 100%);
}

/* silnik daje bezposredniemu div-owi sekcji pionowy odstep - hero liczy odstepy sam */
#pf-hero > div { padding-top: 0 !important; padding-bottom: 0 !important; }
#pf-hero .hero-plansza { position: relative; z-index: 1; flex: 1 0 auto; display: flex; align-items: flex-start; }
/* ponizej 1024 px znak stoi w prawym dolnym rogu pod tekstem: dolny odstep = znak + zapas,
   zeby powiekszony tekst (np. telefon na ekranach 390-414 px) nie wchodzil pod znak */
#pf-hero .hero-tekst {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding: 2.5rem 1.5rem calc(var(--hero-kolo) + 3.5rem);
}
/* nadtytul: wyglad z fundamentu (kreska 2 px pod napisem). Rozmiar +12% od 560 px;
   na telefonie zostaje 14 px z fundamentu, zeby napis miescil sie w jednym wierszu
   (przy 15,7 px zawijalby sie juz na ekranach 390-414 px); "Piekary Slaskie" trzyma
   .hero-razem, wiec przy zawinieciu na 375 px nie zostaje samo "Slaskie" */

#pf-hero .hero-tytul {
  margin: 1.7rem 0 0;
  max-width: 11.5em;
  font-family: inherit;
  font-size: clamp(2.9rem, 5.6vw, 5.15rem) !important;
  font-weight: 600 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.035em !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
/* dwa wiersze naglowka ustawione na sztywno; na waskim ekranie wiersz sam sie zawija */
#pf-hero .hero-tytul-w { display: block; text-wrap: balance; }
/* maska slowa: padding + ujemny margines powiekszaja okno o ogonki i akcenty (ę, ś, ć, ó),
   a linia tekstu zostaje dokladnie tam, gdzie bez maski */
#pf-hero .hero-slowo {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  padding: 0.12em 0.06em 0.22em;
  margin: -0.12em -0.06em -0.22em;
}
#pf-hero .hero-slowo-in { display: inline-block; }
/* "na perfekt." zawsze razem - bez sierotki na koncu wiersza i bez kropki w nowym wierszu */
#pf-hero .hero-razem { white-space: nowrap; }
#pf-hero .hero-kropka { display: inline-block; transform-origin: 57% 77%; }   /* srodek glifu "." */

/* silnik: "section p" i "main p" z !important - lead trzyma rozmiar z fundamentu, +12% */
#pf-hero .hero-lead {
  margin: 1.7rem 0 0;
  max-width: 38rem;
  font-size: 19px !important;
  line-height: 1.65 !important;
  color: #FFFFFF;
}

#pf-hero .hero-akcje { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.85rem; margin-top: 2.5rem; }
/* przyciski z fundamentu powiekszone o ok. 12%: 48 -> 54 px wysokosci, 15 -> 16,8 px napisu */
#pf-hero .hero-akcje .pf-przycisk {
  white-space: nowrap;
  min-height: 54px;
  padding: 0 1.7rem;
  gap: 0.7rem;
  font-size: 16.8px;
}

/* wiersz z ocena i telefonem: cienka linia u gory; kropka-separator przy telefonie
   znika, gdy telefon zawinie sie do nowego wiersza (wypada poza okno wiersza) */
#pf-hero .hero-info { margin-top: 2.8rem; padding-top: 1.4rem; border-top: 1px solid var(--pf-linia-ciemna); max-width: 38rem; }
#pf-hero .hero-info-rzad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.95rem;
  row-gap: 0.4rem;
  margin: -6px;
  padding: 6px;
  overflow: hidden;
  font-size: 15.7px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #FFFFFF;
}
#pf-hero .hero-info-el { position: relative; }
#pf-hero .hero-ocena-nr { font-weight: 600; color: #FFFFFF; }
#pf-hero .hero-sep { position: absolute; left: -1.07rem; top: 0; color: #76787C; }
#pf-hero .hero-tel {
  color: #FFFFFF;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  padding-bottom: 2px;
  background: linear-gradient(var(--pf-akcent), var(--pf-akcent)) 0 100% / 0 1px no-repeat;
  transition: background-size 0.35s var(--pf-ease);
}
#pf-hero .hero-tel:hover, #pf-hero .hero-tel:focus-visible { background-size: 100% 1px; }

/* --- krecacy sie znak: nazwa na okregu (rozmiar liter rosnie razem ze znakiem) --- */
#pf-hero .hero-znak {
  position: absolute;
  z-index: 2;
  right: 1.25rem;
  bottom: 1.5rem;
  width: var(--hero-kolo);
  height: var(--hero-kolo);
  pointer-events: none;
}
#pf-hero .hero-kolo { display: block; width: 100%; height: 100%; overflow: visible; }
#pf-hero .hero-kolo-obrot { transform-origin: 100px 100px; animation: pf-hero-obrot 26s linear infinite; }
#pf-hero .hero-kolo-tekst {
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 2.5px;
  fill: #FFFFFF;
}
@keyframes pf-hero-obrot { to { transform: rotate(360deg); } }

@media (min-width: 560px) {
  #pf-hero .pf-nadtytul { font-size: 15.7px; }
  #pf-hero .hero-akcje { display: flex; flex-wrap: wrap; }
}

@media (min-width: 768px) {
  #pf-hero { --hero-kolo: 134px; }
  #pf-hero .hero-znak { right: 2rem; bottom: 2.5rem; }
}

/* --- od 1024 px: gradient z lewej, tekst na dole po lewej, znak na dole po prawej --- */
@media (min-width: 1024px) {
  #pf-hero { --hero-kolo: clamp(152px, 15.2vw, 234px); }
  #pf-hero::after {
    background: linear-gradient(98deg,
      rgba(9, 9, 11, 0.97) 0%,
      rgba(9, 9, 11, 0.965) 22%,
      rgba(9, 9, 11, 0.955) 40%,
      rgba(9, 9, 11, 0.94) 54%,
      rgba(9, 9, 11, 0.9) 64%,
      rgba(9, 9, 11, 0.81) 71%,
      rgba(9, 9, 11, 0.64) 77%,
      rgba(9, 9, 11, 0.42) 82%,
      rgba(9, 9, 11, 0.21) 86%,
      rgba(9, 9, 11, 0.07) 89%,
      rgba(9, 9, 11, 0) 92%);
  }
  #pf-hero .hero-plansza { align-items: flex-end; }
  /* tekst do lewej krawedzi kontenera strony (72rem + 1,5rem wciecia), z miejscem na znak */
  #pf-hero .hero-tekst { padding: 3.5rem calc(var(--hero-kolo) + 4rem) clamp(3rem, 8vh, 5.5rem) 1.5rem; }
  #pf-hero .hero-tytul-w { white-space: nowrap; }
  #pf-hero .hero-znak { right: max(1.5rem, calc(50% - 34.5rem)); bottom: clamp(3rem, 8vh, 5.5rem); }
}
/* 1024-1279 px: tekst konczy sie dalej w prawo, wiec przyciemnienie trzyma sie dluzej */
@media (min-width: 1024px) and (max-width: 1279px) {
  #pf-hero::after {
    background: linear-gradient(98deg,
      rgba(9, 9, 11, 0.97) 0%,
      rgba(9, 9, 11, 0.955) 40%,
      rgba(9, 9, 11, 0.9) 70%,
      rgba(9, 9, 11, 0.84) 82%,
      rgba(9, 9, 11, 0.55) 90%,
      rgba(9, 9, 11, 0.18) 96%,
      rgba(9, 9, 11, 0) 100%);
  }
}

/* --- ruch na wejscie (tylko z JS; start dodaje skrypt po zaladowaniu) --- */
#pf-hero.hero-js .hero-slowo-in { transform: translateY(130%); }
#pf-hero.hero-start .hero-slowo-in {
  transform: none;
  transition: transform 0.95s var(--pf-ease-out);
  transition-delay: calc(0.1s + var(--hero-i, 0) * 60ms);
}
#pf-hero.hero-js .hero-kropka { transform: scale(0); }
#pf-hero.hero-start .hero-kropka { animation: pf-hero-pyk 0.5s var(--pf-ease) 0.9s both; }

#pf-hero.hero-js .hero-wjazd { opacity: 0; transform: translateY(18px); }
#pf-hero.hero-start .hero-wjazd {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--pf-ease), transform 0.7s var(--pf-ease);
  transition-delay: calc(0.6s + var(--hero-w, 0) * 110ms);
}
#pf-hero.hero-js .hero-znak { opacity: 0; transform: scale(0.92); }
#pf-hero.hero-start .hero-znak {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--pf-ease) 0.95s, transform 0.9s var(--pf-ease-out) 0.95s;
}

@keyframes pf-hero-pyk {
  0% { transform: scale(0); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ograniczony ruch: od razu stan koncowy, znak stoi */
@media (prefers-reduced-motion: reduce) {
  #pf-hero .hero-slowo-in,
  #pf-hero .hero-kropka,
  #pf-hero .hero-wjazd,
  #pf-hero .hero-znak { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  #pf-hero .hero-kolo-obrot { animation: none !important; }
  #pf-hero .hero-tel { transition: none; }
}


/* ===== DEMO 4 · 02 ZAKRES USLUG =====
   Tlo biale. Naglowek dzielony: z lewej nadtytul + dwuwierszowy .pf-h2, z prawej lead
   wyrownany do ostatniej linii naglowka (od 1024 px). Pod spodem 6 zamknietych kafli:
   5 uslug na mgle i szosty kafel w granacie z przyciskiem przyklejonym do dolu.
   Siatka: 1 kolumna (telefon), 2 kolumny (640-1023), 3 kolumny (od 1024).
   Wersja 2 (14.09.2026, Mateusz: "kafelki szersze niz wyzsze"): w kaflu uslugi zostaja ikona,
   nazwa i opis - bez list z kwadracikami i bez linii nad nimi. Kazdy kafel jest szerszy niz wyzszy.
   Od 640 px kazdy kafel to subgrid na 3 wiersze (ikona | nazwa | opis), wiec w rzedzie
   nazwy i opisy stoja na tej samej wysokosci, a kafle w rzedzie sa rowne. W granatowym kaflu
   trzeci wiersz to opis + przycisk (przycisk przyklejony do dolu kafla).
   JEDEN GEST: kafle wchodza po kolei (kazdy kafel ma wlasne [data-pf-reveal], wiec na telefonie
   gra przy kazdym kaflu osobno); na najechanie kafla uslugi kreska 2 px w koralu u gory
   rysuje sie od lewej. Stan poczatkowy gestu wlacza dopiero klasa .zk-js (skrypt) -
   bez skryptu i przy ograniczonym ruchu wszystko widac od razu. */
#pf-zakres {
  background: var(--pf-biel);
  color: var(--pf-tekst);
  overflow-x: clip;
}

/* --- naglowek --- */
#pf-zakres .zk-glowa {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 1.5rem;
}
#pf-zakres .zk-h2 { margin: 1.25rem 0 0; }
#pf-zakres .zk-glowa .zk-lead {
  max-width: 34rem;
  font-family: 'Inter', system-ui, sans-serif;
  text-wrap: pretty;
}

/* --- siatka kafli --- */
#pf-zakres .zk-siatka {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}

#pf-zakres .zk-kafel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.75rem 1.5rem 2rem;
  background: var(--pf-mgla);
  color: var(--pf-tekst);
}

#pf-zakres .zk-ikona {
  display: block;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  color: var(--pf-czern);
}

/* silnik: "section h3:not(.gbp h3):not(#oferta-lista h3)" ma w specyficznosci id - tu id + dwie klasy */
#pf-zakres .zk-kafel .zk-nazwa {
  margin: 1.375rem 0 0 !important;
  font-family: inherit;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  color: var(--pf-naglowek) !important;
  -webkit-text-fill-color: var(--pf-naglowek) !important;
  text-wrap: balance;
}

/* silnik: "main p" i "section p:not(.gbp p)" z !important */
#pf-zakres .zk-kafel .zk-opis {
  margin: 0.75rem 0 0 !important;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15.5px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: var(--pf-tekst) !important;
  -webkit-text-fill-color: var(--pf-tekst) !important;
}

/* lista: zawsze 3 podpunkty z kwadracikiem w koralu, kazdy w jednym wierszu (Mateusz 14.09.2026) */
#pf-zakres .zk-kafel .zk-lista {
  display: grid;
  row-gap: 0.625rem;
  margin: 1rem 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
#pf-zakres .zk-kafel .zk-lista li {
  position: relative;
  margin: 0 !important;
  padding: 0 0 0 1.25rem !important;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: var(--pf-tekst) !important;
  -webkit-text-fill-color: var(--pf-tekst) !important;
  white-space: nowrap;
  list-style: none !important;
}
#pf-zakres .zk-kafel .zk-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.725em - 3.5px);
  width: 7px;
  height: 7px;
  background: var(--pf-akcent);
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  #pf-zakres .zk-kafel .zk-lista li { font-size: 15px !important; }
}
@media (max-width: 359.98px) {
  #pf-zakres .zk-kafel .zk-lista li { font-size: 14.5px !important; }
}

/* --- kafel uslugi: kreska w koralu u gory, na najechanie rysuje sie od lewej --- */
#pf-zakres .zk-usluga::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--pf-akcent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--pf-ease-out);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  #pf-zakres .zk-usluga:hover::before { transform: scaleX(1); }
}

/* --- szosty kafel: granat, biel --- */
#pf-zakres .zk-rozmowa {
  background: var(--pf-czern);
  color: #FFFFFF;
}
#pf-zakres .zk-etykieta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 28px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
}
#pf-zakres .zk-etykieta::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background: var(--pf-akcent);
}
#pf-zakres .zk-rozmowa .zk-nazwa {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
#pf-zakres .zk-rozmowa .zk-opis {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
/* opis + przycisk: przycisk przyklejony do dolu kafla */
#pf-zakres .zk-dol {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}
#pf-zakres .zk-akcja {
  margin-top: auto;
  padding-top: 1.5rem;
}

/* --- od 640 px: 2 kolumny, kafle jako subgrid (wiersze tresci wyrownane w rzedzie) --- */
@media (min-width: 640px) {
  #pf-zakres .zk-glowa { row-gap: 1.75rem; }
  #pf-zakres .zk-siatka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
  }
  #pf-zakres .zk-kafel { padding: 2rem 1.75rem 2.125rem; }
  /* kafel szerszy niz wyzszy: mniejszy odstep ikona - nazwa i opis - przycisk */
  #pf-zakres .zk-kafel .zk-nazwa { margin-top: 1.125rem !important; }
  #pf-zakres .zk-akcja { padding-top: 1.25rem; }
  @supports (grid-template-rows: subgrid) {
    /* wiersze kazdego rzedu kafli: ikona | nazwa | opis - kazdy wg najwyzszej tresci w tym rzedzie,
       wiec w rzedzie nazwy i opisy stoja rowno, a kafle maja rowna wysokosc.
       Bez stalych minimow i bez 1fr: rzad z krotsza trescia jest nizszy (recenzja 14.09.2026). */
    /* odstep pionowy siatki = 0: inaczej odstep rodzica wchodzi miedzy wiersze wewnatrz kafla
       i minima wierszy przestaja sie zgadzac. Odstep miedzy rzedami kafli robi margines kafla
       (w subgridzie doliczany do ostatniego wiersza), a ujemny margines siatki go oddaje. */
    #pf-zakres .zk-siatka {
      row-gap: 0;
      margin-bottom: -1.5rem;
      grid-auto-rows: auto;
    }
    #pf-zakres .zk-kafel {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      row-gap: 0;
      align-content: start;
      margin-bottom: 1.5rem;
    }
    #pf-zakres .zk-etykieta { align-self: center; }
  }
}

/* 640-767 px: waskie kolumny - boczny odstep kafla jak na telefonie, mniejszy odstep miedzy kolumnami
   i nizsze odstepy gora/dol, zeby kafel byl szerszy niz wyzszy */
@media (min-width: 768px) {
  #pf-zakres .zk-kafel { padding-inline: 1.75rem; }
}
@media (min-width: 640px) and (max-width: 767.98px) {
  #pf-zakres .zk-siatka { column-gap: 1rem; }
  #pf-zakres .zk-kafel { padding: 1.75rem 1.5rem 1.875rem; }
}

/* --- od 1024 px: naglowek dzielony, 3 kolumny --- */
@media (min-width: 1024px) {
  #pf-zakres .zk-glowa {
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    column-gap: 3rem;
    align-items: end;
    align-items: last baseline;
  }
  #pf-zakres .zk-glowa .zk-lead { max-width: none; }
  #pf-zakres .zk-siatka {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 3.5rem;
  }
  #pf-zakres .zk-kafel { padding: 2.125rem 1.75rem 2.25rem; }
  #pf-zakres .zk-kafel .zk-nazwa { font-size: 1.3125rem !important; }
}
/* 1024-1279 px: trzy waskie kolumny - nizsze odstepy w kaflu i nazwa 20 px, zeby kafel byl szerszy niz wyzszy */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  #pf-zakres .zk-kafel { padding: 1.875rem 1.5rem 2rem; }
  #pf-zakres .zk-kafel .zk-nazwa { font-size: 1.25rem !important; }
}
@media (min-width: 1280px) {
  #pf-zakres .zk-glowa { grid-template-columns: minmax(0, 1fr) minmax(0, 23rem); column-gap: 4rem; }
  #pf-zakres .zk-kafel { padding: 2.25rem 2rem 2.375rem; }
}

/* --- JEDEN GEST: kafle wchodza po kolei (opoznienie wg kolumny i rzedu) --- */
#pf-zakres.zk-js .zk-kafel { opacity: 0; transform: translateY(24px); }
#pf-zakres.zk-js .zk-kafel.pf-widoczne {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--pf-ease), transform 0.8s var(--pf-ease-out);
  transition-delay: calc(0.05s + var(--zk-k, 0) * 110ms);
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  #pf-zakres .zk-kafel:nth-child(2), #pf-zakres .zk-kafel:nth-child(3) { --zk-k: 1; }
  #pf-zakres .zk-kafel:nth-child(4), #pf-zakres .zk-kafel:nth-child(5) { --zk-k: 2; }
  #pf-zakres .zk-kafel:nth-child(6) { --zk-k: 3; }
}
@media (min-width: 1024px) {
  #pf-zakres .zk-kafel:nth-child(2), #pf-zakres .zk-kafel:nth-child(4) { --zk-k: 1; }
  #pf-zakres .zk-kafel:nth-child(3), #pf-zakres .zk-kafel:nth-child(5) { --zk-k: 2; }
  #pf-zakres .zk-kafel:nth-child(6) { --zk-k: 3; }
}

/* --- ograniczony ruch: wszystko widoczne od razu, kreska bez animacji --- */
@media (prefers-reduced-motion: reduce) {
  #pf-zakres.zk-js .zk-kafel,
  #pf-zakres.zk-js .zk-kafel.pf-widoczne { opacity: 1 !important; transform: none !important; transition: none !important; }
  #pf-zakres .zk-usluga::before { transition: none; }
}
/* zk-lista-640: przy 640-767 px dwie waskie kolumny - podpunkty 15 px, zeby kazdy zmiescil sie w jednym wierszu */
@media (min-width: 640px) and (max-width: 767.98px) {
  #pf-zakres .zk-kafel .zk-lista li { font-size: 15px !important; }
}
/* zk-rozmowa-bez-subgridu: dwuwierszowy tytul granatowego kafla nie moze rozpychac wiersza tytulow
   w kaflach obok (w drugim rzedzie robila sie luka nad podpunktami) - granatowy kafel ukladamy sam */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 640px) {
    #pf-zakres .zk-kafel.zk-rozmowa { display: flex; flex-direction: column; grid-template-rows: none; }
    #pf-zakres .zk-kafel.zk-rozmowa .zk-etykieta { align-self: flex-start; }
  }
}
/* granatowy kafel: ikona w koralu jak w pozostalych kaflach (Mateusz 14.09.2026) */
#pf-zakres .zk-rozmowa .zk-ikona--koral { color: var(--pf-akcent); }
/* podnoszenie-kafla (Mateusz 14.09.2026: "po najechaniu kafelek powinien się lekko podnosić"):
   podniesienie przez osobna wlasciwosc translate, zeby nie mieszac sie z wjazdem kafla (transform z opoznieniem) */
#pf-zakres .zk-kafel { transition: translate 0.35s var(--pf-ease-out), box-shadow 0.35s var(--pf-ease-out); }
#pf-zakres.zk-js .zk-kafel.pf-widoczne {
  transition: opacity 0.6s var(--pf-ease), transform 0.8s var(--pf-ease-out), translate 0.35s var(--pf-ease-out), box-shadow 0.35s var(--pf-ease-out);
  transition-delay: calc(0.05s + var(--zk-k, 0) * 110ms), calc(0.05s + var(--zk-k, 0) * 110ms), 0s, 0s;
}
@media (hover: hover) and (pointer: fine) {
  #pf-zakres .zk-kafel:hover { translate: 0 -6px; box-shadow: 0 22px 40px -26px rgba(9, 9, 11, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  #pf-zakres .zk-kafel,
  #pf-zakres.zk-js .zk-kafel.pf-widoczne { transition: none !important; }
}

/* dwa wiersze naglowka od 1024 px (Mateusz 15.09.2026) - lead usuniety, wiec bez prawej kolumny */
@media (min-width: 1024px) {
  #pf-zakres .zk-glowa { grid-template-columns: minmax(0, 1fr) !important; }
  #pf-zakres .zk-h2 .l2 { white-space: nowrap; }
}
/* system naglowkow (15.09.2026): odstep nadtytul-naglowek 24 px od 768 px jak w demo 2 i 3 (ponizej zostaje 20 px) */
@media (min-width: 768px) {
  #pf-zakres .zk-h2 { margin-top: 1.5rem; }
}


/* ===== DEMO 4 · 03 JAK PRACUJEMY (wersja 2) =====
   Uklad 1:1 z sekcji #proces brata (zmierzony przy 1440): biel, dwie rowne kolumny z odstepem 60 px.
   Lewa kolumna przyklejona (top 120 px, odstepy 26 px): nadtytul, naglowek w dwoch wierszach, lead,
   licznik - pionowy tor 3 x 120 px z wypelnieniem w koralu, obok "1 / 3" i etykieta "Zasada" (od 15.09.2026 trzy zasady).
   Prawa: 3 biale karty (do 15.09.2026 byly 4) (obwodka 1 px, z lewej kreska 3 px w granacie, aktywna w koralu), kazda sticky
   z top 124 px + n x 20 px, wiec przy przewijaniu kolejna karta nachodzi na poprzednia.
   Po naszemu: naglowek czarny w dwoch pelnych wierszach (pf-h2), h3 czarne, ostre rogi, kolory z palety.
   JEDEN GEST: nakladanie kart (licznik, tor i aktywna karta ida za nim).
   Przewijanie jak u brata (zmierzone w przegladarce 14.09.2026, Mateusz: "prawa strona ma stac w miejscu,
   a lewa sie ruszac"): karty bez dolnych marginesow - trzymaja sie w stosie do konca listy, ostatnia karta
   dochodzi na swoje miejsce, a panel z lewej odkleja sie wczesniej i odjezdza, gdy karty jeszcze stoja;
   na koncu wszystkie karty zjezdzaja sie w jedno miejsce i odjezdzaja razem. Skrypt wyrownuje wysokosc kart (--jk-h).
   Ponizej 1024 px (i przy oknie nizszym niz 40 rem): bez przyklejania, karty jedna pod druga, bez licznika.
   prefers-reduced-motion: bez nakladania, karty zwyczajnie jedna pod druga, wszystko widoczne od razu. */
#pf-jak {
  --jk-gora: 7.5rem;          /* top przyklejonego panelu (pasek menu ma 68 px) */
  --jk-gora-kart: calc(var(--jk-gora) + 4px);
  --jk-krok: 1.25rem;         /* o tyle nizej przykleja sie kazda kolejna karta */
  --jk-odstep: 1.25rem;       /* odstep miedzy kartami w ukladzie */
  --jk-ile: 3;
  --jk-h: 0px;                /* ustawia skrypt: wysokosc najwyzszej karty */
  --jk-zapas-kart: 0px;       /* ustawia skrypt */
  --jk-zapas-panelu: 0px;     /* ustawia skrypt */
  position: relative;
  background: #FFFFFF;
  color: var(--pf-tekst);
}

/* --- uklad: telefon i tablet - jedna kolumna --- */
#pf-jak .jk-uklad {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 2.25rem;
}
#pf-jak .jk-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
#pf-jak .jk-h2 { width: 100%; }
#pf-jak .jk-panel .jk-lead {
  max-width: 27rem;
  font-family: 'Inter', system-ui, sans-serif;
}
#pf-jak .jk-licznik { display: none; }

/* --- karty --- */
#pf-jak .jk-karty {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr;          /* rowne karty */
  gap: var(--jk-odstep);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* silnik: "section li:not(.gbp li)" z !important */
#pf-jak .jk-karty .jk-karta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  margin: 0;
  padding: 24px 20px 26px;
  background: #FFFFFF;
  border: 1px solid var(--pf-linia);
  border-left: 3px solid var(--pf-czern);
  border-radius: 0;
  color: var(--pf-tekst);
  font-size: 16px !important;
  line-height: 1.6 !important;
  transition: opacity 0.7s var(--pf-ease), transform 0.7s var(--pf-ease), border-left-color 0.25s ease;
  transition-delay: calc(var(--pf-i, 0) * 110ms), calc(var(--pf-i, 0) * 110ms), 0s;
}
#pf-jak .jk-karty .jk-karta::before,
#pf-jak .jk-karty .jk-karta::marker { content: none; }

#pf-jak .jk-karta-gora {
  display: flex;
  align-items: center;
  gap: 14px;
}
#pf-jak .jk-nr {
  flex: none;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--pf-czern);
  transition: color 0.25s ease;
}
#pf-jak .jk-kreska {
  flex: 1 1 auto;
  min-width: 1.5rem;
  height: 1px;
  background: var(--pf-linia);
}
#pf-jak .jk-etykieta {
  flex: none;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--pf-tekst-2);
}
/* silnik: "section h3:not(.gbp h3):not(#oferta-lista h3)" z !important - id + dwie klasy */
#pf-jak .jk-karta .jk-nazwa {
  margin: 0 !important;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  color: var(--pf-naglowek) !important;
  -webkit-text-fill-color: var(--pf-naglowek) !important;
}
/* silnik: "main p" i "section p:not(.gbp p)" z !important */
#pf-jak .jk-karta .jk-opis {
  margin: 0 !important;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: var(--pf-tekst) !important;
  -webkit-text-fill-color: var(--pf-tekst) !important;
  text-wrap: pretty;
}
/* aktywna karta: kreska i numer w koralu */
#pf-jak .jk-karty .jk-karta.jk-akt { border-left-color: var(--pf-akcent); }
#pf-jak .jk-karta.jk-akt .jk-nr { color: var(--pf-akcent); }

/* --- licznik (tylko przy przyklejonym panelu) --- */
#pf-jak .jk-licznik {
  align-items: center;
  gap: 16px;
  padding-top: 8px;
}
#pf-jak .jk-tor {
  position: relative;
  flex: none;
  width: 3px;
  height: 120px;
  background: var(--pf-linia);
}
#pf-jak .jk-wypelnienie {
  position: absolute;
  inset: 0;
  background: var(--pf-akcent);
  transform: scaleY(var(--jk-postep, 0));
  transform-origin: 50% 0;
}
#pf-jak .jk-licznik-tekst {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#pf-jak .jk-licznik-liczby {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--pf-czern);
}
#pf-jak .jk-biezacy { display: inline-block; }
#pf-jak .jk-licznik-etykieta {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pf-tekst-2);
}

/* --- od 640 px: wymiary kart jak u brata --- */
@media (min-width: 640px) {
  #pf-jak .jk-uklad { row-gap: 3rem; }
  #pf-jak .jk-panel { gap: 26px; }
  #pf-jak .jk-karty .jk-karta { gap: 14px; padding: 30px 34px 34px; }
  #pf-jak .jk-nr { font-size: 40px; }
  #pf-jak .jk-karta .jk-nazwa { font-size: 26px !important; }
}

/* --- od 1024 px: dwie rowne kolumny z odstepem 60 px --- */
@media (min-width: 1024px) {
  #pf-jak .jk-uklad {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 60px;
    row-gap: 0;
    align-items: stretch;
  }
  #pf-jak .jk-karty { align-self: start; padding-top: 4px; }
}

/* --- przyklejony panel i licznik: od 1024 px, gdy okno ma co najmniej 40 rem wysokosci --- */
@media (min-width: 1024px) and (min-height: 40rem) {
  #pf-jak .jk-panel { position: sticky; top: var(--jk-gora); margin-bottom: var(--jk-zapas-panelu); }
  #pf-jak .jk-licznik { display: flex; }
}

/* --- JEDEN GEST: karty nakladaja sie przy przewijaniu (tylko ze skryptem, ktory wyrownuje karty) --- */
@media (min-width: 1024px) and (min-height: 40rem) and (prefers-reduced-motion: no-preference) {
  #pf-jak.jk-js .jk-karty { display: flex; flex-direction: column; gap: 0; }
  #pf-jak.jk-js .jk-karty .jk-karta {
    position: sticky;
    top: calc(var(--jk-gora-kart) + var(--jk-n, 0) * var(--jk-krok));
    min-height: var(--jk-h);
    margin-bottom: 0;
  }
  #pf-jak.jk-js .jk-karty .jk-karta + .jk-karta {
    margin-top: var(--jk-odstep);
  }
}
/* pomiar naturalnej wysokosci kart (skrypt dodaje klase na chwile) */
#pf-jak.jk-mierzy .jk-karty { grid-auto-rows: auto !important; align-items: start !important; }
#pf-jak.jk-mierzy .jk-karty .jk-karta { min-height: 0 !important; }

/* --- odslanianie: stan poczatkowy .pf-wjazd tylko ze skryptem sekcji; bez skryptu i gdy wspolny
   obserwator nie ruszy (.jk-awaryjnie) wszystko widoczne, kreska nadtytulu narysowana --- */
#pf-jak:not(.jk-js) .pf-wjazd,
#pf-jak.jk-awaryjnie .pf-wjazd { opacity: 1; transform: none; }
#pf-jak:not(.jk-js) .pf-nadtytul::after,
#pf-jak.jk-awaryjnie .pf-nadtytul::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  #pf-jak .pf-wjazd { opacity: 1 !important; transform: none !important; }
  #pf-jak .pf-wjazd,
  #pf-jak .jk-karty .jk-karta,
  #pf-jak .jk-nr { transition: none !important; }
}

/* system naglowkow (15.09.2026): odstepy w panelu jak w demo 2 i 3 - nadtytul-naglowek 20 px, od 768 px 24 px,
   naglowek-lead 28 px; lead-licznik bez zmian (26 px). Zamiast wspolnego gap panelu - marginesy gorne. */
#pf-jak .jk-panel { gap: 0; }
#pf-jak .jk-panel .jk-h2 { margin-top: 1.25rem; }
#pf-jak .jk-panel .jk-lead { margin-top: 1.75rem; }
#pf-jak .jk-panel .jk-licznik { margin-top: 26px; }
@media (min-width: 768px) {
  #pf-jak .jk-panel .jk-h2 { margin-top: 1.5rem; }
}


/* ===== DEMO 4 · 04 KROK PO KROKU =====
   Granat (pf-ciemna). Gora: z lewej nadtytul + dwuwierszowy .pf-h2, z prawej lead (od 1024 px lead
   stoi dokladnie nad trzecia kolumna krokow i jest wyrownany do ostatniej linii naglowka).
   Kroki od 1024 px: trzy rowne kolumny. W kazdej: wielki przygaszony numer, pod nim szyna
   (pozioma linia 2 px w koralu przez cala szerokosc kontenera, zlozona z odcinkow kolumn),
   na niej stacja (bialy kwadrat 18 px z kwadracikiem 6 px w koralu), od stacji pionowy lacznik
   2 px w koralu w dol do kafla (jasniejszy granat, rowna wysokosc). Numer, stacja i tekst kafla
   stoja na jednej osi: lewy brzeg kolumny + wewnetrzny odstep kafla (--kr-wciecie).
   Ponizej 1024 px szyna staje pionowo z lewej: stacja obok numeru, kafel pod numerem, linia
   biegnie od stacji do stacji. Na dole przycisk "Umow rozmowe" i link tel.
   JEDEN GEST: linia rysuje sie od lewej (odcinek po odcinku, liniowo), stacje "pykaja", gdy
   linia do nich dojdzie, lacznik schodzi w dol, kafel wchodzi. Kazdy krok ma wlasny
   [data-pf-reveal] - w poziomie wchodza razem (opoznienie wg kolumny), w pionie kazdy, gdy
   pojawi sie na ekranie. Stan poczatkowy wlacza dopiero klasa .kr-js (skrypt): bez skryptu,
   przy ograniczonym ruchu i gdy wspolny obserwator nie ruszy - wszystko widoczne od razu. */
#pf-kroki {
  --kr-nr: clamp(3.25rem, 12vw, 4.5rem);   /* wielkosc numeru */
  --kr-stacja: 18px;
  --kr-odstep: 2.25rem;                    /* w pionie: odstep miedzy krokami; od 1024 px: miedzy kolumnami */
  --kr-wciecie: 1.5rem;                    /* wewnetrzny odstep kafla z boku = os numeru i stacji */
  --kr-t: 650ms;                           /* czas jednego odcinka szyny */
  --kr-c: 0ms;                             /* po jakim czasie linia dochodzi do stacji w swoim odcinku */
  position: relative;
  background: var(--pf-czern);
  color: #FFFFFF;
  overflow-x: clip;
}

/* --- naglowek --- */
#pf-kroki .kr-glowa {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 1.5rem;
}
#pf-kroki .kr-glowa-tytul { min-width: 0; }
#pf-kroki .kr-h2 { margin: 1.25rem 0 0; }
/* silnik: "section p:not(.gbp p)" z !important; baza: lead na ciemnym 0,72 - tu 0,78 */
#pf-kroki .kr-glowa .kr-lead {
  max-width: 34rem;
  font-family: 'Inter', system-ui, sans-serif;
  color: #FFFFFF;
  text-wrap: pretty;
}

/* --- kroki: w pionie (do 1023 px) --- */
#pf-kroki .kr-kroki {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--kr-odstep);
  margin: 2.75rem 0 0;
  padding: 0;
  list-style: none;
}
/* silnik: "section li:not(.gbp li)" z !important */
#pf-kroki .kr-kroki .kr-krok {
  position: relative;
  display: grid;
  grid-template-columns: var(--kr-stacja) minmax(0, 1fr);
  grid-template-areas:
    "szyna nr"
    ".     kafel";
  column-gap: 1rem;
  row-gap: 1rem;
  margin: 0;
  padding: 0;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #FFFFFF;
}
#pf-kroki .kr-kroki .kr-krok::before,
#pf-kroki .kr-kroki .kr-krok::marker { content: none; }

/* wielki przygaszony numer; interlinia 0,8 = pudelko numeru, na ktorego srodku stoi stacja */
#pf-kroki .kr-nr {
  grid-area: nr;
  display: block;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: var(--kr-nr);
  font-weight: 600;
  line-height: 0.8;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: #76787C;
  -webkit-text-fill-color: #76787C;
  white-space: nowrap;
  /* korekta optyczna: "0" w Space Grotesk ma 0,0525 em odstepu przed kreska cyfry (zmierzone) -
     bez niej cyfry stoja 5 px na prawo od osi stacji i kafla */
  margin-left: -0.0525em;
}

/* szyna: w pionie tylko miejsce na stacje (linia liczy sie od kroku) */
#pf-kroki .kr-szyna {
  grid-area: szyna;
  align-self: center;
  display: block;
  width: var(--kr-stacja);
  height: var(--kr-stacja);
}
#pf-kroki .kr-stacja {
  position: relative;
  z-index: 1;                 /* kwadrat zaslania linie, ktora pod nim przechodzi */
  display: block;
  box-sizing: border-box;
  width: var(--kr-stacja);
  height: var(--kr-stacja);
  background: #FFFFFF;
}
#pf-kroki .kr-stacja::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--pf-akcent);
}
/* linia 2 px w koralu: w pionie od srodka stacji do srodka stacji nastepnego kroku
   (wysokosc kroku + odstep miedzy krokami; srodek stacji = polowa pudelka numeru) */
#pf-kroki .kr-tor {
  position: absolute;
  z-index: 0;
  left: calc(var(--kr-stacja) / 2 - 1px);
  top: calc(var(--kr-nr) * 0.4);
  width: 2px;
  height: calc(100% + var(--kr-odstep));
  background: var(--pf-akcent);
  transform-origin: 50% 0;
}
#pf-kroki .kr-krok:last-child .kr-tor { display: none; }
#pf-kroki .kr-lacznik { display: none; }

/* --- kafel --- */
#pf-kroki .kr-kafel {
  grid-area: kafel;
  min-width: 0;
  padding: 1.5rem var(--kr-wciecie) 1.75rem;
  background: rgba(255, 255, 255, 0.07);
}
/* silnik: "section h3:not(.gbp h3):not(#oferta-lista h3)" z !important - tu id + dwie klasy */
#pf-kroki .kr-kafel .kr-nazwa {
  margin: 0 !important;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  text-wrap: balance;
}
/* silnik: "main p" i "section p:not(.gbp p)" z !important */
#pf-kroki .kr-kafel .kr-opis {
  margin: 0.75rem 0 0 !important;
  max-width: 36rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  text-wrap: pretty;
}

/* --- przycisk i telefon --- */
#pf-kroki .kr-akcja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2.5rem;
}
#pf-kroki .kr-tel {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #FFFFFF !important;
  text-decoration: none;
  white-space: nowrap;
}
#pf-kroki .kr-tel strong {
  font-weight: 600;
  color: #FFFFFF;
  border-bottom: 1px solid #76787C;
  transition: border-color 0.25s ease;
}
#pf-kroki .kr-tel:hover strong,
#pf-kroki .kr-tel:focus-visible strong { border-bottom-color: var(--pf-akcent); }

/* --- tablet: wiecej powietrza --- */
@media (min-width: 640px) {
  #pf-kroki { --kr-wciecie: 1.75rem; --kr-odstep: 2.5rem; }
  #pf-kroki .kr-kroki { margin-top: 3.25rem; }
  #pf-kroki .kr-kroki .kr-krok { column-gap: 1.5rem; row-gap: 1.125rem; }
  #pf-kroki .kr-kafel { padding-top: 1.75rem; padding-bottom: 2rem; }
  #pf-kroki .kr-kafel .kr-nazwa { font-size: 1.625rem !important; }
  #pf-kroki .kr-akcja { margin-top: 3rem; }
}

/* --- od 1024 px: szyna w poziomie, trzy rowne kolumny --- */
@media (min-width: 1024px) {
  #pf-kroki {
    --kr-nr: clamp(4.5rem, 7vw, 6.25rem);
    --kr-odstep: 1.25rem;
    --kr-wciecie: 1.75rem;
    --kr-t: 520ms;
    --kr-c: 70ms;
  }
  /* naglowek na tej samej siatce co kroki: tytul nad kolumnami 1-2, lead nad kolumna 3 */
  #pf-kroki .kr-glowa {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--kr-odstep);
    align-items: end;
    align-items: last baseline;
  }
  #pf-kroki .kr-glowa-tytul { grid-column: 1 / span 2; }
  #pf-kroki .kr-glowa .kr-lead { grid-column: 3; max-width: none; }

  #pf-kroki .kr-kroki {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--kr-odstep);
    row-gap: 0;
    margin-top: 4rem;
  }
  #pf-kroki .kr-kroki .kr-krok {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  #pf-kroki .kr-nr { margin: 0 0 1.5rem -0.0525em; padding-left: var(--kr-wciecie); }
  /* szyna = pas wysokosci stacji na cala szerokosc kolumny; odcinek linii siega do nastepnej kolumny
     (+ odstep + 1 px zakladki, zeby na ulamkowych szerokosciach nie bylo szwu), ostatni konczy sie na brzegu */
  #pf-kroki .kr-szyna { position: relative; align-self: stretch; width: auto; }
  #pf-kroki .kr-stacja { position: absolute; left: var(--kr-wciecie); top: 0; }
  #pf-kroki .kr-tor {
    left: 0;
    top: calc(var(--kr-stacja) / 2 - 1px);
    width: calc(100% + var(--kr-odstep) + 1px);
    height: 2px;
    transform-origin: 0 50%;
  }
  #pf-kroki .kr-krok:last-child .kr-tor { display: block; width: 100%; }
  #pf-kroki .kr-lacznik {
    display: block;
    flex: 0 0 auto;
    width: 2px;
    height: 2.25rem;
    margin-left: calc(var(--kr-wciecie) + var(--kr-stacja) / 2 - 1px);
    background: var(--pf-akcent);
    transform-origin: 50% 0;
  }
  #pf-kroki .kr-kafel { flex: 1 1 auto; padding: 1.875rem var(--kr-wciecie) 2.125rem; }
  #pf-kroki .kr-kafel .kr-nazwa { font-size: clamp(1.625rem, 2.1vw, 1.875rem) !important; }
  #pf-kroki .kr-akcja { margin-top: 3.5rem; }
}
@media (min-width: 1280px) {
  #pf-kroki { --kr-odstep: 1.5rem; --kr-wciecie: 2.25rem; }
  #pf-kroki .kr-kroki { margin-top: 4.5rem; }
  #pf-kroki .kr-lacznik { height: 2.75rem; }
  #pf-kroki .kr-kafel { padding-top: 2.25rem; padding-bottom: 2.5rem; }
}

/* --- JEDEN GEST: linia od lewej, stacje pykaja, lacznik w dol, kafel wchodzi --- */
/* opoznienie wg kolumny tylko w poziomie (--kr-k); w pionie kazdy krok gra sam, gdy wejdzie na ekran */
#pf-kroki .kr-krok { --kr-k: 0; }
@media (min-width: 1024px) {
  #pf-kroki .kr-krok:nth-child(2) { --kr-k: 1; }
  #pf-kroki .kr-krok:nth-child(3) { --kr-k: 2; }
}
#pf-kroki.kr-js .kr-tor { transform: scaleY(0); }
#pf-kroki.kr-js .kr-stacja { transform: scale(0); }
#pf-kroki.kr-js .kr-stacja::after { transform: scale(0); }
#pf-kroki.kr-js .kr-lacznik { transform: scaleY(0); }
#pf-kroki.kr-js .kr-nr { opacity: 0; transform: translateY(12px); }
#pf-kroki.kr-js .kr-kafel { opacity: 0; transform: translateY(18px); }
@media (min-width: 1024px) {
  #pf-kroki.kr-js .kr-tor { transform: scaleX(0); }
}

#pf-kroki.kr-js .kr-krok.pf-widoczne .kr-tor {
  transform: none;
  transition: transform var(--kr-t) linear;
  transition-delay: calc(var(--kr-k) * var(--kr-t));
}
#pf-kroki.kr-js .kr-krok.pf-widoczne .kr-stacja {
  transform: none;
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(var(--kr-k) * var(--kr-t) + var(--kr-c));
}
#pf-kroki.kr-js .kr-krok.pf-widoczne .kr-stacja::after {
  transform: none;
  transition: transform 0.36s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(var(--kr-k) * var(--kr-t) + var(--kr-c) + 140ms);
}
#pf-kroki.kr-js .kr-krok.pf-widoczne .kr-nr {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--pf-ease), transform 0.8s var(--pf-ease-out);
  transition-delay: calc(var(--kr-k) * var(--kr-t));
}
#pf-kroki.kr-js .kr-krok.pf-widoczne .kr-lacznik {
  transform: none;
  transition: transform 0.4s var(--pf-ease);
  transition-delay: calc(var(--kr-k) * var(--kr-t) + var(--kr-c) + 220ms);
}
#pf-kroki.kr-js .kr-krok.pf-widoczne .kr-kafel {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--pf-ease), transform 0.8s var(--pf-ease-out);
  transition-delay: calc(var(--kr-k) * var(--kr-t) + var(--kr-c) + 380ms);
}

/* kreska nadtytulu: bez skryptu sekcji (lub gdy obserwator nie ruszyl) narysowana od razu - bez przejscia,
   zeby nie zalezala od zegara animacji (w kartach w tle i w headless przejscie potrafi stac w miejscu) */
#pf-kroki:not(.kr-js) .pf-nadtytul::after { transform: scaleX(1); transition: none; }

/* wyzszy kontrast na zyczenie systemu */
@media (prefers-contrast: more) {
  #pf-kroki .kr-glowa .kr-lead { color: #FFFFFF; }
  #pf-kroki .kr-kafel .kr-opis { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
  #pf-kroki .kr-nr { color: #76787C; -webkit-text-fill-color: #76787C; }
}

/* --- ograniczony ruch: od razu stan koncowy (linia narysowana, stacje, laczniki i kafle widoczne) --- */
@media (prefers-reduced-motion: reduce) {
  #pf-kroki .kr-tor,
  #pf-kroki .kr-stacja,
  #pf-kroki .kr-stacja::after,
  #pf-kroki .kr-lacznik,
  #pf-kroki .kr-nr,
  #pf-kroki .kr-kafel { opacity: 1 !important; transform: none !important; transition: none !important; }
  #pf-kroki .kr-tel strong { transition: none; }
}
/* odstep-nad-przyciskiem (Mateusz 14.09.2026): nad przyciskiem tyle samo miejsca, ile pod nim do "Zalet".
   Pod przyciskiem: pol odstepu sekcji tutaj + pol odstepu na gorze "Zalet" (to samo tlo) = var(--sekcja). */
#pf-kroki > .pf-kontener > .kr-akcja { margin-top: var(--sekcja) !important; }
/* szew-z-zaletami: sekcja konczy sie na ulamku piksela, a na ekranach Retina miedzy dwoma granatami przeswitywala
   biala linia tla strony - granatowy cien 1 px w dol ja zakrywa (bez zmiany odstepow) */
#pf-kroki { box-shadow: 0 1px 0 0 var(--pf-czern); z-index: 1; }

/* dwa wiersze naglowka od 1024 px (Mateusz 15.09.2026) */
@media (min-width: 1024px) {
  #pf-kroki .kr-glowa-tytul { grid-column: 1 / -1 !important; }
  #pf-kroki .kr-h2 .l2 { white-space: nowrap; }
}
/* system naglowkow (15.09.2026): odstep nadtytul-naglowek 24 px od 768 px jak w demo 2 i 3 (ponizej zostaje 20 px) */
@media (min-width: 768px) {
  #pf-kroki .kr-h2 { margin-top: 1.5rem; }
}


/* ===== DEMO 4 · 05 ZALETY =====
   Granat (pf-ciemna), stoi zaraz pod "Krok po kroku" na tym samym tle: u gory kontenera cienka
   linia 1 px (biel 0,12) na szerokosc kontenera oddziela obie sekcje (odstep na styku to po
   polowie var(--sekcja) - blok pf-odstepy w skrypcie).
   Uklad 1:1 z sekcji #zaufanie brata: nadtytul, dwuwierszowy naglowek, pod nim lista 2 x 2 (od 768 px),
   kazdy element ma u gory linie 1 px (biel 0,18) na cala szerokosc kolumny, w elemencie z lewej
   mala ikona liniowa 24 px w koralu, obok tytul i pod nim opis. Bez leadu (brak zatwierdzonego tekstu).
   Po naszemu: oba wiersze naglowka biale, .pf-h2 i .pf-nadtytul z bazy, ostre ikony liniowe.
   JEDEN GEST: linie rysuja sie od lewej, elementy wchodza po kolei (kazdy element ma wlasne
   [data-pf-reveal]; w rzedzie prawy o chwile po lewym). Stan poczatkowy wlacza dopiero klasa .zl-js
   (skrypt) - bez skryptu, przy ograniczonym ruchu i gdy obserwator nie ruszy wszystko widoczne. */
#pf-zalety {
  --zl-nazwa: 1.375rem;       /* wielkosc tytulu - z niej liczy sie polozenie ikony */
  background: var(--pf-czern);
  color: #FFFFFF;
  overflow-x: clip;
}

/* linia oddzielajaca od "Krok po kroku": na szerokosc tresci kontenera (bez bocznych odstepow) */
#pf-zalety > .pf-kontener { position: relative; }
#pf-zalety > .pf-kontener::before {
  display: none;   /* Mateusz 14.09.2026: bez kreski, polaczeniem jest przycisk z "Krok po kroku" */
  content: "";
  position: absolute;
  top: 0;
  left: 1.5rem;
  right: 1.5rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

#pf-zalety .zl-h2 { margin: 1.25rem 0 0; }

/* --- lista: 1 kolumna (telefon), 2 kolumny od 768 px --- */
#pf-zalety .zl-lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}
/* silnik: "section li:not(.gbp li)" z !important */
#pf-zalety .zl-lista .zl-poz {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 1rem;
  align-content: start;
  margin: 0;
  padding: 1.75rem 0 2rem;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #FFFFFF;
}
#pf-zalety .zl-lista .zl-poz::marker { content: none; }
/* linia u gory elementu (to ona rysuje sie od lewej) */
#pf-zalety .zl-lista .zl-poz::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ikona na srodku pierwszej linii tytulu (interlinia tytulu 1,25) */
#pf-zalety .zl-ikona {
  grid-column: 1;
  grid-row: 1;
  display: block;
  width: 24px;
  height: 24px;
  margin-top: calc((var(--zl-nazwa) * 1.25 - 24px) / 2);
  color: var(--pf-akcent);
}
/* silnik: "section h3:not(.gbp h3):not(#oferta-lista h3)" z !important - tu id + dwie klasy */
#pf-zalety .zl-poz .zl-nazwa {
  grid-column: 2;
  grid-row: 1;
  margin: 0 !important;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: var(--zl-nazwa) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  text-wrap: balance;
}
/* silnik: "main p" i "section p:not(.gbp p)" z !important */
#pf-zalety .zl-poz .zl-opis {
  grid-column: 2;
  grid-row: 2;
  margin: 0.625rem 0 0 !important;
  max-width: 34rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  text-wrap: pretty;
}

/* --- od 768 px: siatka 2 x 2 --- */
@media (min-width: 768px) {
  #pf-zalety { --zl-nazwa: 1.5rem; }
  #pf-zalety .zl-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
    margin-top: 3.25rem;
  }
  #pf-zalety .zl-lista .zl-poz { column-gap: 1.25rem; padding: 2rem 0 2.25rem; }
  #pf-zalety .zl-poz .zl-opis { font-size: 17px !important; }
}
@media (min-width: 1024px) {
  #pf-zalety .zl-lista { column-gap: 5rem; margin-top: 4rem; }
  #pf-zalety .zl-lista .zl-poz { padding: 2.25rem 0 2.5rem; }
}
@media (min-width: 1280px) {
  #pf-zalety .zl-lista { column-gap: 6rem; }
}
/* ostatni rzad bez dolnego odstepu elementu: pod trescia zostaje sam odstep sekcji (rytm jak w innych sekcjach) */
#pf-zalety .zl-lista .zl-poz:last-child { padding-bottom: 0; }
@media (min-width: 768px) {
  #pf-zalety .zl-lista .zl-poz:nth-last-child(2):nth-child(odd) { padding-bottom: 0; }
}

/* --- JEDEN GEST: linie od lewej, elementy po kolei --- */
#pf-zalety .zl-poz { --zl-k: 0; }
@media (min-width: 768px) {
  #pf-zalety .zl-poz:nth-child(even) { --zl-k: 1; }
}
#pf-zalety.zl-js .zl-lista .zl-poz::before { transform: scaleX(0); }
#pf-zalety.zl-js .zl-poz > * { opacity: 0; transform: translateY(14px); }
#pf-zalety.zl-js .zl-lista .zl-poz.pf-widoczne::before {
  transform: none;
  transition: transform 1.1s var(--pf-ease-out);
  transition-delay: calc(var(--zl-k) * 180ms);
}
#pf-zalety.zl-js .zl-poz.pf-widoczne > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--pf-ease), transform 0.8s var(--pf-ease-out);
  transition-delay: calc(var(--zl-k) * 180ms + 260ms);
}
#pf-zalety.zl-js .zl-poz.pf-widoczne > .zl-opis { transition-delay: calc(var(--zl-k) * 180ms + 340ms); }

/* kreska nadtytulu: bez skryptu sekcji (lub gdy obserwator nie ruszyl) narysowana od razu - bez przejscia,
   zeby nie zalezala od zegara animacji (w kartach w tle i w headless przejscie potrafi stac w miejscu) */
#pf-zalety:not(.zl-js) .pf-nadtytul::after { transform: scaleX(1); transition: none; }

/* wyzszy kontrast na zyczenie systemu */
@media (prefers-contrast: more) {
  #pf-zalety .zl-poz .zl-opis { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
  #pf-zalety .zl-lista .zl-poz::before { background: rgba(255, 255, 255, 0.4); }
}

/* --- ograniczony ruch: wszystko widoczne od razu, linie narysowane --- */
@media (prefers-reduced-motion: reduce) {
  #pf-zalety .zl-lista .zl-poz::before,
  #pf-zalety .zl-poz > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* system naglowkow (15.09.2026): odstep nadtytul-naglowek 24 px od 768 px jak w demo 2 i 3 (ponizej zostaje 20 px) */
@media (min-width: 768px) {
  #pf-zalety .zl-h2 { margin-top: 1.5rem; }
}


/* ===== DEMO 4 · 06 O BIURZE (wersja 2, zrzut 4 = strona brata #o-nas) =====
   Tlo biel (data-tlo="jasne"). Gora: nadtytul i dwuwierszowy .pf-h2.
   Pod spodem dwie rowne polowki bez odstepu, na szerokosc kontenera:
   z lewej zdjecie biura foto-tlo-4.webp (jak na zrzucie Mateusza, object-fit: cover), z prawej kafel na mgle
   (h3, dwa akapity, podpis: imie + adres, przycisk obrysowy ze strzalka).
   Od 1024 px blok niski i szeroki: proporcja 2,42 : 1 jak na zrzucie (poprawka 14.09.2026 - bylo 700 px wysokosci).
   Ponizej 1024 px: zdjecie nad kaflem (16:10 tablet, 4:3 telefon), dalej bez odstepu.
   JEDEN GEST: siatka ma wlasne [data-pf-reveal] (wspolny obserwator z _baza.js). Gdy wchodzi na ekran,
   zdjecie i kafel odslaniaja sie od wspolnej krawedzi (clip-path) - od 1024 px od srodka na boki,
   nizej od gory - zdjecie w ramce wraca ze skali 1,06 do 1, a tresc kafla pojawia sie po kolei.
   Stan poczatkowy wlacza dopiero klasa .on-js ze skryptu; bez JS, bez IntersectionObserver
   i przy ograniczonym ruchu od razu stan koncowy. */
#pf-onas {
  background: var(--pf-biel);
  color: var(--pf-tekst);
  overflow-x: clip;
}

/* --- naglowek --- */
#pf-onas .on-h2 { margin: 1.25rem 0 0 !important; }

/* --- siatka: zdjecie | kafel --- */
#pf-onas .on-siatka {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 2.5rem;
}

#pf-onas .on-foto {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--pf-mgla);
}
#pf-onas .on-foto img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 30%;
}

#pf-onas .on-kafel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 2.25rem 1.5rem 2.5rem;
  background: var(--pf-mgla);
}
#pf-onas .on-tresc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 34rem;
}

/* silnik: "section h3:not(.gbp h3):not(#oferta-lista h3)" ma w specyficznosci id - tu id + dwie klasy */
#pf-onas .on-kafel .on-h3 {
  margin: 0 !important;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: var(--pf-naglowek) !important;
  -webkit-text-fill-color: var(--pf-naglowek) !important;
}

/* silnik: "main p" i "section p:not(.gbp p)" z !important */
#pf-onas .on-kafel .on-akapit {
  margin: 1.125rem 0 0 !important;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: var(--pf-tekst) !important;
  -webkit-text-fill-color: var(--pf-tekst) !important;
  text-wrap: pretty;
}

/* podpis: imie (pogrubione) i adres w dwoch wierszach */
#pf-onas .on-podpis {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 1.5rem;
}
#pf-onas .on-imie {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--pf-naglowek);
}
#pf-onas .on-adres {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--pf-tekst);
}
#pf-onas .on-razem { white-space: nowrap; }

#pf-onas .on-przycisk { margin-top: 1.75rem; }
#pf-onas .on-przycisk svg { flex: 0 0 auto; }
/* strzalka ukosna: na najechanie w strone, w ktora wskazuje (baza przesuwa w prawo) */
#pf-onas .on-przycisk:hover svg,
#pf-onas .on-przycisk:focus-visible svg { transform: translate(2px, -2px); }

/* --- 640-1023 px: zdjecie 16:10 nad kaflem --- */
@media (min-width: 640px) {
  #pf-onas .on-siatka { margin-top: 3rem; }
  #pf-onas .on-foto { aspect-ratio: 16 / 10; }
  #pf-onas .on-foto img { object-position: 50% 30%; }
  #pf-onas .on-kafel { padding: 3rem 2.75rem 3.25rem; }
  #pf-onas .on-kafel .on-h3 { font-size: 24px !important; }
  #pf-onas .on-kafel .on-akapit { font-size: 17px !important; line-height: 1.75 !important; }
}

/* --- od 1024 px: dwie rowne polowki bez odstepu --- */
@media (min-width: 1024px) {
  #pf-onas .on-siatka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: clamp(3rem, 4.3vw, 3.875rem);
  }
  /* blok niski i szeroki jak na zrzucie Mateusza (14.09.2026): cala siatka w proporcji 2,42 : 1
     (1104 x 456 px przy 1440); kafel z dluzsza trescia moze ja tylko podwyzszyc */
  #pf-onas .on-siatka { aspect-ratio: 2.42 / 1; }
  #pf-onas .on-foto { aspect-ratio: auto; }
  #pf-onas .on-foto img { object-position: 50% 42%; }
  #pf-onas .on-kafel { padding: clamp(2.5rem, 3.6vw, 3.25rem); }
  #pf-onas .on-kafel .on-h3 { font-size: 24px !important; }
  #pf-onas .on-kafel .on-akapit { margin-top: 0.875rem !important; font-size: 16.5px !important; line-height: 1.7 !important; }
  #pf-onas .on-podpis { margin-top: 1.25rem; gap: 0.125rem; }
  #pf-onas .on-imie { font-size: 17px; }
  #pf-onas .on-przycisk { margin-top: 1.375rem; }
}

/* --- JEDEN GEST --- */
#pf-onas.on-js .on-foto,
#pf-onas.on-js .on-kafel { clip-path: inset(0 0 100% 0); }
#pf-onas.on-js .on-foto img { transform: scale(1.06); }
#pf-onas.on-js .on-tresc > * { opacity: 0; transform: translateY(14px); }

#pf-onas.on-js .on-siatka.pf-widoczne .on-foto {
  clip-path: inset(0);
  transition: clip-path 1.1s var(--pf-ease-out);
}
#pf-onas.on-js .on-siatka.pf-widoczne .on-kafel {
  clip-path: inset(0);
  transition: clip-path 1.1s var(--pf-ease-out) 0.2s;
}
#pf-onas.on-js .on-siatka.pf-widoczne .on-foto img {
  transform: none;
  transition: transform 2s var(--pf-ease);
}
#pf-onas.on-js .on-siatka.pf-widoczne .on-tresc > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--pf-ease), transform 0.7s var(--pf-ease);
  transition-delay: calc(0.5s + var(--on-i, 0) * 90ms);
}
#pf-onas .on-tresc > :nth-child(2) { --on-i: 1; }
#pf-onas .on-tresc > :nth-child(3) { --on-i: 2; }
#pf-onas .on-tresc > :nth-child(4) { --on-i: 3; }
#pf-onas .on-tresc > :nth-child(5) { --on-i: 4; }

/* od 1024 px: polowki rozchodza sie od wspolnej krawedzi (srodka) na boki, razem */
@media (min-width: 1024px) {
  #pf-onas.on-js .on-foto { clip-path: inset(0 0 0 100%); }
  #pf-onas.on-js .on-kafel { clip-path: inset(0 100% 0 0); }
  #pf-onas.on-js .on-siatka.pf-widoczne .on-kafel { transition-delay: 0s; }
  #pf-onas.on-js .on-siatka.pf-widoczne .on-tresc > * { transition-delay: calc(0.45s + var(--on-i, 0) * 90ms); }
}

/* --- ograniczony ruch: stan koncowy od razu --- */
@media (prefers-reduced-motion: reduce) {
  #pf-onas.on-js .on-foto,
  #pf-onas.on-js .on-kafel,
  #pf-onas.on-js .on-siatka.pf-widoczne .on-foto,
  #pf-onas.on-js .on-siatka.pf-widoczne .on-kafel { clip-path: none !important; transition: none !important; }
  #pf-onas.on-js .on-foto img,
  #pf-onas.on-js .on-siatka.pf-widoczne .on-foto img,
  #pf-onas.on-js .on-tresc > *,
  #pf-onas.on-js .on-siatka.pf-widoczne .on-tresc > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  #pf-onas .on-przycisk svg { transition: none; }
}

/* system naglowkow (15.09.2026): odstep nadtytul-naglowek 24 px od 768 px jak w demo 2 i 3
   (ponizej 20 px bez zmian); od 1024 px naglowek-siatka 64 px (bylo clamp do 62 px) */
@media (min-width: 768px) {
  #pf-onas .on-h2 { margin-top: 1.5rem !important; }
}
@media (min-width: 1024px) {
  #pf-onas .on-siatka { margin-top: 4rem; }
}


/* ===== DEMO 4 · 07 KORZYSCI (id pf-wstep) =====
   Kopia sekcji "Korzysci" z demo 3 (szablon-03-perfekt/sekcje/03-wstep.html) z danymi Machaly
   nalozonymi tak jak w szablon-03-perfekt/perfekt_machala.rb: okragly sygnet BR 360 x 360
   wypelnia cale kolo, podpis "Biuro Rachunkowe Lukasz Machala" / "Lukasz Machala · Gorzow
   Wielkopolski". Uklad, tresc i ruch bez zmian wzgledem demo 3.

   Biale tlo, duzy dwuwierszowy naglowek, pod nim dwie czesci: po lewej szary akapit
   i maly blok marki (kolo mgly z sygnetem + nazwa i podpis), po prawej 2 x 2 korzysci.
   Bez zdjec, bez kresek, duzo powietrza.

   Uklad: do 767 px wszystko jedno pod drugim, korzysci w jednej kolumnie; 768-1023 px
   naglowek, akapit + marka, pod spodem 2 x 2; od 1024 px lewa kolumna 5/12 (akapit + marka),
   korzysci 7/12 w dwoch kolumnach.

   JEDEN GEST: gdy lista wchodzi na ekran, korzysci podnosza sie po kolei co 110 ms, a chwile
   po kazdej "wyskakuje" jej koralowy kwadracik (scale 0 -> 1,35 -> 1, z lekkim obrotem).
   Stan poczatkowy tylko z klasa .wst-js (dodaje ja skrypt), wiec bez JS i przy ograniczonym
   ruchu widac od razu stan koncowy. Odslanianie robi wspolny obserwator z _baza.js, lista ma
   wlasne [data-pf-reveal], wiec gest gra od nowa przy powrocie.

   NAJAZD (tylko precyzyjny wskaznik): pod tytulem korzysci rysuje sie od lewej kreska 2 px
   w akcencie. */
#pf-wstep {
  --wst-kolo: 5.5rem;
  background: #FFFFFF;
  color: var(--pf-tekst);
  overflow-x: clip;
}

/* --- naglowek --- */
#pf-wstep .wst-h2 { margin: 1.25rem 0 0 !important; }

/* --- dwie czesci pod naglowkiem --- */
#pf-wstep .wst-tresc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 3rem;
  margin-top: 2.25rem;
}
#pf-wstep .wst-bok { min-width: 0; }

/* fundament: "[id^=pf-] .pf-lead { 17px !important; max-width: 36rem }" */
#pf-wstep .wst-bok .wst-lead {
  margin: 0 !important;
  max-width: 34rem;
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: var(--pf-tekst) !important;
  text-wrap: pretty;
}

/* --- blok marki: kolo mgly z sygnetem, obok nazwa i podpis --- */
#pf-wstep .wst-marka {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  margin-top: 2.25rem;
}
#pf-wstep .wst-kolo {
  position: relative;
  flex: 0 0 var(--wst-kolo);
  width: var(--wst-kolo);
  height: var(--wst-kolo);
  border-radius: 50%;
  background: var(--pf-mgla);
}
#pf-wstep .wst-kolo .wst-sygnet {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  border-radius: 50%;
  max-width: none;
  height: auto;
  translate: -50% -50%;
}
#pf-wstep .wst-podpis { display: block; min-width: 0; }
#pf-wstep .wst-firma {
  display: block;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--pf-czern);
}
#pf-wstep .wst-miejsce {
  display: block;
  margin-top: 0.2rem;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pf-tekst-2);
}
#pf-wstep .wst-czesc { white-space: nowrap; }
/* na najwezszych ekranach podpis w dwoch wierszach, bez kropki na koncu linii */
@media (max-width: 479px) {
  #pf-wstep .wst-sep { display: none; }
  #pf-wstep .wst-czesc { display: block; }
}

/* --- korzysci --- */
#pf-wstep .wst-lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 2.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* silnik: "section li:not(.gbp li) { font-size: var(--t3) !important }" */
#pf-wstep .wst-lista .wst-punkt {
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--pf-tekst);
}
/* silnik: "section h3:not(.gbp h3):not(#oferta-lista h3)" ma specyficznosc id - stad id + dwie klasy */
#pf-wstep .wst-punkt .wst-tyt {
  margin: 0 !important;
  font-family: inherit;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  color: var(--pf-naglowek) !important;
  -webkit-text-fill-color: var(--pf-naglowek) !important;
}
/* kwadracik 7 px w akcencie przed tytulem, na wysokosci srodka wielkich liter */
#pf-wstep .wst-punkt .wst-znak {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.7rem;
  vertical-align: 0.2em;
  background: var(--pf-akcent);
}
/* podkreslenie tytulu: gradient 2 px, w spoczynku zwiniety do zera */
#pf-wstep .wst-punkt .wst-nazwa {
  padding-bottom: 0.15em;
  background-image: linear-gradient(var(--pf-akcent), var(--pf-akcent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.4s var(--pf-ease);
}
/* silnik: "main p" i "section p:not(.gbp p)" wymuszaja stopien */
#pf-wstep .wst-punkt .wst-tekst {
  margin: 0.625rem 0 0 !important;
  max-width: 30rem;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: var(--pf-tekst) !important;
  text-wrap: pretty;
}

/* --- tablet: 2 x 2 --- */
@media (min-width: 768px) {
  #pf-wstep .wst-h2 { margin-top: 1.5rem !important; }
  #pf-wstep .wst-tresc { row-gap: 3.5rem; margin-top: 2.75rem; }
  #pf-wstep .wst-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; row-gap: 2.75rem; }
}

/* --- od 1024 px: lewa kolumna 5/12, korzysci 7/12 --- */
@media (min-width: 1024px) {
  #pf-wstep .wst-tresc {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 3rem;
    align-items: start;
    margin-top: 3.5rem;
  }
  #pf-wstep .wst-bok .wst-lead { max-width: 26rem; }
  #pf-wstep .wst-marka { margin-top: 2.5rem; }
  #pf-wstep .wst-lista { column-gap: 2.5rem; row-gap: 3rem; }
}
@media (min-width: 1280px) {
  #pf-wstep .wst-tresc { column-gap: 4rem; }
  #pf-wstep .wst-lista { column-gap: 3rem; }
}

/* --- najazd tylko przy precyzyjnym wskazniku --- */
@media (hover: hover) and (pointer: fine) {
  #pf-wstep .wst-punkt:hover .wst-nazwa { background-size: 100% 2px; }
}

/* --- JEDEN GEST: korzysci podnosza sie po kolei, kwadraciki wyskakuja (tylko z JS) --- */
#pf-wstep.wst-js .wst-punkt { opacity: 0; transform: translateY(18px); }
#pf-wstep.wst-js .wst-punkt .wst-znak { transform: scale(0); }

#pf-wstep.wst-js .wst-lista.pf-widoczne .wst-punkt {
  opacity: 1;
  transform: none;
  transition: opacity 0.65s var(--pf-ease), transform 0.75s var(--pf-ease-out);
  transition-delay: calc(0.1s + var(--wst-i, 0) * 110ms);
}
#pf-wstep.wst-js .wst-lista.pf-widoczne .wst-punkt .wst-znak {
  animation: wst-pyk 0.55s var(--pf-ease) both;
  animation-delay: calc(0.45s + var(--wst-i, 0) * 110ms);
}
@keyframes wst-pyk {
  0% { transform: scale(0) rotate(-45deg); }
  60% { transform: scale(1.35) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@media (prefers-contrast: more) {
  #pf-wstep .wst-miejsce { color: var(--pf-tekst); }
  #pf-wstep .wst-punkt .wst-tekst,
  #pf-wstep .wst-bok .wst-lead { color: #09090B !important; }
}

/* --- ograniczony ruch: od razu stan koncowy --- */
@media (prefers-reduced-motion: reduce) {
  #pf-wstep.wst-js .wst-punkt,
  #pf-wstep.wst-js .wst-lista.pf-widoczne .wst-punkt { opacity: 1 !important; transform: none !important; transition: none !important; }
  #pf-wstep.wst-js .wst-punkt .wst-znak,
  #pf-wstep.wst-js .wst-lista.pf-widoczne .wst-punkt .wst-znak { transform: none !important; animation: none !important; }
  #pf-wstep .wst-punkt .wst-nazwa { transition: none !important; }
}

/* dwa wiersze naglowka od 1024 px (Mateusz 15.09.2026) */
@media (min-width: 1024px) { #pf-wstep .wst-h2 { white-space: nowrap; } }


/* ===== DEMO 4 · 08 OPINIE (wersja 2) =====
   Uklad sekcji "Liczby" z pierwszej wersji demo 4 (sekcje-kopia-przed-v2/05-liczby.html), ktory Mateusz
   chcial zachowac: zdjecie foto-tlo-5 na cala szerokosc pod jednolitym granatem rgba(33, 35, 39,0.92)
   (metoda z Canvy), pf-ciemna; u gory z lewej nadtytul i dwuwierszowy .pf-h2, pod spodem zamkniety pasek
   3 pol z obwodka 1 px i cienkimi liniami miedzy polami. Zamiast przycisku - ocena z Google (5,0 / 5,
   piec zoltych gwiazdek, link "28 opinii na profilu Google" z logo G - to link tekstowy, nie przycisk CTA),
   zamiast liczb - trzy prawdziwe opinie z Google (doslownie, z emoji), wszystkie widoczne naraz.
   UKLAD od 1024 px: gora w dwoch kolumnach - naglowek | ocena wyrownana do dolu naglowka; pasek 3 pol
   w jednym rzedzie (pola rownej wysokosci, stopka pola przy dole).
   640-1023 px: naglowek, pod nim ocena; pola jedno pod drugim, w polu cytat z lewej, podpis z prawej
   (w trzech waskich kolumnach cytaty mialyby po 25 znakow w wierszu i po 10 wierszy).
   Telefon: wszystko jedno pod drugim, podpis pod cytatem.
   Koral tylko w cudzyslowach, kresce nadtytulu, kresce aktywnego pola i obwodce fokusu.
   GEST: pola odslaniaja sie po kolei, gdy pasek wchodzi na ekran (pasek ma wlasne [data-pf-reveal] -
   wspolny obserwator z _baza.js), potem cienka kreska 2 px w koralu u dolu aktywnego pola przesuwa sie
   co 6 s na kolejne pole (pole aktywne lekko rozjasnione). Ponizej 1024 px (pola jedno pod drugim)
   kreska stoi pionowo na lewej krawedzi aktywnego pola i jezdzi w dol. Najechanie na pole przenosi na nie kreske
   i wstrzymuje zmiane. Bez karuzeli - nic sie nie chowa.
   Stan poczatkowy (pola schowane) wlacza dopiero klasa .op-ruch ze skryptu (IntersectionObserver, ruch
   nieograniczony). Gdy obserwator nie ruszy - .op-awaryjnie pokazuje wszystko. Ograniczony ruch: wszystko
   widoczne od razu, bez kreski i bez zmian. */
#pf-opinie {
  --op-linia: #76787C;
  --op-zolty: #BF1E28;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background: var(--pf-czern);
  color: #FFFFFF;
}
/* zdjecie */
#pf-opinie::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("assets/d6e8f9290f3743148d3f.webp") center center / cover no-repeat var(--pf-grafit);
}
/* jednolity granat na zdjeciu */
#pf-opinie::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(9, 9, 11, 0.92);
}

/* sekcja "zdjecie" liczy odstepy sama: pelny rytm sekcji z gory i z dolu */
#pf-opinie > .pf-kontener { padding-top: var(--sekcja) !important; padding-bottom: var(--sekcja) !important; }

/* --- naglowek i ocena --- */
#pf-opinie .op-glowa { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
#pf-opinie .op-naglowek { min-width: 0; }
#pf-opinie .op-h2 { margin: 1.5rem 0 0 !important; }

#pf-opinie .op-ocena {
  justify-self: start;
  min-width: 0;
  font-family: 'Inter', system-ui, sans-serif;
}
#pf-opinie .op-ocena-gora {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  column-gap: 1.25rem;
  row-gap: 0.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--op-linia);
}
#pf-opinie .op-wynik {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  color: #FFFFFF;
}
#pf-opinie .op-liczba {
  display: block;
  font-size: 3.5rem;
  font-weight: 600;
  line-height: 0.82;
  letter-spacing: -0.045em;
  white-space: nowrap;
}
#pf-opinie .op-max {
  display: block;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: #FFFFFF;
}
#pf-opinie .op-gwiazdy { display: flex; gap: 3px; padding-bottom: 2px; }
#pf-opinie .op-gwiazdy svg,
#pf-opinie .op-gw svg { display: block; flex: 0 0 auto; fill: var(--op-zolty); }
#pf-opinie .op-gwiazdy svg { width: 20px; height: 20px; }

/* link do profilu Google: tekst z podkresleniem, nie przycisk */
#pf-opinie .op-profil {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 1rem;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #FFFFFF;
  text-decoration: none;
}
#pf-opinie .op-profil .op-g { display: block; flex: 0 0 auto; width: 18px; height: 18px; }
#pf-opinie .op-profil-tekst {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: #76787C;
  transition: text-decoration-color 0.3s var(--pf-ease);
}
#pf-opinie .op-strzalka {
  display: block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: #FFFFFF;
  transition: color 0.3s var(--pf-ease), transform 0.3s var(--pf-ease);
}
@media (hover: hover) and (pointer: fine) {
  #pf-opinie .op-profil:hover .op-profil-tekst { text-decoration-color: var(--pf-akcent); }
  #pf-opinie .op-profil:hover .op-strzalka { color: #FFFFFF; transform: translate(2px, -2px); }
}
#pf-opinie .op-profil:focus-visible { outline: 2px solid var(--pf-akcent); outline-offset: 4px; }
#pf-opinie .op-profil:focus-visible .op-profil-tekst { text-decoration-color: var(--pf-akcent); }

/* ukryte dla oczu, czytane przez czytnik */
#pf-opinie .op-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- pasek 3 pol (telefon: pola jedno pod drugim) --- */
#pf-opinie .op-pasek {
  position: relative;
  margin-top: 2.5rem;
  border: 1px solid var(--op-linia);
}
#pf-opinie .op-lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* silnik: "section li:not(.gbp li)" z !important */
#pf-opinie .op-lista .op-el {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: 16px !important;
  line-height: 1.6 !important;
  transition: background-color 0.6s var(--pf-ease);
}
#pf-opinie .op-lista .op-el::before,
#pf-opinie .op-lista .op-el::marker { content: none; }
#pf-opinie .op-lista .op-el + .op-el { border-top: 1px solid var(--op-linia); }

#pf-opinie .op-pole {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1.5rem 1.375rem 1.375rem;
  font-family: 'Inter', system-ui, sans-serif;
}
#pf-opinie .op-cudzyslow {
  display: block;
  height: 1.125rem;
  overflow: visible;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 0.9;
  color: var(--pf-akcent);
  -webkit-text-fill-color: var(--pf-akcent);
}
#pf-opinie .op-cytat { margin: 0.875rem 0 1.25rem; padding: 0; border: 0; quotes: none; }
/* silnik: "main p" i "section p:not(.gbp p)" z !important */
#pf-opinie .op-cytat p {
  margin: 0 !important;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  text-wrap: pretty;
}
#pf-opinie .op-stopka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid #76787C;
}
#pf-opinie .op-kto { display: block; min-width: 0; }
#pf-opinie .op-imie {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: #FFFFFF;
}
#pf-opinie .op-zrodlo {
  display: block;
  margin-top: 0.125rem;
  font-size: 13px;
  line-height: 1.4;
  color: #FFFFFF;
}
#pf-opinie .op-gw { display: flex; gap: 2px; flex: 0 0 auto; }
#pf-opinie .op-gw svg { width: 13px; height: 13px; }

/* kreska aktywnego pola - pozycje i szerokosc ustawia skrypt */
#pf-opinie .op-wskaznik {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 2px;
  background: var(--pf-akcent);
  opacity: 0;
  pointer-events: none;
  transform-origin: left center;
  will-change: transform;
}

/* --- od 640 px: pola jedno pod drugim, cytat z lewej, podpis z prawej --- */
@media (min-width: 640px) {
  #pf-opinie .op-pasek { margin-top: 3rem; }
  #pf-opinie .op-pole {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 11.5rem;
    grid-template-rows: auto 1fr;
    column-gap: 2.5rem;
    padding: 1.75rem 2rem 1.875rem;
  }
  #pf-opinie .op-cudzyslow { grid-column: 1; grid-row: 1; }
  #pf-opinie .op-cytat { grid-column: 1; grid-row: 2; margin: 0.875rem 0 0; }
  #pf-opinie .op-stopka {
    grid-column: 2;
    grid-row: 1 / span 2;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.625rem;
    margin-top: 0;
    padding: 0.125rem 0 0 1.5rem;
    border-top: 0;
    border-left: 1px solid #76787C;
  }
}

/* --- od 1024 px: naglowek | ocena, pasek 3 pol w jednym rzedzie --- */
@media (min-width: 1024px) {
  #pf-opinie .op-glowa { grid-template-columns: minmax(0, 1fr) auto; column-gap: 3rem; align-items: end; }
  #pf-opinie .op-h2 { white-space: nowrap; }
  #pf-opinie .op-ocena { justify-self: end; }
  #pf-opinie .op-liczba { font-size: 4rem; }
  #pf-opinie .op-pasek { margin-top: 4rem; }
  #pf-opinie .op-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #pf-opinie .op-lista .op-el + .op-el { border-top: 0; border-left: 1px solid var(--op-linia); }
  #pf-opinie .op-pole {
    display: flex;
    flex-direction: column;
    padding: 1.875rem 1.75rem 1.625rem;
  }
  #pf-opinie .op-cytat { margin: 0.875rem 0 1.5rem; }
  #pf-opinie .op-cytat p { font-size: 15px !important; line-height: 1.65 !important; }
  #pf-opinie .op-stopka {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding: 1rem 0 0;
    border-left: 0;
    border-top: 1px solid #76787C;
  }
}
@media (min-width: 1280px) {
  #pf-opinie .op-pole { padding: 2rem 2.25rem 1.75rem; }
  #pf-opinie .op-cytat p { font-size: 16px !important; line-height: 1.7 !important; }
}

/* --- aktywne pole (tylko ze skryptem) --- */
#pf-opinie.op-ruch .op-lista .op-el.op-aktywne { background-color: rgba(255, 255, 255, 0.06); }
#pf-opinie.op-ruch .op-wskaznik.op-jest { opacity: 1; transition: opacity 0.5s var(--pf-ease); }
#pf-opinie.op-ruch .op-wskaznik.op-jedzie { transition: opacity 0.5s var(--pf-ease), transform 0.85s var(--pf-ease-out), width 0.85s var(--pf-ease-out), height 0.85s var(--pf-ease-out); }

/* --- odslanianie pol po kolei (stan poczatkowy wlacza skrypt) --- */
#pf-opinie.op-ruch .op-lista .op-el > .op-pole { opacity: 0; transform: translateY(18px); }
#pf-opinie.op-ruch .op-pasek.pf-widoczne .op-el > .op-pole {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--pf-ease), transform 0.8s var(--pf-ease-out);
  transition-delay: calc(var(--op-i, 0) * 140ms);
}
/* gdy wspolny obserwator nie ruszy - wszystko widoczne, kreska nadtytulu narysowana */
#pf-opinie.op-awaryjnie .op-lista .op-el > .op-pole { opacity: 1; transform: none; }
#pf-opinie:not(.op-ruch) .pf-nadtytul::after,
#pf-opinie.op-awaryjnie .pf-nadtytul::after { transform: scaleX(1); }

@media (prefers-contrast: more) {
  #pf-opinie .op-zrodlo,
  #pf-opinie .op-max { color: #FFFFFF; }
}

/* --- ograniczony ruch: wszystko od razu na miejscu, bez kreski i bez przejsc --- */
@media (prefers-reduced-motion: reduce) {
  #pf-opinie .op-lista .op-el > .op-pole,
  #pf-opinie.op-ruch .op-lista .op-el > .op-pole,
  #pf-opinie.op-ruch .op-pasek.pf-widoczne .op-el > .op-pole { opacity: 1 !important; transform: none !important; transition: none !important; }
  #pf-opinie .op-wskaznik { display: none !important; }
  #pf-opinie .op-lista .op-el,
  #pf-opinie .op-profil-tekst,
  #pf-opinie .op-strzalka { transition: none !important; }
  #pf-opinie .op-profil:hover .op-strzalka { transform: none; }
}
/* szesc opinii (Mateusz 14.09.2026: "daj 6 opinii"): od 1024 px dwa rzedy po 3 pola;
   linie pionowe tylko miedzy polami w rzedzie, linia pozioma miedzy rzedami */
@media (min-width: 1024px) {
  #pf-opinie .op-lista .op-el:nth-child(3n+1) { border-left: 0; }
  #pf-opinie .op-lista .op-el:nth-child(n+4) { border-top: 1px solid var(--op-linia); }
}
/* podkreslenie-czytanego (Mateusz 14.09.2026: "ten czerwony nie ma sie przesuwac, ma sie tylko podkreslac kafelek
   z czytanym komentarzem"): zamiast jezdzacej kreski kazde pole ma wlasne podkreslenie 2 px w koralu u dolu,
   ktore tylko sie pojawia i gasnie (bez ruchu), gdy pole staje sie aktywne */
#pf-opinie .op-wskaznik { display: none !important; }
#pf-opinie .op-lista .op-el { position: relative; }
#pf-opinie .op-lista .op-el::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--pf-akcent);
  opacity: 0;
  transition: opacity 0.5s var(--pf-ease);
  pointer-events: none;
}
#pf-opinie.op-ruch .op-lista .op-el.op-aktywne::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  #pf-opinie .op-lista .op-el::after { transition: none; }
}


/* ===== DEMO 4 · 09 PYTANIA (FAQ), 15.09.2026 =====
   Mateusz: "w demo 4 chyba jeszcze powinno byc FAQ" (brat ma je w swojej wersji w Claude Design).
   Wyglad jak FAQ w demo 1 (wg zrzutu od Mateusza, z jego poprawkami): lista na cala szerokosc z liniami,
   w wierszu numer 01-04, pytanie i kwadrat z plusem; otwarta pozycja granatowa z koralowa kreska z lewej
   (bez poziomych koralowych kresek), numer w koralu, kwadrat obraca sie w koralowy romb z krzyzykiem;
   najechanie na zamkniete pytanie = szare tlo. Druga pozycja otwarta od poczatku.
   Pytania i odpowiedzi slowo w slowo od Mateusza (te same co w demo 1).
   Miejsce: po opiniach, przed poradnikiem (Mateusz 15.09.2026: "FAQ a pozniej blog").
   Silnik: "section h3", "section p", "section li" z !important - stad id + klasy + !important. */
#pf-pytania { position: relative; background: #FFFFFF; color: var(--pf-tekst); }
#pf-pytania .pt-h2 { margin: 1.25rem 0 0; }

#pf-pytania .pt-lista { margin-top: 3rem; border-top: 1px solid var(--pf-linia); }
#pf-pytania .pt-poz {
  position: relative;
  border-bottom: 1px solid var(--pf-linia);
  /* zamkniete pytanie zawsze szare jak zamkniety kafel (Mateusz 15.09.2026) */
  background: var(--pf-mgla);
  transition: background-color 0.35s ease;
}
#pf-pytania .pt-poz .pt-naglowek {
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
#pf-pytania .pt-przycisk {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.75rem;
  width: 100%;
  min-height: 88px;
  margin: 0;
  padding: 16px !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
#pf-pytania .pt-przycisk:focus-visible { outline: 2px solid var(--pf-czern); outline-offset: -2px; }
#pf-pytania .pt-nr {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--pf-tekst-2);
  transition: color 0.3s ease;
}
#pf-pytania .pt-tekst {
  padding-right: 1rem;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--pf-czern);
  transition: color 0.3s ease;
}
/* kwadrat z plusem; otwarty - koralowy romb z krzyzykiem (plus obrocony o 45 stopni) */
#pf-pytania .pt-znak {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--pf-czern);
  background: transparent;
  transition: transform 0.4s var(--pf-ease), background-color 0.3s ease, border-color 0.3s ease;
}
#pf-pytania .pt-znak::before,
#pf-pytania .pt-znak::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--pf-czern);
  transform: translate(-50%, -50%);
  transition: background-color 0.3s ease;
}
#pf-pytania .pt-znak::after { transform: translate(-50%, -50%) rotate(90deg); }

/* odpowiedz: rozwijanie przez wysokosc wiersza siatki */
#pf-pytania .pt-odp {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--pf-ease);
}
#pf-pytania .pt-odp-in { min-height: 0; overflow: hidden; }
#pf-pytania .pt-odp p {
  max-width: 36rem;
  margin: 0 !important;
  padding: 16px 16px 28px 16px !important;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  text-wrap: pretty;
}

/* otwarta pozycja: granat, koralowa kreska tylko z lewej */
#pf-pytania .pt-poz.pt-otwarte { background: var(--pf-czern); border-bottom-color: var(--pf-czern); box-shadow: inset 3px 0 0 var(--pf-akcent); }
#pf-pytania .pt-otwarte .pt-nr { color: var(--pf-akcent); }
#pf-pytania .pt-otwarte .pt-tekst { color: #FFFFFF; }
#pf-pytania .pt-otwarte .pt-znak { background: var(--pf-akcent); border-color: var(--pf-akcent); transform: rotate(45deg); }
#pf-pytania .pt-otwarte .pt-znak::before,
#pf-pytania .pt-otwarte .pt-znak::after { background: #FFFFFF; }
#pf-pytania .pt-otwarte .pt-odp { grid-template-rows: 1fr; }
/* linia nad otwarta pozycja znika pod granatem */
#pf-pytania .pt-poz:has(+ .pt-otwarte) { border-bottom-color: transparent; }

/* najechanie na zamkniete pytanie: szare tlo, kwadrat w granacie */
@media (hover: hover) and (pointer: fine) {
  #pf-pytania .pt-poz:not(.pt-otwarte):hover { background: color-mix(in srgb, var(--pf-mgla), #09090B 4%); }
  #pf-pytania .pt-poz:not(.pt-otwarte) .pt-przycisk:hover .pt-znak { background: var(--pf-czern); }
  #pf-pytania .pt-poz:not(.pt-otwarte) .pt-przycisk:hover .pt-znak::before,
  #pf-pytania .pt-poz:not(.pt-otwarte) .pt-przycisk:hover .pt-znak::after { background: #FFFFFF; }
}

/* --- od 640 px --- */
@media (min-width: 640px) {
  #pf-pytania .pt-lista { margin-top: 4rem; }
  #pf-pytania .pt-przycisk { grid-template-columns: 4.5rem minmax(0, 1fr) auto; column-gap: 0; min-height: 100px; padding: 20px 24px !important; }
  #pf-pytania .pt-nr { font-size: 14px; }
  #pf-pytania .pt-tekst { padding-right: 2rem; font-size: 20px; }
  #pf-pytania .pt-znak { width: 52px; height: 52px; }
  #pf-pytania .pt-odp p { max-width: calc(4.5rem + 24px + 34rem); padding: 14px 24px 40px calc(24px + 4.5rem) !important; font-size: 16px !important; }
}

/* --- od 1024 px --- */
@media (min-width: 1024px) {
  #pf-pytania .pt-przycisk { grid-template-columns: 5.75rem minmax(0, 1fr) auto; min-height: 112px; padding: 20px 32px !important; }
  #pf-pytania .pt-tekst { font-size: 22px; }
  #pf-pytania .pt-znak { width: 56px; height: 56px; }
  #pf-pytania .pt-odp p { max-width: calc(5.75rem + 32px + 34rem); padding: 16px 32px 44px calc(32px + 5.75rem) !important; }
}

/* odslanianie: bez skryptu sekcji i gdy wspolny obserwator nie ruszy - wszystko widoczne */
#pf-pytania:not(.pt-js) .pf-wjazd,
#pf-pytania.pt-awaryjnie .pf-wjazd { opacity: 1; transform: none; }
#pf-pytania:not(.pt-js) .pf-nadtytul::after,
#pf-pytania.pt-awaryjnie .pf-nadtytul::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  #pf-pytania .pt-poz, #pf-pytania .pt-nr, #pf-pytania .pt-tekst, #pf-pytania .pt-znak,
  #pf-pytania .pt-znak::before, #pf-pytania .pt-znak::after, #pf-pytania .pt-odp { transition: none !important; }
}

/* system naglowkow (15.09.2026): odstep nadtytul-naglowek 24 px od 768 px jak w demo 2 i 3 (na telefonie 20 px bez zmian) */
@media (min-width: 768px) {
  #pf-pytania .pt-h2 { margin-top: 1.5rem; }
}


/* ===== DEMO 4 · 09 PORADNIK (wersja 3, zrzut 7 = sekcja #poradnik brata, pomiary przy 1440) =====
   Tlo biale. Gora: nadtytul "Poradnik" + dwuwierszowy .pf-h2 (czarny), z prawej na linii dolu naglowka
   przycisk obrysowy "Wszystkie artykuly" (#!poradnik, 40 px).
   Od 1024 px (przy 1440: kontener 1104 px) pod naglowkiem 48 px, dwie rowne kolumny po 520 px, odstep 64 px
   (przy 1024 odstep 40 px, rosnie liniowo do 64 px przy 1152 px):
     - lewa: wyrozniony wpis - zdjecie 520 x 403 (poziome, bez kreski nad zdjeciem), 28 px, kategoria
       (12 px / 600, wersaliki, 0,16 em, koral), 24 px, tytul 30 px / 1,15 (czern), 24 px, zajawka JEDEN
       wiersz 16 px. Cztery zdjecia leza jedno na drugim, cztery opisy w jednej komorce siatki (widac
       aktywny) - wysokosc nie skacze przy podmianie.
     - prawa: lista 4 wpisow, linia 1 px u gory (rowno z gora zdjecia) i miedzy wpisami, wpisy rownej
       wysokosci (lista = wysokosc lewej kolumny, ok. 150 px na wpis); numer 16 px (szary, aktywny
       w koralu), tresc wcieta 60 px (przy 1024: 48 px): kategoria, tytul 21 px (maks. 2 wiersze), zajawka
       JEDEN wiersz 16 px; aktywny tytul i zajawka odsuwaja sie o 6 px; kwadracik 8 px w koralu z lewej
       zjezdza do aktywnego numeru. Zajawki: krotkie streszczenia artykulow (maks. ok. 400 px przy 16 px,
       zeby zostaly w jednym wierszu takze przy 1024 px).
   JEDEN GEST (jak .blg-wipe.jedzie / .wraca u brata): najechanie albo fokus na wpisie z listy ->
   granatowa zaslona #212327 wjezdza na zdjecie od lewej (scaleX 0 -> 1, 0,45 s cubic-bezier(.7,0,.3,1)),
   tekst gasnie, pod zaslona podmieniaja sie zdjecie, tekst i adres linku, zaslona schodzi w prawo.
   Szybki przejazd myszka: podmiana zawsze do ostatnio wskazanego wpisu i zawsze naraz (zdjecie + tekst).
   Bez automatycznego przelaczania. Klikniecie otwiera wpis (#!poradnik/<slug>).
   Ponizej 1024 px: wyrozniony wpis (zdjecie 16:10), pod nim lista zwyklych linkow bez wpisu, ktory
   stoi wyzej; zajawki moga sie zawinac.
   Wejscie: .pf-wjazd po kolei. Stan poczatkowy tylko ze skryptem sekcji (.bl-js); bez skryptu i gdy
   wspolny obserwator nie ruszy (.bl-awaryjnie) - wszystko widoczne. Ograniczony ruch: bez zaslony,
   podmiana od razu.
   SILNIK: "main h3", "section h3", "main p", "section p", "section li" z !important - rozmiary spod
   #pf-poradnik z klasami i z !important. Bez dat (dane wpisow ich nie maja). */
#pf-poradnik {
  --bl-linia: var(--pf-linia);
  --bl-zaslona-czas: 0.45s;
  --bl-zaslona-krzywa: cubic-bezier(0.7, 0, 0.3, 1);
  background: var(--pf-biel);
  color: var(--pf-tekst);
  overflow-x: clip;
}

/* --- naglowek + przycisk --- */
#pf-poradnik .bl-glowa {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
}
#pf-poradnik .bl-glowa-tytul { min-width: 0; max-width: 100%; }
#pf-poradnik .bl-h2 { margin: 1.25rem 0 0; }
/* telefon: "dla przedsiebiorcow" w jednej linii (szerokosc napisu = ok. 9,16 x rozmiar pisma) */
@media (max-width: 639.98px) {
  main #pf-poradnik .bl-h2 { font-size: min(2.4rem, calc((100vw - 3rem) / 9.4)) !important; }
}
#pf-poradnik .bl-akcja { flex: 0 0 auto; }

/* --- siatka: do 1023 px jedna kolumna --- */
#pf-poradnik .bl-siatka {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 2.75rem;
  margin-top: 2.5rem;
}

/* --- wyrozniony wpis --- */
#pf-poradnik .bl-wyrozniony {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
#pf-poradnik .bl-foto {
  position: relative;
  display: block;
  flex: 0 0 auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--pf-mgla);
}
#pf-poradnik .bl-zdjecie {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
#pf-poradnik .bl-zdjecie.bl-akt { opacity: 1; }
/* kadr: twarze / telefon z przodu zostaja w kadrze (zdjecia 900x520) */
#pf-poradnik .bl-zdjecie--c { object-position: 78% 50%; }
#pf-poradnik .bl-zdjecie--d { object-position: 65% 50%; }
@media (hover: hover) and (pointer: fine) {
  #pf-poradnik .bl-wyrozniony:hover .bl-zdjecie.bl-akt { transform: scale(1.04); }
}
#pf-poradnik .bl-wyrozniony:focus-visible { outline-offset: 4px; }

/* zaslona: jedzie od lewej (scaleX 0 -> 1), schodzi w prawo (scaleX 1 -> 0 od prawej krawedzi);
   gdy trzeba zakryc ponownie w trakcie schodzenia - wraca od prawej (bez skoku) */
#pf-poradnik .bl-zaslona {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--pf-czern);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
#pf-poradnik .bl-zaslona.bl-jedzie {
  transform: scaleX(1);
  transition: transform var(--bl-zaslona-czas) var(--bl-zaslona-krzywa);
}
#pf-poradnik .bl-zaslona.bl-zawraca {
  transform: scaleX(1);
  transform-origin: right center;
  transition: transform var(--bl-zaslona-czas) var(--bl-zaslona-krzywa);
}
#pf-poradnik .bl-zaslona.bl-wraca {
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--bl-zaslona-czas) var(--bl-zaslona-krzywa);
}

/* opisy: cztery w jednej komorce, widac aktywny */
#pf-poradnik .bl-opisy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 1.25rem;
}
#pf-poradnik .bl-opis {
  grid-area: 1 / 1;
  min-width: 0;
  visibility: hidden;
}
#pf-poradnik .bl-opis.bl-akt { visibility: visible; }
#pf-poradnik .bl-opis > * {
  transition: opacity 0.35s ease, transform 0.35s ease;
}
#pf-poradnik .bl-opis .bl-zajawka { transition-delay: 0.05s; }
#pf-poradnik .bl-opisy.bl-zmiana .bl-opis > * { opacity: 0; transform: translateY(8px); }

#pf-poradnik .bl-kat {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pf-akcent);
}
/* silnik: "section h3:not(...)" i "main h3" z !important - id + dwie klasy */
#pf-poradnik .bl-opis .bl-tytul {
  margin: 0.875rem 0 0 !important;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(1.5rem, 2.5vw, 1.875rem) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: var(--pf-naglowek) !important;
  -webkit-text-fill-color: var(--pf-naglowek) !important;
  text-wrap: pretty;
}
/* silnik: "main p" i "section p:not(.gbp p)" z !important */
#pf-poradnik .bl-opis .bl-zajawka {
  margin: 0.875rem 0 0 !important;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: var(--pf-tekst) !important;
  -webkit-text-fill-color: var(--pf-tekst) !important;
  text-wrap: pretty;
}

/* --- lista wpisow --- */
#pf-poradnik .bl-spis { position: relative; min-width: 0; }
#pf-poradnik .bl-marker {
  position: absolute;
  left: -22px;
  top: 8px;
  display: none;
  width: 8px;
  height: 8px;
  background: var(--pf-akcent);
  /* top: zjazd do aktywnego numeru; opacity/transform: wejscie jak .pf-wjazd (--pf-i: 3 -> 330 ms) */
  transition: top 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.7s var(--pf-ease) 0.33s, transform 0.7s var(--pf-ease) 0.33s;
}
#pf-poradnik .bl-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* silnik: "section li:not(.gbp li)" z !important */
#pf-poradnik .bl-lista .bl-poz {
  position: relative;
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--bl-linia);
  font-size: 16px !important;
  line-height: 1.5 !important;
}
#pf-poradnik .bl-lista .bl-poz::before,
#pf-poradnik .bl-lista .bl-poz::marker { content: none; }
/* do 1023 px lista nie powtarza wpisu, ktory stoi wyzej jako wyrozniony */
#pf-poradnik .bl-lista .bl-poz.bl-akt { display: none; }

#pf-poradnik .bl-link {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 14px;
  align-items: baseline;
  padding: 1.25rem 0;
  color: inherit;
  text-decoration: none;
}
#pf-poradnik .bl-link:focus-visible { outline-offset: 2px; }
#pf-poradnik .bl-nr {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0.04em;
  color: var(--pf-tekst-2);
  transition: color 0.3s ease;
}
#pf-poradnik .bl-tresc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
#pf-poradnik .bl-tytul-m {
  display: block;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(18px, 1.7vw, 21px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--pf-naglowek);
  text-wrap: pretty;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
#pf-poradnik .bl-opis-m {
  display: none;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--pf-tekst);
  text-wrap: pretty;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
#pf-poradnik .bl-poz.bl-akt .bl-nr { color: var(--pf-akcent); }
#pf-poradnik .bl-poz.bl-akt .bl-tytul-m,
#pf-poradnik .bl-poz.bl-akt .bl-opis-m { transform: translateX(6px); }

/* --- od 640 px: zajawki w liscie, szerszy numer --- */
@media (min-width: 640px) {
  #pf-poradnik .bl-opis-m { display: block; }
  #pf-poradnik .bl-link { grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; padding: 22px 0; }
  #pf-poradnik .bl-siatka { margin-top: 3rem; }
}

/* --- od 1024 px: dwie rowne kolumny jak na zrzucie, podmiana wpisu z listy ---
   odstep kolumn 40 px (1024) -> 64 px (od 1152), wciecie listy 48 -> 60 px, tytul z lewej 26 -> 30 px,
   tytul w liscie 18 -> 21 px; od 1152 px kontener ma 1104 px i wymiary sa jak przy 1440 */
@media (min-width: 1024px) {
  #pf-poradnik .bl-siatka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(40px, 18.75vw - 152px, 64px);
    align-items: stretch;
    margin-top: 48px;
  }
  /* zdjecie poziome 520 x 403 (przy 1440), stala proporcja - nie rosnie do dolu listy */
  #pf-poradnik .bl-foto { aspect-ratio: 520 / 403; }
  #pf-poradnik .bl-opisy { margin-top: 28px; }
  #pf-poradnik .bl-opis .bl-tytul {
    margin-top: 24px !important;
    font-size: clamp(26px, 3.125vw - 6px, 30px) !important;
  }
  #pf-poradnik .bl-opis .bl-zajawka { margin-top: 24px !important; }

  #pf-poradnik .bl-marker { display: block; }
  /* lista = wysokosc lewej kolumny; cztery wpisy rownej wysokosci, linia u gory rowno z gora zdjecia */
  #pf-poradnik .bl-spis { display: flex; flex-direction: column; }
  #pf-poradnik .bl-lista { flex: 1 1 auto; display: grid; grid-auto-rows: 1fr; }
  #pf-poradnik .bl-lista .bl-poz,
  #pf-poradnik .bl-lista .bl-poz.bl-akt { display: flex; flex-direction: column; }
  #pf-poradnik .bl-link {
    flex: 1 1 auto;
    grid-template-columns: clamp(48px, 9.375vw - 48px, 60px) minmax(0, 1fr);
    column-gap: 0;
    align-content: center;
    padding: 16px 0;
  }
  #pf-poradnik .bl-tytul-m { font-size: clamp(18px, 2.34375vw - 6px, 21px); }
}

/* --- odslanianie: stan poczatkowy .pf-wjazd tylko ze skryptem sekcji; bez skryptu i gdy wspolny
   obserwator nie ruszy (.bl-awaryjnie) wszystko widoczne, kreska nadtytulu narysowana --- */
#pf-poradnik:not(.bl-js) .pf-wjazd,
#pf-poradnik.bl-awaryjnie .pf-wjazd { opacity: 1; transform: none; }
#pf-poradnik:not(.bl-js) .pf-nadtytul::after,
#pf-poradnik.bl-awaryjnie .pf-nadtytul::after { transform: scaleX(1); }

/* --- ograniczony ruch: wszystko od razu, podmiana bez zaslony i bez przesuwania --- */
@media (prefers-reduced-motion: reduce) {
  #pf-poradnik .pf-wjazd { opacity: 1 !important; transform: none !important; transition: none !important; }
  #pf-poradnik .bl-zaslona { display: none !important; }
  #pf-poradnik .bl-opis > *,
  #pf-poradnik .bl-nr,
  #pf-poradnik .bl-tytul-m,
  #pf-poradnik .bl-opis-m,
  #pf-poradnik .bl-marker,
  #pf-poradnik .bl-zdjecie { transition: none !important; }
  #pf-poradnik .bl-opisy.bl-zmiana .bl-opis > * { opacity: 1; transform: none; }
  #pf-poradnik .bl-wyrozniony:hover .bl-zdjecie.bl-akt { transform: none; }
}
/* zajawki w liscie przy 1024-1279 px: 15 px i jeden wiersz (krotkie teksty, Mateusz 14.09.2026) */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  #pf-poradnik .bl-lista .bl-opis-m { font-size: 15px !important; }
  html body #pf-poradnik .bl-opisy .bl-opis .bl-tytul { font-size: 22px !important; }
}
/* od 1280 px zajawka w liscie 15 px w jednym wierszu (prawdziwe zdania z artykulow maja ok. 60 znakow) */
@media (min-width: 1280px) {
  #pf-poradnik .bl-lista .bl-opis-m { font-size: 14.5px !important; letter-spacing: -0.005em; white-space: nowrap; }
}
/* pelne tytuly wpisow: tytul wyroznionego wpisu 24 px od 1024 px, zeby miescil sie w 2 wierszach */
@media (min-width: 1024px) {
  html body #pf-poradnik .bl-opisy .bl-opis .bl-tytul { font-size: 24px !important; line-height: 1.2 !important; }
}
/* rowno-z-lista (Mateusz 14.09.2026: "zdjęcie niższe i tekst pod spodem, ale zrobione dokładnie jak po prawej,
   wtedy ładnie się zlicuje lewa i prawa"). Od 1024 px siatka ma 4 wiersze = 4 wpisy z listy (subgrid):
   zdjecie zajmuje wiersze 1-3 (od gornej linii listy do linii nad wpisem 04), opis pod zdjeciem stoi w wierszu 4
   i ma te same rozmiary i odstepy co wpis z prawej - kategoria, tytul i zajawka w tych samych liniach co wpis 04,
   dol lewej i prawej kolumny w jednej linii. Cztery opisy leza w jednej komorce (wysokosc nie skacze). */
@media (min-width: 1024px) {
  #pf-poradnik .bl-siatka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    row-gap: 0;
    align-items: stretch;
  }
  #pf-poradnik .bl-wyrozniony {
    grid-column: 1;
    grid-row: 1 / span 4;
    display: grid;
    grid-template-rows: subgrid;
    height: auto;
  }
  #pf-poradnik .bl-foto { grid-row: 1 / span 3; aspect-ratio: auto; height: 100%; min-height: 0; }
  #pf-poradnik .bl-opisy {
    grid-row: 4;
    margin-top: 0 !important;
    padding-top: 17px;   /* 1 px linii + 16 px wpisu + 1 px wyrownania linii pisma z prawej */
    border-top: 1px solid transparent;
  }
  #pf-poradnik .bl-spis { grid-column: 2; grid-row: 1 / span 4; display: grid; grid-template-rows: subgrid; }
  #pf-poradnik .bl-lista { grid-row: 1 / span 4; display: grid; grid-template-rows: subgrid; grid-auto-rows: auto; }
  #pf-poradnik .bl-lista .bl-poz,
  #pf-poradnik .bl-lista .bl-poz.bl-akt { display: flex; flex-direction: column; }
  #pf-poradnik .bl-link { align-content: start; }
  #pf-poradnik .bl-lista .bl-poz:last-child .bl-link { padding-bottom: 0; }
  /* opis pod zdjeciem = wpis z prawej: kategoria, 8 px, tytul jak w liscie, 8 px, zajawka jak w liscie */
  #pf-poradnik .bl-opis { display: flex; flex-direction: column; gap: 8px; }
  html body #pf-poradnik .bl-opisy .bl-opis .bl-tytul {
    margin: 0 !important;
    font-size: clamp(18px, 2.34375vw - 6px, 21px) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.015em !important;
  }
  html body #pf-poradnik .bl-opisy .bl-opis .bl-zajawka {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
}
@media (min-width: 1280px) {
  html body #pf-poradnik .bl-opisy .bl-opis .bl-zajawka { font-size: 14.5px !important; letter-spacing: -0.005em; white-space: nowrap; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  html body #pf-poradnik .bl-opisy .bl-opis .bl-zajawka,
  html body #pf-poradnik .bl-lista .bl-opis-m { font-size: 14px !important; white-space: nowrap; }
}

/* system naglowkow (15.09.2026): odstep nadtytul-naglowek 24 px od 768 px jak w demo 2 i 3
   (ponizej 20 px bez zmian); od 1024 px naglowek-siatka 56 px (bylo 48 px) */
@media (min-width: 768px) {
  #pf-poradnik .bl-h2 { margin-top: 1.5rem; }
}
@media (min-width: 1024px) {
  #pf-poradnik .bl-siatka { margin-top: 56px; }
}


/* ===== DEMO 4 v2 · 10 CTA (wersja 3 - wymiary ze zrzutu Mateusza, pas #dlaczego brata) =====
   Zdjecie foto-tlo-1 na cala szerokosc pod jednolitym granatem rgba(33, 35, 39,0.90), pf-ciemna. Bez nadtytulu.
   PRZY 1440 (kontener od x=168, szerokosc 1104):
   - pas ok. 494 px: odstep 103 px z gory (gora liter h2 ok. 115 px) i 107 px z dolu, tresc wysrodkowana w pionie;
   - z lewej blok 520 px: h2 60 px (Space Grotesk 600, interlinia 1,12) sam lamie sie na 3 wiersze,
     36 px nizej przycisk w koralu z ikona sluchawki (wymiary przycisku z fundamentu - 40 px, 14 px / 500);
   - kolumny 520fr | 519fr z odstepem 65 px -> liczby od x=753; w liczbach 2 kolumny z odstepem 35 px -> druga od x=1030;
   - kazda liczba: pionowa kreska 2 px w koralu z lewej na cala wysokosc (ok. 122 px), tresc 22 px od kreski,
     liczba 72 px (Space Grotesk 600, biel), pod nia podpis w dwoch wierszach 16 px (biel 0,78).
   Ponizej 1024 px: h2 (max. 520 px), przycisk, pod spodem liczby - od 560 px obok siebie, na telefonie jedna pod druga.
   JEDEN GEST: kreski w koralu rysuja sie od gory, liczby i podpisy wchodza po kolei (lista ma wlasne
   [data-pf-reveal]). Stan poczatkowy wlacza dopiero .ct-js (skrypt) - bez skryptu, bez IntersectionObserver
   i przy ograniczonym ruchu wszystko widac od razu. */
#pf-cta {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background: var(--pf-czern);
  color: #FFFFFF;
}
/* zdjecie */
#pf-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("assets/f6523745a27557d5594c.webp") center center / cover no-repeat var(--pf-grafit);
}
/* jednolity granat na zdjeciu */
#pf-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(9, 9, 11, 0.9);
}

/* sekcja "zdjecie" liczy odstepy sama (silnik daje pierwszemu div-owi var(--sekcja)) */
#pf-cta > .pf-kontener { padding-top: var(--sekcja) !important; padding-bottom: var(--sekcja) !important; }

/* --- uklad: telefon i tablet - jedna kolumna --- */
#pf-cta .ct-uklad { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2.75rem; }
#pf-cta .ct-tresc { min-width: 0; container-type: inline-size; }

/* --- naglowek: sam lamie sie na 3 wiersze w bloku ok. 520 px, bez kropki --- */
#pf-cta .ct-h2 {
  max-width: 32.5rem;
  margin: 0 !important;
  font-size: 2.125rem !important;
  font-size: clamp(1.875rem, 10.4cqi, 3.75rem) !important;
  line-height: 1.12 !important;
  text-wrap: balance;
}

/* --- przycisk (wymiary z fundamentu i bloku pf-przyciski - bez nadpisan) --- */
#pf-cta .ct-akcja { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 1.75rem; }
#pf-cta .ct-przycisk svg { flex: 0 0 auto; display: block; }
/* ikona stoi przed napisem - na najechanie nie ucieka w prawo */
#pf-cta .ct-przycisk:hover svg { transform: none; }

/* --- liczby --- */
#pf-cta .ct-liczby {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 2rem;
  margin: 0;
  padding: 0;
}
#pf-cta .ct-poz {
  position: relative;
  min-width: 0;
  padding: 0 0 0 22px;
}
/* pionowa kreska 2 px w koralu na wysokosc liczby i podpisu */
#pf-cta .ct-poz::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--pf-akcent);
  transform-origin: center top;
}
#pf-cta .ct-liczba {
  display: block;
  margin: 0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 3rem;
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: #FFFFFF;
}
#pf-cta .ct-podpis {
  display: block;
  margin: 2px 0 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #FFFFFF;
}
/* drugi wiersz podpisu zawsze od nowej linii */
#pf-cta .ct-wiersz { display: block; }

/* --- od 560 px: przycisk szerokosci napisu, liczby obok siebie --- */
@media (min-width: 560px) {
  #pf-cta .ct-akcja { display: flex; }
  #pf-cta .ct-liczby { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 35px; max-width: 32.5rem; }
  /* podpis zawsze w dwoch wierszach */
  #pf-cta .ct-podpis { white-space: nowrap; }
}

@media (min-width: 640px) {
  #pf-cta .ct-uklad { row-gap: 3.5rem; }
  #pf-cta .ct-akcja { margin-top: 36px; }
}

/* --- od 1024 px: jak na zrzucie - tekst 520 | liczby w dwoch kolumnach, srodek w pionie --- */
@media (min-width: 1024px) {
  /* gora liter h2 ok. 115 px od gory pasa, pas ok. 494 px */
  #pf-cta > .pf-kontener { padding-top: 103px !important; padding-bottom: 107px !important; }
  /* przycisk na zrzucie mial 46 px, u nas 40 px (zasada przyciskow) - 6 px wyrownania pod nim,
     zeby liczby (srodek w pionie) staly jak na zrzucie: kreski ok. 185-307 px od gory pasa */
  #pf-cta .ct-tresc { padding-bottom: 6px; }
  /* odstepy 65 px i 35 px przy 1440, przy 1024 proporcjonalnie mniejsze - podpis "od poniedzialku do piatku" miesci sie w wierszu */
  #pf-cta .ct-uklad {
    grid-template-columns: minmax(0, 520fr) minmax(0, 519fr);
    column-gap: 65px;
    column-gap: clamp(40px, 4.514vw, 65px);
    align-items: center;
  }
  #pf-cta .ct-h2 { max-width: none; font-size: 2.5rem !important; font-size: min(3.75rem, 11.54cqi) !important; }
  #pf-cta .ct-liczby { max-width: none; column-gap: 35px; column-gap: clamp(20px, 2.431vw, 35px); }
}

/* --- JEDEN GEST: kreski od gory, liczby i podpisy po kolei (tylko z .ct-js) --- */
#pf-cta.ct-js .ct-poz::before {
  transform: scaleY(0);
  transition: transform 0.3s var(--pf-ease);
}
#pf-cta.ct-js .ct-liczba,
#pf-cta.ct-js .ct-podpis {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.3s var(--pf-ease), transform 0.3s var(--pf-ease);
}
#pf-cta.ct-js .ct-liczby.pf-widoczne .ct-poz::before {
  transform: scaleY(1);
  transition: transform 0.9s var(--pf-ease-out);
  transition-delay: calc(0.1s + var(--ct-i, 0) * 160ms);
}
#pf-cta.ct-js .ct-liczby.pf-widoczne .ct-liczba,
#pf-cta.ct-js .ct-liczby.pf-widoczne .ct-podpis {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--pf-ease), transform 0.8s var(--pf-ease-out);
}
#pf-cta.ct-js .ct-liczby.pf-widoczne .ct-liczba { transition-delay: calc(0.3s + var(--ct-i, 0) * 160ms); }
#pf-cta.ct-js .ct-liczby.pf-widoczne .ct-podpis { transition-delay: calc(0.42s + var(--ct-i, 0) * 160ms); }

@media (prefers-contrast: more) {
  #pf-cta .ct-podpis { color: #FFFFFF; }
}

/* --- ograniczony ruch: wszystko widoczne od razu --- */
@media (prefers-reduced-motion: reduce) {
  #pf-cta .ct-poz::before,
  #pf-cta.ct-js .ct-poz::before,
  #pf-cta.ct-js .ct-liczby.pf-widoczne .ct-poz::before { transform: none !important; transition: none !important; }
  #pf-cta.ct-js .ct-liczba,
  #pf-cta.ct-js .ct-podpis,
  #pf-cta.ct-js .ct-liczby.pf-widoczne .ct-liczba,
  #pf-cta.ct-js .ct-liczby.pf-widoczne .ct-podpis { opacity: 1 !important; transform: none !important; transition: none !important; }
}


/* ===== PERFEKT · 12 KONTAKT =====
   Formularz w ukladzie z Machaly: biala sekcja, po lewej naglowek z danymi biura,
   po prawej pola. Zmiany tylko kolorystyczne (czerwien/koral z palety OPTIMY zamiast
   granatu i niebieskiego) oraz przycisk .pf-przycisk zamiast pigulki z gradientem.
   Dane po lewej sa te same co u Machaly: adres, telefon, e-mail. */
#pf-kontakt { background: #FFFFFF; }
#pf-kontakt .kon-uklad { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.5rem; }
/* naglowek (14.09.2026): nadtytul i dwuwierszowy .pf-h2 z fundamentu; .pf-h2 ma margin 0 */
#pf-kontakt .kon-h2 { margin: 1.5rem 0 0 !important; }
#pf-kontakt .kon-wstep { margin-top: 1.75rem; max-width: 32rem; }
#pf-kontakt .kon-dane { margin: 2.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 1.25rem; }
#pf-kontakt .kon-dane li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--pf-czern);
}
#pf-kontakt .kon-dane a { color: inherit; text-decoration: none; }
#pf-kontakt .kon-dane a:hover, #pf-kontakt .kon-dane a:focus-visible { color: var(--pf-akcent); }
#pf-kontakt .kon-ikona { display: inline-flex; flex: 0 0 auto; color: var(--pf-czern); }

#pf-kontakt .kon-para { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
#pf-kontakt .kon-pole { margin: 0 0 1.25rem; display: block; }
#pf-kontakt .kon-para .kon-pole { margin-bottom: 0; }
#pf-kontakt label {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 14px;
  font-weight: 600;
  color: var(--pf-czern);
}
#pf-kontakt .kon-wymagane { color: var(--pf-akcent); }
#pf-kontakt input[type="text"],
#pf-kontakt input[type="email"],
#pf-kontakt input[type="tel"],
#pf-kontakt textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid #76787C;
  border-radius: 0;
  background: #FFFFFF;
  color: var(--pf-czern);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#pf-kontakt textarea { resize: vertical; min-height: 9rem; }
#pf-kontakt input::placeholder, #pf-kontakt textarea::placeholder { color: #76787C; }
#pf-kontakt input:focus, #pf-kontakt textarea:focus {
  outline: none;
  border-color: var(--pf-czern);
  box-shadow: 0 0 0 3px rgba(191, 30, 40, 0.16);
}
#pf-kontakt .kon-zgoda { display: flex; align-items: flex-start; gap: 0.75rem; margin: 0.25rem 0 1.75rem; }
#pf-kontakt .kon-zgoda input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--pf-akcent); flex: 0 0 auto; }
#pf-kontakt .kon-zgoda label {
  margin: 0;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1.5 !important;
  color: var(--pf-tekst) !important;
}
#pf-kontakt .kon-wyslij { padding: 0 2rem; min-height: 52px; }
#pf-kontakt .kon-notka {
  margin: 1.25rem 0 0;
  max-width: 34rem;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--pf-tekst) !important;
}

@media (min-width: 640px) {
  #pf-kontakt .kon-para { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  #pf-kontakt .kon-uklad { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 5rem; }
}


  /* sasiedzi o tym samym tle: po polowie odstepu (zasada z Machaly) */
  #pf-zakres > div { padding-bottom: calc(var(--sekcja) / 2) !important; }
  #pf-jak > div { padding-top: calc(var(--sekcja) / 2) !important; }
  #pf-kroki > div { padding-bottom: calc(var(--sekcja) / 2) !important; }
  #pf-zalety > div { padding-top: calc(var(--sekcja) / 2) !important; }
  #pf-onas > div { padding-bottom: calc(var(--sekcja) / 2) !important; }
  #pf-wstep > div { padding-top: calc(var(--sekcja) / 2) !important; }
  #pf-pytania > div { padding-bottom: calc(var(--sekcja) / 2) !important; }
  #pf-poradnik > div { padding-top: calc(var(--sekcja) / 2) !important; }


  footer .sekcja-ciemna { background-color: #09090B !important; }
  html body #site-header.naglowek-czarny { background-color: #09090B !important; }


  /* przyciski 40 px jak CTA w pasku (klient 14.09.2026) */
  main#strona-glowna section[id^="pf-"] .pf-przycisk { min-height: 40px !important; padding: 9.5px 20px !important; font-size: 14px !important; font-weight: 500 !important; line-height: 21px !important; }
  @media (max-width: 639.98px) {
    main#strona-glowna section[id^="pf-"] .pf-przycisk { white-space: normal !important; text-align: center; }
  }


  .ma-poswiate { position: relative; overflow: hidden; }
  .ma-poswiate > .poswiata-tlo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
  .poswiata-tlo > canvas { display: block; width: 100%; height: 100%; position: relative; z-index: 1; opacity: 0; transform: translateZ(0); transition: opacity 0.8s ease; }
  .poswiata-tlo > canvas.loaded { opacity: 1; }
  .poswiata-tlo > .poswiata-rog { position: absolute; inset: 0; z-index: 3; background: radial-gradient(circle at top left, rgba(191, 30, 40, 0.3) 0%, rgba(191, 30, 40, 0.22) 5%, rgba(9, 9, 11, 0) 48%); }
  .ma-poswiate > :not(.poswiata-tlo) { position: relative; z-index: 1; }
  /* hero zaczyna sie pod paskiem menu, a pasek na gorze strony jest przezroczysty: poswiata swieci tez pod menu */
  #top.ma-poswiate { margin-top: -68px; padding-top: 68px; }


  /* tlo strony w kolorze sekcji, zeby nie przeswitywalo bielą pod karta */
  body { background: #FFFFFF !important; }
  /* ===== JASNY NIEBIESKI TYLKO PRZYCISKI: reszta schodzi na granat ===== */
  .cta-roll.bg-brand, a.cta-roll { background-color: #BF1E28 !important; }
  span.bg-brand { background-color: #09090B !important; }
  /* ===== ZDJECIA + MNOZENIE we wszystkich czterech miejscach + hero =====
     Mnozenie przyciemnia proporcjonalnie, wiec kolory ze zdjecia nadal sie przebijaja.
     Na wierzchu cienka warstwa czerni, wylacznie na kontrast tekstu. */
  #top { background-image: url(assets/d90337d6f5ffa814880f.webp) !important; background-position: 50% 62% !important; background-color: #76787C !important; background-blend-mode: multiply !important; filter: saturate(1.4) !important; }
  #top::before { background: rgba(9, 9, 11, 0.46) !important; }
  #proces .karta-foto { background-image: none !important; background-position: 46% 62% !important; background-color: #76787C !important; background-blend-mode: multiply !important; filter: saturate(1.4) !important; }
  #proces .karta-foto::before { background: rgba(9, 9, 11, 0.44) !important; }
  section#etapy { background-image: none !important; background-position: 50% 56% !important; background-color: #76787C !important; background-blend-mode: multiply !important; filter: saturate(1.4) !important; }
  section#etapy::before { background: rgba(9, 9, 11, 0.5) !important; }
  section#kontakt-cta { background-image: url(assets/08dc979fc28727f32006.webp) !important; background-position: 50% 60% !important; background-color: #76787C !important; background-blend-mode: multiply !important; filter: saturate(1.4) !important; }
  section#kontakt-cta::before { background: rgba(9, 9, 11, 0.5) !important; }
  #opinie .karta-kolor { background-image: url(assets/2de0c8a661ea1a242340.webp) !important; background-position: 55% 62% !important; background-color: #76787C !important; background-blend-mode: multiply !important; filter: saturate(1.4) !important; }
  #opinie .karta-kolor::before { background: rgba(9, 9, 11, 0.48) !important; }

  /* ===== PELNA BIEL NA CIEMNYM: zadnej bieli z kryciem, bo wychodzi szaro ===== */
  section#etapy, section#etapy p, section#etapy h2, section#etapy h3, section#etapy span, section#etapy div,
  section#kontakt-cta, section#kontakt-cta p, section#kontakt-cta h2, section#kontakt-cta span,
  #proces .karta-foto, #proces .karta-foto p, #proces .karta-foto h3,
  #opinie .karta-kolor, #opinie .karta-kolor p, #opinie .karta-kolor span, #opinie .karta-kolor strong, #opinie .karta-kolor small, #opinie .karta-kolor div,
  #top .text-zinc-500, #top h1
    { color: #FFFFFF !important; }
  section#etapy .etap .numer { border-color: #76787C !important; }
  /* ===== DOMKNIECIE ===== */
  /* te dwa akapity mialy wieksza wage niz regula ogolna, wiec zostawaly przezroczyste */
  section#etapy .naglowek p, section#etapy .etap p, section#kontakt-cta .srodek p { color: #FFFFFF !important; }
  /* warunki i porozmawiajmy leza na tym samym tle: polowa odstepu z kazdej strony */
  #warunki > div { padding-bottom: calc(var(--sekcja) / 2) !important; }
  #rozmowa > div { padding-top: calc(var(--sekcja) / 2) !important; }

  #opinie .karta-kolor .kreska { background: rgba(255, 255, 255, 0.45) !important; }

  /* ===== HERO: wiekszy napis i cala tresc nizej ===== */
  @media (min-width: 1024px) { #top h1 { font-size: 5.35rem !important; } #top > div { padding-top: 5rem !important; } }
  @media (min-width: 1280px) { #top h1 { font-size: 6.2rem !important; } #top > div { padding-top: 6rem !important; } }

  /* ===== NA CIEMNYM TLE WSZYSTKO BIALE: kreska i nadtytul byly granatowe/szare, czyli niewidoczne ===== */
  section#etapy span.bg-brand, #top span.bg-brand { background-color: #FFFFFF !important; }
  section#etapy .kreska-anim::after, #top .kreska-anim::after { background-color: #FFFFFF !important; }
  section#etapy .text-zinc-500, #top .text-zinc-500 { color: #FFFFFF !important; }

  .kreska-anim::after { background-color: #09090B !important; }
  #oferta-lista .linia span { background: #09090B !important; }
  .karta-info .panel--niebieski { background: #09090B !important; }
  #opinie .cudzyslow { color: #09090B !important; }
  #opinie .strzalka:hover { border-color: #09090B !important; color: #09090B !important; }
  #komu .wiersz::before { background: #09090B !important; }
  section#etapy .etap .numer { border-color: #76787C !important; color: #FFFFFF !important; }
  /* ===== NAGLOWKI: czarne na jasnym, biale na granatowej sekcji ===== */
  main h2, footer h2 { color: #09090B !important; -webkit-text-fill-color: #09090B !important; background-image: none !important; }
  main h2 .text-brand, footer h2 .text-brand,
  #oferta-lista h2 .text-brand, #proces h2 .text-brand, #opinie h2 .text-brand, #komu h2 .text-brand
    { color: #09090B !important; -webkit-text-fill-color: #09090B !important; background-image: none !important; }
  section#kontakt-cta h2, section#kontakt-cta span.bg-brand,
  section#etapy h2, section#etapy h2 .text-brand,
  section#etapy .naglowek h2, section#etapy .zamkniecie h2,
  #proces .karta-foto h3, #opinie .karta-kolor h3
    { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }


  /* ===== SZARE SEKCJE NA BIALO ===== */
  body { background: #FFFFFF !important; }
  #oferta-lista, #proces.sekcja-proces, #opinie.sekcja-opinie, #komu, #warunki, #rozmowa { background: #FFFFFF !important; }
  /* ===== BIALE KARTY: miekki, szeroki cien zamiast kontrastu tla ===== */
  #proces .karta-biala, #opinie .karta-biala, #warunki .karta, .karta-info .panel--bialy,
  #proces .karta-foto, #opinie .karta-kolor {
    box-shadow: 0 44px 84px -30px rgba(9, 9, 11, 0.34), 0 8px 22px -10px rgba(9, 9, 11, 0.18) !important;
  }
  /* ===== PRZYCIEMNIENIA (10.09.2026 v4): metoda z Canvy, odczytana ze zrzutu klienta.
     Regresja wyniku wzgledem oryginalnego zdjecia dala krycie 0.929 i kolor rgb(32, 34, 38)
     przy bledzie 0.36/kanal, czyli prostokat #202226 na 93%. Zaden blend, zaden filtr.
     Moje wczesniejsze podejscia myliy sie na dwa sposoby naraz: kanal niebieski 112 zamiast 76
     i krycie 87% zamiast 93%, stad mleczny niebieski welon.
     hero granat / kafel "O biurze" niebieski / etapy granat / opinia niebieska / konsultacja granat */
  #top, section#etapy, section#kontakt-cta, #proces .karta-foto, #opinie .karta-kolor {
    background-color: transparent !important;
    background-blend-mode: normal !important;
    filter: none !important;
  }
  section#etapy::before, section#kontakt-cta::before { background: rgba(9, 9, 11, 0.93) !important; }
  /* ===== HERO: gradient z lewego gornego rogu =====
     Start ciemniejszy niz dotychczasowa plaska warstwa (0,97 zamiast 0,93 i glebszy odcien),
     schodzi do zera na 77% szerokosci, wiec od okolo 3/4 kadru widac czyste zdjecie.
     Dziesiec przystankow, zeby przejscie nie dalo widocznego pasa. */
  #top::before {
    background: linear-gradient(98deg,
      rgba(9, 9, 11, 0.97) 0%,
      rgba(9, 9, 11, 0.965) 22%,
      rgba(9, 9, 11, 0.955) 40%,
      rgba(9, 9, 11, 0.94) 54%,
      rgba(9, 9, 11, 0.9) 64%,
      rgba(9, 9, 11, 0.81) 71%,
      rgba(9, 9, 11, 0.64) 77%,
      rgba(9, 9, 11, 0.42) 82%,
      rgba(9, 9, 11, 0.21) 86%,
      rgba(9, 9, 11, 0.07) 89%,
      rgba(9, 9, 11, 0) 92%) !important;
  }
  /* ===== HERO NA TELEFONIE I TABLECIE: przyciemnienie z gory na dol =====
     Poziomy gradient (98deg) gasnie od 77% szerokosci. Na desktopie tekst konczy sie
     duzo wczesniej, ale na telefonie linijki naglowka dochodza do 91% szerokosci, a na
     tablecie do 84% - ich konce lezaly na prawie golym zdjeciu, a prawy gorny rog za
     menu nie mial zadnego przyciemnienia. Ponizej 1024 px kierunek sie odwraca: ciemna
     jest cala gora (menu, nadtytul, naglowek, przyciski), a zdjecie wychodzi dopiero
     w dolnej czesci hero, pod przyciskami, gdzie nie ma juz tekstu. */
  @media (max-width: 1023px) {
    #top::before {
      background: linear-gradient(180deg,
        rgba(9, 9, 11, 0.97) 0%,
        rgba(9, 9, 11, 0.95) 35%,
        rgba(9, 9, 11, 0.92) 55%,
        rgba(9, 9, 11, 0.82) 70%,
        rgba(9, 9, 11, 0.55) 85%,
        rgba(9, 9, 11, 0.35) 100%) !important;
    }
  }
  /* 1024-1279 px: tekst konczy sie ok. 81% szerokosci, wiec przyciemnienie trzyma
     sie dalej w prawo i gasnie dopiero za nim. */
  @media (min-width: 1024px) and (max-width: 1279px) {
    #top::before {
      background: linear-gradient(98deg,
        rgba(9, 9, 11, 0.97) 0%,
        rgba(9, 9, 11, 0.955) 40%,
        rgba(9, 9, 11, 0.9) 70%,
        rgba(9, 9, 11, 0.84) 82%,
        rgba(9, 9, 11, 0.55) 90%,
        rgba(9, 9, 11, 0.18) 96%,
        rgba(9, 9, 11, 0) 100%) !important;
    }
  }
  /* Dwa niebieskie kafle ida na plaski kolor - bez zdjecia pod spodem, wiec i bez warstwy. */
  #proces .karta-foto, #opinie .karta-kolor {
    background-image: none !important;
    background-color: #BF1E28 !important;
  }
  #proces .karta-foto::before, #opinie .karta-kolor::before { background: transparent !important; }
  #komu .wiersz::before { background: #09090B !important; }
  /* kwadraciki z fajkami: granat zamiast czerni, fajka biala */
  #warunki .znak { background: #09090B !important; color: #FFFFFF !important; }
  #warunki .znak svg { color: #FFFFFF !important; stroke: #FFFFFF !important; }

  /* ===== CZERWONY AKCENT #BF1E28 (10.09.2026) =====
     Trzeci kolor palety wchodzi jako jeden powtarzalny element: kreska przed nadtytulem.
     Jest w kazdej sekcji lacznie z hero, ma 36x2 px, wiec wraca rytmicznie i zostaje dyskretna. */
  .kreska-anim::after,
  section#etapy .kreska-anim::after,
  section#kontakt-cta .kreska-anim::after,
  #top .kreska-anim::after,
  #top span.bg-brand,
  section#etapy span.bg-brand,
  section#kontakt-cta span.bg-brand {
    background-image: none !important;
    background-color: #BF1E28 !important;
  }
  /* Wyjatek: na dwoch niebieskich kaflach czerwien na niebieskim praktycznie znika
     (kontrast 1,2:1), wiec tam kreska zostaje biala. */
  #proces .karta-foto span.bg-brand, #opinie .karta-kolor span.bg-brand,
  #proces .karta-foto .kreska-anim::after, #opinie .karta-kolor .kreska-anim::after {
    background-image: none !important;
    background-color: #FFFFFF !important;
  }

  /* ===== CZERWONY NA PRZYCISKACH =====
     Wypelnione CTA przechodza na #BF1E28 razem z cieniem. Przyciski obrysowane zostaja bez zmian.
     Dzieki temu paleta rozklada sie tak, jak zaklada 60/30/10: granat na sekcjach,
     niebieski na elementach, czerwony wylacznie tam, gdzie ma sie kliknac. */
  .cta-roll.bg-brand, a.cta-roll.bg-brand, button.cta-roll.bg-brand,
  .cookie-consent-button--primary {
    background-image: none !important;
    background-color: #BF1E28 !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
    box-shadow: 0 18px 30px -14px rgba(191, 30, 40, 0.55) !important;
  }
  .cta-roll.bg-brand:hover, a.cta-roll.bg-brand:hover, button.cta-roll.bg-brand:hover,
  .cta-roll.bg-brand:focus-visible, a.cta-roll.bg-brand:focus-visible,
  .cookie-consent-button--primary:hover {
    background-color: #BF1E28 !important;
    box-shadow: 0 22px 40px -12px rgba(191, 30, 40, 0.7) !important;
  }

  /* ===== CZERWONY: KWADRATY PRZY ETAPACH, RYSOWANA RAMKA =====
     Statyczna ramka znika (zostaje jej szerokosc, zeby nic nie skoczylo), a na jej miejscu
     dwie polowki obrysu rysuja sie z przeciwleglych rogow: najpierw pozioma krawedz,
     po niej pionowa. Start w momencie, gdy kafel wjezdza na ekran (klasa .is-visible,
     ta sama, ktorej uzywaja pozostale animacje na stronie). */
  #etapy .etap .numer, section#etapy .etap .numer {
    position: relative !important;
    border-color: transparent !important;
  }
  #etapy .etap .numer::before, #etapy .etap .numer::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
    width: 0;
    height: 0;
    pointer-events: none;
    transition: width 0.3s linear, height 0.3s linear 0.3s;
  }
  #etapy .etap .numer::before {
    top: -1px; left: -1px;
    border-top: 1px solid #BF1E28;
    border-right: 1px solid #BF1E28;
  }
  #etapy .etap .numer::after {
    right: -1px; bottom: -1px;
    border-bottom: 1px solid #BF1E28;
    border-left: 1px solid #BF1E28;
  }
  #etapy .etap.is-visible .numer::before, #etapy .etap.is-visible .numer::after {
    width: calc(100% + 2px);
    height: calc(100% + 2px);
  }
  @media (prefers-reduced-motion: reduce) {
    #etapy .etap .numer::before, #etapy .etap .numer::after {
      width: calc(100% + 2px); height: calc(100% + 2px); transition: none;
    }
  }

  /* ===== CZERWONY: CUDZYSLOW I KRESKA W OPINIACH ===== */
  #opinie .cudzyslow, #opinie .karta-biala .cudzyslow { color: #BF1E28 !important; }
  /* na niebieskim czerwien ma kontrast 1,2:1, wiec kreska idzie na biel (5,3:1) */
  #opinie .karta-kolor .kreska { background: #FFFFFF !important; }

  /* ===== CZERWONY: PODNOSZACY SIE BLOK W "DLA KOGO" ===== */
  /* Podnoszacy sie blok wraca na niebieski i pojawia sie tylko po najechaniu -
     czerwonego zrobilo sie na stronie za duzo. */
  #komu .wiersz::before { background: #BF1E28 !important; }

  /* ===== PASEK POD HERO: bialy / niebieski / granat =====
     Srodkowy kafel byl na sile przemalowany na granat regula z czasow "niebieski tylko na przyciski".
     Wracamy do trzech kolorow, a czerwony wchodzi w podpisy nad wartosciami. */
  .karta-info .panel--niebieski { background: #BF1E28 !important; }
  /* Podpisy nad wartosciami: czarny na bialym kaflu, bialy na niebieskim i na granacie.
     Czerwien schodzi z paska - na niebieskim i granatowym kaflu miala 1,2-2,2:1,
     czyli czytala sie gorzej niz tresc pod nia. Teraz 19,6:1 / 5,1:1 / 14:1. */
  .karta-info .panel--bialy .etykieta { color: #09090B !important; opacity: 1 !important; }
  .karta-info .panel--niebieski .etykieta,
  .karta-info .panel--granat .etykieta { color: #FFFFFF !important; opacity: 1 !important; }

  /* ===== DLUGIE KRESKI W OFERCIE: niebieskie, bez konca =====
     Czerwony kwadracik na koncu zdjety - zostaje sama kreska. */
  #oferta-lista .linia span { background: #BF1E28 !important; }

  /* ===== POZIOME KRESKI W "DLA KOGO" I W "ZASADACH": czern zamiast szarosci ===== */
  #komu .lista { border-top: 1px solid #09090B !important; }
  #komu .wiersz { border-bottom: 1px solid #09090B !important; }
  #warunki .punkt { border-bottom-color: #09090B !important; border-bottom-width: 1px !important; }

  /* ===== ODSTEP MIEDZY "ZASADAMI" A "POROZMAWIAJMY" =====
     Ta para dostawala polowkowy odstep z reguly "sekcje na tym samym tle stoja blizej".
     W wariancie bialym cala strona jest biala, wiec ta regula scisnela tu za mocno.
     Wracamy do pelnego odstepu tylko dla tej jednej pary. */
  /* pod "Zasadami" idzie ciemne zakonczenie, czyli zmiana koloru: pelny odstep */
  #warunki > div { padding-bottom: var(--sekcja) !important; }
  #rozmowa > div { padding-top: var(--sekcja) !important; }

  /* ===== SEKCJA ZE ZDJECIEM (druga na stronie): zdjecie po lewej, granatowy panel po prawej =====
     Rozciagnieta od lewej do prawej krawedzi okna - blok nie siedzi w kontenerze max-w-6xl,
     wiec nie ma marginesow bocznych ani cienia (cien na pelnej szerokosci i tak by sie obcial).
     Obie polowy zawsze tej samej wysokosci. Na telefonie schodza jedno pod drugie. */
  #obiuro-foto { background: #FFFFFF !important; }
  #obiuro-foto > .opakowanie {
    padding-top: calc(var(--sekcja) / 2) !important;
    padding-bottom: calc(var(--sekcja) / 2) !important;
  }
  #obiuro-foto .blok-foto {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  #obiuro-foto .foto {
    background-image: url(assets/f7833b74eaf403400f6d.webp);
    background-size: cover;
    background-position: 50% 42%;
    background-repeat: no-repeat;
    min-height: 20rem;
  }
  #obiuro-foto .panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.15rem;
    background: #09090B;
    color: #FFFFFF;
    padding: 2.5rem 1.5rem;
  }
  #obiuro-foto .panel h3 { margin: 0; color: #FFFFFF !important; letter-spacing: -0.01em; }
  #obiuro-foto .panel p { margin: 0; color: #FFFFFF !important; max-width: 36rem; }
  #obiuro-foto .przycisk { margin-top: 0.85rem; }
  /* przycisk obrysowany: czerwone CTA jest juz w "Zasadach" i w "Umow konsultacje" */
  #obiuro-foto .obrys {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 1.75rem;
    border: 1px solid #76787C;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 500;
    transition: background-color 0.25s, border-color 0.25s, color 0.25s;
  }
  #obiuro-foto .obrys:hover, #obiuro-foto .obrys:focus-visible {
    background-color: #FFFFFF !important;
    border-color: #76787C !important;
    color: #09090B !important;
  }
  @media (min-width: 768px) {
    #obiuro-foto .panel { padding: 3rem 2.5rem; }
  }
  @media (min-width: 1024px) {
    #obiuro-foto .blok-foto { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
    #obiuro-foto .foto { min-height: 32rem; }
    #obiuro-foto .panel { padding: 3.5rem 4rem; }
  }

  /* ===== SZESC PUNKTOW WSPOLPRACY: lekko wieksze, zeby dawaly sie czytac ===== */
  #etapy .etap h3 { font-size: 1.4rem !important; }
  #etapy .etap p { font-size: 17px !important; line-height: 1.68 !important; }
  /* Kwadrat ma bok dokladnie taki jak stopien pisma naglowka obok: 1.4rem, a od
     1024 px 1.7rem - te same wartosci, ktore ma font-size h3 dwie linijki nizej.
     Wczesniej byl na sztywno 42 px, czyli o polowe wiekszy od liter, i zamiast
     numerowac punkt, konkurowal z nim. Cyfra zostaje mniejsza od boku, zeby
     miala w kwadracie powietrze. */
  #etapy .etap .numer { width: 1.4rem !important; height: 1.4rem !important; font-size: 11px !important; }

  @media (min-width: 1024px) {
    #etapy .etap h3 { font-size: 1.7rem !important; }
    #etapy .etap .numer { width: 1.7rem !important; height: 1.7rem !important; font-size: 13px !important; }
  }



  /* ===== PORADNIK: granatowy pas na pelna szerokosc, zaraz po "Dla kogo" =====
     Rozcina bialy ciag w jego srodku - miedzy ciemnymi etapami a ciemnym zakonczeniem
     bylo 3025 px jednego koloru i jednej szerokosci. Pas nie siedzi w kontenerze
     max-w-6xl, wiec odstepy boczne robi wlasny padding rosnacy z szerokoscia okna. */
  #blog {
    background: #09090B !important;
    color: #FFFFFF;
  }
  #blog > .pas {
    padding-top: var(--sekcja) !important;
    padding-bottom: var(--sekcja) !important;
    padding-left: clamp(1.5rem, 6vw, 6rem);
    padding-right: clamp(1.5rem, 6vw, 6rem);
  }
  #blog .gora {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-bottom: 3.25rem;
  }
  #blog .gora span { color: #FFFFFF !important; }
  #blog .wszystkie {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: #FFFFFF !important;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: gap 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  #blog .wszystkie:hover { gap: 1.1rem; }
  #blog .wszystkie svg { color: #BF1E28; }
  #blog .wpisy {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }
  #blog .wpis { display: block; color: inherit; text-decoration: none; }
  #blog .okno { display: block; overflow: hidden; aspect-ratio: 900 / 659; background: rgba(255, 255, 255, 0.08); }
  #blog .obraz {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  #blog .wpis:hover .obraz, #blog .wpis:focus-visible .obraz { transform: scale(1.045); }
  #blog .wpis h3.font-display {
    display: block;
    margin: 1.5rem 0 0;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    color: #FFFFFF !important;
  }
  #blog .wpis p {
    margin: 1rem 0 0;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #FFFFFF !important;
  }
  #blog .dalej {
    position: relative;
    display: inline-block;
    margin-top: 1.5rem;
    padding-bottom: 0.5rem;
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF !important;
  }
  #blog .dalej::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 2.25rem;
    background: #BF1E28;
    transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  #blog .wpis:hover .dalej::after, #blog .wpis:focus-visible .dalej::after { width: 100%; }
  @media (min-width: 768px) { #blog .wpisy { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; } }
  @media (min-width: 1024px) { #blog .wpisy { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; } }
  @media (prefers-reduced-motion: reduce) {
    #blog .obraz, #blog .dalej::after, #blog .wszystkie { transition: none; }
  }



  /* ===== POLACZONE ZAKONCZENIE: granat ze zdjeciem + uklad "Porozmawiajmy" =====
     Sekcja "Umow konsultacje" znika, bo mowila to samo co ta i byla trzecim wezwaniem
     do kontaktu w tej okolicy strony. Zostaje jedno, ciezsze zamkniecie:
     zdjecie pod spodem, na nim granat 93 procent, na tym obrys nazwiska i tresc. */
  #rozmowa {
    --foto-zakonczenie: url(assets/08dc979fc28727f32006.webp);
    background-image: var(--foto-zakonczenie) !important;
    background-size: cover !important;
    background-position: 50% 60% !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
  }
  #rozmowa::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(9, 9, 11, 0.93);
  }
  #rozmowa .znak-wodny { z-index: 1 !important; }
  #rozmowa .uklad { z-index: 2 !important; }
  /* ===== NAZWISKO JAKO OKNO W PRZYCIEMNIENIU =====
     Zamiast obrysu litery pokazuja czyste zdjecie. Kontener znaku wodnego dostaje to samo
     zdjecie, w tym samym kadrze co sekcja (inset: 0 plus identyczne cover i position),
     wiec obraz w literach jest idealnie w osi z tym pod granatem. Tlo jest przyciete
     do kształtu tekstu, a caly kontener lezy nad warstwa granatu - stad efekt wyciecia. */
  #rozmowa .znak-wodny {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* dwie warstwy: lekka biala mgielka nad zdjeciem, zeby litery nie wybijaly tak mocno.
       Obie sa przycinane do kształtu tekstu, wiec mgielka konczy sie razem z literami. */
    background-image: linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14)), var(--foto-zakonczenie) !important;
    background-size: cover, cover !important;
    background-position: 50% 60%, 50% 60% !important;
    background-repeat: no-repeat, no-repeat !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
  }
  #rozmowa .znak-wodny .text-outline {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 0 !important;
  }

  /* cala tresc na bialo, z pelnym kryciem */
  section#rozmowa h2,
  section#rozmowa .lewa span,
  section#rozmowa .prawa p { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
  section#rozmowa .lewa span.bg-brand { -webkit-text-fill-color: initial !important; }
  /* granica koloru nad sekcja: pelny odstep z obu stron */
  #blog > div { padding-bottom: var(--sekcja) !important; }
  /* Granatowy pas poradnika rozdziela "Dla kogo" i "Zasady", wiec z obu jego stron
     wypada granica koloru: pelny odstep, tak jak przy pozostalych ciemnych blokach. */
  #komu > div { padding-bottom: var(--sekcja) !important; }
  #warunki > div { padding-top: var(--sekcja) !important; }

  /* ===== FORMULARZ NAD STOPKA =====
     Lewa kolumna to tresc i dane kontaktowe, prawa to pola. Kwadratowe narozniki,
     nasza typografia, przycisk w czerwieni jak pozostale CTA.
     Formularz nie ma jeszcze zaplecza, wiec wysylka jest zablokowana i pokazuje notke -
     lepsze to niz klikniecie, ktore po cichu gubi wiadomosc. */
  #formularz { background: #FFFFFF !important; }
  #formularz > div {
    padding-top: var(--sekcja) !important;
    padding-bottom: var(--sekcja) !important;
  }
  #formularz .uklad-formularza { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.5rem; }
  #formularz .wstep { margin-top: 1.75rem; max-width: 32rem; color: #09090B !important; }
  #formularz .dane { margin: 2.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 1.25rem; }
  #formularz .dane li { display: flex; align-items: center; gap: 0.9rem; font-size: 16px; color: #09090B; }
  #formularz .dane a { color: inherit; text-decoration: none; }
  #formularz .dane a:hover { color: #BF1E28; }
  #formularz .ikona { display: inline-flex; color: #09090B; flex: 0 0 auto; }

  #formularz .pole-para { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  #formularz .pole { margin: 0 0 1.25rem; display: block; }
  #formularz .pole-para .pole { margin-bottom: 0; }
  #formularz label { display: block; margin-bottom: 0.6rem; font-size: 14px; font-weight: 600; color: #09090B; }
  #formularz .wymagane { color: #BF1E28; }
  #formularz input[type="text"], #formularz input[type="email"], #formularz input[type="tel"], #formularz textarea {
    width: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid #76787C;
    background: #FFFFFF;
    color: #09090B;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  #formularz textarea { resize: vertical; min-height: 9rem; }
  #formularz input::placeholder, #formularz textarea::placeholder { color: #76787C; }
  #formularz input:focus, #formularz textarea:focus {
    outline: none;
    border-color: #BF1E28;
    box-shadow: 0 0 0 3px rgba(191, 30, 40, 0.16);
  }
  #formularz .zgoda { display: flex; align-items: flex-start; gap: 0.75rem; margin: 0.25rem 0 1.75rem; }
  #formularz .zgoda input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: #BF1E28; flex: 0 0 auto; }
  #formularz .zgoda label { margin: 0; font-size: 14px; font-weight: 400; color: #09090B; line-height: 1.5; }
  #formularz .wyslij {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    border: 0;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
  }
  #formularz .notka { margin: 1.25rem 0 0; font-size: 14px; color: #09090B !important; max-width: 34rem; }
  @media (min-width: 640px) {
    #formularz .pole-para { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1024px) {
    #formularz .uklad-formularza { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 5rem; }
  }

  /* ===== ETAPY NA SZEROKOSCI PASA PORADNIKA =====
     Ten sam margines boczny co poradnik, wiec oba ciemne bloki na stronie trzymaja
     jedna linie i jest do czego nawiazac. Szesc punktow zyskuje przy tym miejsce.
     Naglowek i wstep zostaja w wezszej kolumnie, zeby wiersze nie robily sie za dlugie. */
  #etapy > div {
    max-width: none !important;
    padding-left: clamp(1.5rem, 6vw, 6rem) !important;
    padding-right: clamp(1.5rem, 6vw, 6rem) !important;
  }
  #etapy .naglowek { max-width: 46rem; }

  /* ===== DRUGI PRZYCISK W HERO: niebieski zamiast bialego ===== */
  #top .przycisk-bialy, #top a.przycisk-bialy {
    background-color: #BF1E28 !important;
    border-color: #BF1E28 !important;
    color: #FFFFFF !important;
  }
  #top .przycisk-bialy:hover, #top a.przycisk-bialy:hover,
  #top .przycisk-bialy:focus-visible, #top a.przycisk-bialy:focus-visible {
    background-color: #BF1E28 !important;
    border-color: #BF1E28 !important;
    color: #FFFFFF !important;
  }

/* ===== KURSOR PISANIA: czerwony i miga bez konca =====
   Skrypt po dopisaniu naglowka ustawia elementowi display:none w atrybucie style,
   a osobna regula robi to samo w CSS. !important bije jedno i drugie,
   wiec kreska zostaje na miejscu i dalej pulsuje. */
#top h1 .kursor {
  display: inline-block !important;
  background: #BF1E28 !important;
  animation: kursor-mig 0.7s steps(1) infinite !important;
}

  /* ===== PRZYCISK W PANELU "O BIURZE": bez obwodki =====
     Byl projektowany jako obrysowany, ale regula "a.cta-roll" z czasow ograniczania
     niebieskiego do przyciskow wypelnia go kolorem, wiec zostawala tylko zbedna biala ramka.
     Teraz jest zwyczajnym niebieskim przyciskiem, a po najechaniu ciemnieje tak samo
     jak drugi przycisk w hero. */
  #obiuro-foto .obrys {
    border: 0 !important;
    background-color: #BF1E28 !important;
    color: #FFFFFF !important;
  }
  #obiuro-foto .obrys:hover, #obiuro-foto .obrys:focus-visible {
    background-color: #BF1E28 !important;
    border: 0 !important;
    color: #FFFFFF !important;
  }

  /* ===== SZESC KORZYSCI: naglowki w jednej linii bazowej =====
     Naglowki maja rozna dlugosc, wiec czesc lamie sie na dwa wiersze, a czesc na jeden -
     i teksty pod nimi startowaly na roznych wysokosciach. Rezerwujemy miejsce na dwa
     wiersze, wiec wszystkie akapity zaczynaja sie rowno, niezaleznie od zawijania. */
  /* Bylo tu min-height na dwa wiersze - z czasow, gdy naglowki byly dwuwyrazowe
     i trzeba bylo wyrownac start akapitow. Teraz kazdy naglowek to jedno slowo,
     czyli jeden wiersz, wiec akapity i tak startuja rowno, a rezerwa drugiego
     wiersza zostawiala tylko 36 px pustki pod kazdym napisem. */

  /* ===== DUZA SEKCJA Z KORZYSCIAMI: czarna, bez zdjecia =====
     Warstwa przyciemniajaca nie ma juz czego przyciemniac, wiec schodzi do zera. */
  section#etapy {
    background-image: none !important;
    background-color: #09090B !important;
  }
  section#etapy::before { background: transparent !important; }

  /* naglowek pasa poradnika: bialy, na naszej skali, z odstepem do kart */
  #blog h2 {
    margin: 0 0 3rem !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background-image: none !important;
  }
  #blog .gora { padding-bottom: 2.25rem; }

  /* ===== KAFEL "JASNE ZASADY": granat zamiast niebieskiego =====
     Ten sam jasniejszy granat co w wariancie koral (#BF1E28). Kafel opinii zostaje
     niebieski - zmiana dotyczy tylko tego jednego kafla. */
  #proces .karta-foto { background-color: #BF1E28 !important; }

  /* ===== NAPIS "MACHALA" W ZAKONCZENIU: sam kontur, jak w koralu =====
     Wypelnienie zdjeciem dawalo literom powierzchnie, ktora bila sie z naglowkiem.
     Kontur nie ma masy: wnetrze liter to granat sekcji, bez innego przeswitu. */
  #rozmowa .znak-wodny {
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
  }
  #rozmowa .znak-wodny .text-outline {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.30) !important;
  }

  /* ===== TELEFON: nadtytul hero nie moze byc w jednej linii =====
     "Biuro rachunkowe - Gorzow Wielkopolski" ma white-space: nowrap i przy szybie
     375 px zajmuje 338 px. Razem z kreska (36 px) i odstepem daje 386 px, a to
     min-content jedynej sciezki siatki hero - wiec sciezka nie schodzila do 327 px
     (375 minus marginesy) i cala kolumna hero, razem z naglowkiem i przyciskami,
     wystawala 59 px za prawa krawedz. Sekcja ma overflow: hidden, wiec nie bylo
     paska przewijania - po prostu ucinalo. Na telefonie nadtytul moze sie zlamac. */
  @media (max-width: 639px) {
    #top .whitespace-nowrap { white-space: normal; }
  }

  /* ===== PASEK MENU: logo i menu o stopien wieksze, wysokosc paska bez zmian =====
     Pasek ma 68 px i najwyzszy element w nim to przycisk (40 px), czyli po 14 px
     powietrza. Logo szlo na 34 px, wiec mialo powietrza wiecej niz przycisk i
     wygladalo na mniejsze niz miejsce, ktore ma. Idzie na 40 px - rowno z
     przyciskiem, dalej 14 px z gory i z dolu, wiec pasek zostaje na 68 px.
     Menu z 14 na 15 px; odstep miedzy pozycjami schodzi z 36 na 32 px, zeby
     siedem pozycji zmiescilo sie takze przy 1024 px. Rozmiary sa tutaj, a nie
     w klasach Tailwinda, bo w arkuszu jest tylko to, co bylo uzyte wczesniej. */
  #site-header nav ul { gap: 32px !important; }
  #site-header nav a { font-size: 15px !important; }
  /* Podkreslenie po najechaniu na czerwono. Kreska rysuje sie z lewej (scaleX)
     i byla w granacie - ten sam kolor co tlo paska po zescrollowaniu bylby na
     bieli widoczny, ale nie mowil nic o marce. Ograniczam do paska, bo tej klasy
     uzywaja tez linki w innych miejscach strony. */
  #site-header .hover-underline-link::after { background-color: #BF1E28 !important; }


  /* ===== KAFLE "JASNE ZASADY": naglowki na tej samej wysokosci =====
     Lewy naglowek mieszcil sie w jednym wierszu, prawy lamal na dwa, wiec akapity
     startowaly na dwoch roznych wysokosciach i kafle przestawaly czytac sie jak para.
     Naglowek dostaje minimum dwoch wierszy - niezaleznie od tego, czy tekst je
     wypelnia, akapit zaczyna sie w obu kaflach w tym samym miejscu. Jednostka lh to
     dokladnie wysokosc wiersza tego naglowka; em jest zapasem dla starszych silnikow. */
  #proces .karta-foto h3, #proces .karta-biala h3 {
    min-height: 2.3em;
    min-height: 2lh;
  }

/* ===== STOPKA: geometria odtworzona ze zrzutu referencji =====
   Zrzut mial 2000 px szerokosci przy szybie 1442 px CSS, czyli skala 1,387.
   Wszystkie liczby ponizej to pomiary z tego zrzutu podzielone przez 1,387:
   kontener 1232 px (a wiec max-w-7xl z px-6, nie 6xl), slupki startuja na
   0 / 321 / 642 / 938, karta ma 293 px, powietrze nad naglowkami 150 px,
   pod kolumnami 85 px, kreska pelna szerokosc ekranu, potem 49 px do paska
   i 145 px czerni pod nim.
   Kluczowe: stopka ma wysokosc szyby MINUS pasek menu (68 px). Przy pelnych
   100vh na samym dole pasek zakrywal pierwsze 68 px powietrza i kolumny
   wygladaly na doklejone do menu - to byl ten "przeciagniete do gory".
   Odstepy sa w vh z widelkami, zeby na niskich ekranach schodzily proporcjonalnie,
   ale nigdy nizej niz czytelne minimum. */
footer#kontakt {
  background: #09090B !important;
  border-top-color: #76787C !important;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 68px);
  min-height: calc(100svh - 68px);
}
/* Szerokosc zostaje na marginesach strony (max-w-6xl, 1152 px z px-6), a nie na
   1280 px z referencji - stopka ma sie krawedziami trzymac tego samego pionu
   co sekcje wyzej. Proporcje kolumn i cala pionowa geometria sa z referencji. */
footer#kontakt .stopka-gora > div { flex: 1 1 auto; width: 100%; }
footer#kontakt .stopka-gora {
  /* Kolumny wysrodkowane w swoim polu, wiec nadwyzka wysokosci dzieli sie nad
     i pod nimi, a nie lezy martwa pod paskiem. Wagi 2 : 1 miedzy gora i paskiem
     trzymaja proporcje referencji (powietrze nad kolumnami ~150, pod ~85,
     pod paskiem ~145) takze na wyzszych ekranach niz zrzut. */
  flex: 2 1 auto;
  display: flex;
  align-items: center;
  /* 150 px to pomiar z referencji, ale na sztywno nie moze zostac: przy szybie
     800 px cala stopka wychodzila 748 px, czyli 16 px wiecej niz miejsce pod
     paskiem, i tyle wjezdzalo pod menu. W vh z widelkami schodzi na niskich
     ekranach (przy 800 px daje 116 px), a od ok. 1030 px trzyma referencyjne 150. */
  padding-top: clamp(80px, 14.5vh, 150px);
  padding-bottom: 85px;
}
footer#kontakt .stopka-siatka {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
}
@media (min-width: 900px) {
  /* trzy rowne slupki plus karta na 24% - odwzorowanie startow 0/321/642/938 */
  footer#kontakt .stopka-siatka {
    grid-template-columns: repeat(3, minmax(0, 1fr)) 24%;
    gap: 0;
    align-items: start;
  }
  footer#kontakt .stopka-kol { padding-right: 2rem; }
}
footer#kontakt .stopka-naglowek {
  display: inline-block;
  margin: 0 0 23px;
  padding-bottom: 8px;
  border-bottom: 1px solid #76787C;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #FFFFFF;
}
footer#kontakt .stopka-naglowek--srodek { display: table; margin-inline: auto; }
/* Globalna regula dawala <li> wysokosc wiersza 24 px, wiec rytm listy wychodzil
   36 px zamiast 33 px z referencji. Wiersz schodzi do 1,15 (17 px), a odstep
   rosnie do 16 px - suma to dokladnie zmierzone 33 px. */
footer#kontakt .stopka-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
/* font-size takze na <li>: wiersz liczy sie od stopnia pisma elementu blokowego,
   a <li> dziedziczylo 16 px, wiec strut miał 18,4 px i rytm wychodzil 35 px. */
footer#kontakt .stopka-lista li { font-size: 15px; line-height: 1.15; }
footer#kontakt .stopka-lista a {
  font-size: 15px;
  line-height: 1.15;
  color: #FFFFFF;
  text-decoration: none;
  transition: color 0.25s ease;
}
footer#kontakt .stopka-lista a:hover, footer#kontakt .stopka-lista a:focus-visible { color: #FFFFFF; }
footer#kontakt .stopka-adres {
  margin: 47px 0 0;
  font-size: 15px;
  line-height: 1.9;
  color: #FFFFFF;
}
/* Karta wspolpracy. Wyciagam ja w gore o wlasny gorny padding (29 px), zeby jej
   naglowek stanal w tej samej linii co naglowki slupkow - w referencji rama
   zaczyna sie wyzej niz tekst obok, wlasnie o te 29 px. */
footer#kontakt .stopka-karta {
  border: 1px solid #76787C;
  padding: 29px 24px 27px;
  text-align: center;
}
@media (min-width: 900px) {
  footer#kontakt .stopka-karta { margin-top: -29px; }
}
footer#kontakt .stopka-karta .stopka-naglowek { margin-bottom: 32px; }
footer#kontakt .stopka-awatar {
  width: 97px;
  height: 97px;
  margin: 0 auto;
  border-radius: 999px;
  /* Biale kolo z sygnetem BR w granatowym gradiencie (sygnet_kolko.rb). Znak wypelnia
     kolo, zamiast byc malym bialym logo na ciemnym tle - czyta sie z daleka. */
  background: #FFFFFF;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
footer#kontakt .stopka-awatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Nazwisko na akcencie - jak w referencji, gdzie nazwisko jest w kolorze marki.
   Czerwien #BF1E28 na czerni daje kontrast 5,2:1, wiec to nadal czytelny tekst,
   a nie sam ozdobnik. W wariancie koral palette podmienia to na #BF1E28. */
footer#kontakt .stopka-osoba { margin: 12px 0 0; font-size: 16px; line-height: 1.15; color: #FFFFFF; }
/* W karcie rytm jest cisniejszy niz w slupkach: odstep 12 px, nie 16 */
footer#kontakt .stopka-lista--srodek { justify-items: center; gap: 12px; margin-top: 12px; }
footer#kontakt .stopka-lista--srodek a {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: #76787C;
}
/* Kreska nad dolnym paskiem idzie od krawedzi do krawedzi ekranu, nie po marginesach
   kontenera - tak jest w referencji i tak dzielenie kadru ma sens. */
footer#kontakt .stopka-pasek {
  flex: 1 1 auto;
  border-top: 1px solid #76787C;
}
footer#kontakt .stopka-pasek-linia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  /* Dolne powietrze: 17,8vh z referencji bylo za duzo na niskich szybach - przy
     800 px cala stopka wychodzila 759 px, czyli 27 px wiecej niz miejsce pod
     paskiem menu. 12vh daje przy 800 px 96 px zamiast 142 i stopka sie mieszczy.
     Na wysokich szybach nic sie nie zmienia: nadwyzke i tak rozdaje flex. */
  padding: 49px 0 clamp(1.5rem, 12vh, 9rem);
  border-top: 0;
  font-size: 14px !important;
  color: #FFFFFF;
}
@media (min-width: 900px) {
  /* Bez ikon profili nota ma cala szerokosc obok logo, wiec obie linijki
     mieszcza sie w calosci - wczesniej pierwsza lamala sie na trzeci wiersz. */
  footer#kontakt .stopka-pasek-linia { flex-direction: row; align-items: center; gap: 64px; }
  footer#kontakt .stopka-prawa { flex: 1 1 auto; }
}
footer#kontakt .stopka-pasek-logo { flex: 0 0 auto; }
footer#kontakt .stopka-prawa { text-align: center; }
@media (min-width: 900px) { footer#kontakt .stopka-prawa { text-align: left; } }
footer#kontakt .stopka-prawa p { margin: 0; font-size: 14px; line-height: 1.85; }
footer#kontakt .stopka-prawa a, footer#kontakt .stopka-prawa button {
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #76787C;
  transition: color 0.25s ease;
}
footer#kontakt .stopka-prawa a:hover, footer#kontakt .stopka-prawa button:hover { color: #FFFFFF; }

/* ===== "DLA KOGO": cztery pasma wchodza po kolei =====
   Cala lista miala jedna klase .reveal, wiec wszystkie wiersze wjezdzaly jako
   jeden kafel - z samego gestu nie bylo widac, ze to lista czterech pozycji.
   Zbiorcze ujawnianie schodzi z .lista (zostaje tylko jako wyzwalacz klasy
   .is-visible), a kazdy wiersz dostaje wlasne opoznienie 120 ms. Gorna kreska
   listy jest widoczna od razu, wiec pasma wpadaja w gotowa rame.
   Podswietlenia na najechanie nie ruszam. */
#komu .lista.reveal, #komu .lista.reveal-slide-up {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}
#komu .lista .wiersz { opacity: 0; }
#komu .lista.is-visible .wiersz {
  animation: komu-pasmo 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
#komu .lista.is-visible .wiersz:nth-of-type(1) { animation-delay: 0.02s; }
#komu .lista.is-visible .wiersz:nth-of-type(2) { animation-delay: 0.14s; }
#komu .lista.is-visible .wiersz:nth-of-type(3) { animation-delay: 0.26s; }
#komu .lista.is-visible .wiersz:nth-of-type(4) { animation-delay: 0.38s; }
@keyframes komu-pasmo { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ===== SEKCJA "O BIURZE": dwie polowy zjezdzaja sie do siebie =====
   Sekcja nie miala zadnej animacji - pojawiala sie od razu, cala.
   Jej charakterem jest podzial na pol, wiec animacja idzie po tym podziale:
   zdjecie odslania sie od lewej krawedzi ekranu, granatowy panel od prawej,
   spotykaja sie w osi. Zdjecie dodatkowo osiada ze skali 1.06 do 1 - dluzej
   niz odsloniecie, wiec kadr uspokaja sie juz po zetknieciu polowek.
   Zawartosc panelu odslania sam przejazd, wiec nic w nim nie animuje osobno:
   jeden gest, nie kilka. */
#obiuro-foto.reveal {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}
#obiuro-foto .foto {
  clip-path: inset(0 100% 0 0);
  transform: scale(1.06);
}
#obiuro-foto .panel { clip-path: inset(0 0 0 100%); }
#obiuro-foto.is-visible .foto {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
  transition: clip-path 0.85s cubic-bezier(0.16, 0.84, 0.28, 1), transform 1.5s cubic-bezier(0.16, 0.84, 0.28, 1);
}
#obiuro-foto.is-visible .panel {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.85s cubic-bezier(0.16, 0.84, 0.28, 1) 0.06s;
}

/* ===== PASEK MENU NA KONCU STRONY: czern pod czern stopki =====
   Pasek ma dwa stany: przezroczysty na hero i bialy po zescrollowaniu.
   Bialy pasek nad czarna stopka rozcinal kadr na dwa swiaty, wiec dochodzi
   trzeci stan - gdy stopka wjezdza pod pasek, pasek gasnie do jej czerni
   i logo wraca na biale. Kolor tla jest ten sam co stopka (#212327),
   wiec z gory kadru do dolu idzie jedna plaszczyzna. */
#site-header.naglowek-czarny {
  background-color: #09090B !important;
  border-bottom-color: #76787C !important;
  backdrop-filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #komu .lista .wiersz { opacity: 1 !important; animation: none !important; transform: none !important; }
  #obiuro-foto .foto, #obiuro-foto .panel { clip-path: none !important; transform: none !important; }
}



/* ===== PORADNIK - uklad jak finmarbytom.pl ===== */
.pr-obraz-a { background-image: url(assets/78486a65acf37ef8c9ed.webp); }
.pr-obraz-b { background-image: url(assets/e1ecfd40e534877f6c06.webp); }
.pr-obraz-c { background-image: url(assets/fdc2b8627bc2d92612b6.webp); }
.pr-obraz-d { background-image: url(assets/b77fdbaf226851c4c4e3.webp); }
.pr-obraz-e { background-image: url(assets/ca019781a10adac3e369.webp); }
.pr-obraz-f { background-image: url(assets/1167f9109f82d9422edf.webp); }
.pr-obraz-o { background-image: url(assets/5fc90c982a1d18c13a43.webp); }
.pr-obraz-g { background-image: url(assets/a3e31ed50ef3c4d0bcf6.webp); }
.pr-obraz-h { background-image: url(assets/16ae381a69556cae9c90.webp); }
.pr-obraz-i { background-image: url(assets/7ac872d1dedfd3b1fac0.webp); }
.pr-obraz-n { background-image: url(assets/079a1049a53d419e6898.webp); }
.pr-obraz-s { background-image: url(assets/767449505a07de805fb0.webp); }
.pr-obraz-p { background-image: url(assets/1cc99019982781a8d711.webp); }
.pr-obraz-k { background-image: url(assets/a35bfb5d96c4f6782611.webp); }
.pr-obraz-j { background-image: url(assets/31e1e4d8571c8887688a.webp); }
#poradnik { background: #FFFFFF; color: #09090B; }
.pr-kontener { max-width: 72rem; margin-inline: auto; padding-inline: 1.5rem; }

/* lista: kolumna kart i waska kolumna z najnowszymi wpisami, bez pasa tytulowego */
.pr-uklad { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.5rem; padding-top: 5.5rem; padding-bottom: 6rem; }
@media (min-width: 1024px) { .pr-uklad { grid-template-columns: minmax(0, 1fr) 21rem; gap: 4.5rem; } }
.pr-lista { display: grid; gap: 60px; }
.pr-karta-link { display: block; color: inherit; text-decoration: none; }
.pr-okno { display: block; position: relative; overflow: hidden; aspect-ratio: 900 / 520; background: #FFFFFF; }
.pr-obraz { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pr-okno::after { content: ""; position: absolute; inset: 0; background: rgba(9, 9, 11, 0.4); opacity: 0; transition: opacity 0.35s ease; }
.pr-karta-link:hover .pr-obraz { transform: scale(1.04); }
.pr-karta-link:hover .pr-okno::after { opacity: 1; }
/* tytul karty mniejszy niz naglowki strony glownej - 28 px */
.pr-karta-tytul { margin: 24px 0 0; font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; color: #09090B; text-wrap: balance; transition: color 0.25s ease; }
.pr-karta-link:hover .pr-karta-tytul { color: #09090B; }
/* trzy pierwsze zdania drobniej niz na finmarze (16 px) */
.pr-karta-tekst { margin: 10px 0 0; font-size: 14.5px; line-height: 1.65; color: #09090B; }
.pr-karta-link:focus-visible, .pr-najnowsze a:focus-visible { outline: 2px solid #BF1E28; outline-offset: 4px; }

/* najnowsze wpisy: miniatury 100x100 i pogrubiony tytul, bez dodatkowych blokow */
.pr-bok { align-self: start; }
.pr-najnowsze { margin: 0; padding: 0; list-style: none; display: grid; gap: 24px; }
.pr-najnowsze a { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 18px; align-items: center; color: #09090B; text-decoration: none; }
.pr-miniatura { display: block; width: 100px; height: 100px; background-size: cover; background-position: center; background-color: #FFFFFF; }
.pr-najnowsze-tytul { font-size: 16px; line-height: 1.3; font-weight: 600; transition: color 0.2s ease; }
.pr-najnowsze a:hover .pr-najnowsze-tytul { color: #09090B; }

/* wpis: jedna wysrodkowana kolumna jak na finmarze - tytul, zdjecie, tresc */
.pr-wpis-kolumna { max-width: calc(53rem + 3rem); margin-inline: auto; padding: 5.5rem 1.5rem 6rem; }
.pr-wpis-tytul { margin: 0; font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; color: #09090B; text-wrap: balance; }
.pr-hero { margin-top: 2.5rem; aspect-ratio: 900 / 520; background-size: cover; background-position: center; background-color: #FFFFFF; }
.pr-tresc { margin-top: 3rem; font-size: 16px; line-height: 26px; color: #09090B; }
.pr-tresc p { margin: 0 0 26px; }
.pr-tresc h2 { margin: 44px 0 16px; font-size: 26px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; color: #09090B; text-wrap: balance; }
.pr-tresc ul { margin: 0 0 26px; padding: 0; list-style: none; display: grid; gap: 10px; }
.pr-tresc ul li { position: relative; padding-left: 1.4rem; }
.pr-tresc ul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; background: #BF1E28; }
.pr-tresc strong { color: #09090B; font-weight: 600; }
.pr-podstawa { font-size: 13px; line-height: 1.6; color: #76787C; }
.pr-podstawa span { font-weight: 600; color: #09090B; }
.pr-zastrzezenie { font-size: 12.5px; line-height: 1.6; color: #76787C; }
.pr-szkic { color: #76787C; }

@media (max-width: 639px) {
  .pr-uklad { padding-top: 3rem; padding-bottom: 4rem; }
  .pr-lista { gap: 44px; }
  .pr-karta-tytul { font-size: 23px; }
  .pr-wpis-kolumna { padding-top: 3rem; padding-bottom: 4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-obraz, .pr-okno::after { transition: none; }
}
/* Strona ma globalne "main h2" i "main p" z !important - to skala naglowkow strony
   glownej (h2 3,75rem, interlinia 0,98). Blog siedzi w <main>, wiec je dziedziczyl
   i tytuly kart wychodzily po 60 px. Tu wraca wlasna typografia bloga: selektor
   z #poradnik jest bardziej szczegolowy niz "main h2", wiec wygrywa takze przy !important. */
#poradnik .pr-karta-tytul { font-size: 28px !important; line-height: 1.2 !important; letter-spacing: -0.015em !important; font-weight: 600 !important; }
#poradnik .pr-karta-link:hover .pr-karta-tytul { color: #09090B !important; -webkit-text-fill-color: #09090B !important; }
#poradnik .pr-karta-tekst { font-size: 14.5px !important; line-height: 1.65 !important; }
#poradnik .pr-tresc h2 { font-size: 26px !important; line-height: 1.25 !important; letter-spacing: -0.015em !important; font-weight: 600 !important; }
#poradnik .pr-tresc p { font-size: 16px !important; line-height: 26px !important; }
#poradnik .pr-tresc .pr-podstawa { font-size: 13px !important; line-height: 1.6 !important; }
#poradnik .pr-tresc .pr-zastrzezenie { font-size: 12.5px !important; line-height: 1.6 !important; }
@media (max-width: 639px) { #poradnik .pr-karta-tytul { font-size: 23px !important; } }


/* one page 4 (Mateusz 19.09.2026): O nas z 4A (glowna, kafle 01-03), korzysci w ukladzie zalet z one page 2 (3 pozycje), FAQ jak w 1 i 2 */

/* ===== 4A glowna: "O biurze" (Mateusz 17.09.2026) - rozmiary jak O nas w 1A: zdjecie od lewej krawedzi ekranu (633 x ~640 przy 1440),
   po prawej nadtytul, naglowek, tekst wprowadzajacy, 3 kafle z informacjami o biurze, na dole przycisk i telefon.
   Od 1024 px caly blok stoi w miejscu (naglowek i tekst sie nie ruszaja), a przy przewijaniu kafle skladaja sie karta na karte;
   po zlozeniu zdjecie i blok odjezdzaja razem. Ponizej 1024 px zwykla lista. ===== */
html body #pf-onas.on-stos { container-type: inline-size; overflow-x: clip; }
html body #pf-onas.on-stos .ob-uklad { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2.5rem; }
html body #pf-onas.on-stos .ob-prawa { order: -1; min-width: 0; padding-inline: 1.5rem; }
html body #pf-onas.on-stos .ob-foto { position: relative; margin: 0; overflow: hidden; aspect-ratio: 915 / 829; background: #FFFFFF; }
html body #pf-onas.on-stos .ob-foto img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 40%; }
html body #pf-onas.on-stos .ob-lewa { min-width: 0; padding-inline: 1.5rem; }
html body #pf-onas.on-stos .ob-h2 { margin: 1.25rem 0 0 !important; }
html body #pf-onas.on-stos .ob-wstep { margin: 1.5rem 0 0 !important; max-width: 36rem; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 17px !important; line-height: 1.65 !important; color: var(--pf-tekst) !important; -webkit-text-fill-color: var(--pf-tekst) !important; text-wrap: pretty; }
html body #pf-onas.on-stos .ob-stos { display: grid; row-gap: 1rem; margin: 1.5rem 0 0 !important; padding: 0 !important; list-style: none; }
html body #pf-onas.on-stos .ob-karta { position: relative; margin: 0 !important; padding: 1.375rem 1.75rem 1.5rem !important; background: #FFFFFF; border: 1px solid #76787C; box-shadow: inset 4px 0 0 #09090B; font-size: 16px !important; transition: box-shadow 0.35s var(--pf-ease); }
html body #pf-onas.on-stos .ob-karta::before, html body #pf-onas.on-stos .ob-karta::marker { content: none; }
html body #pf-onas.on-stos .ob-karta.ob-aktywna { box-shadow: inset 4px 0 0 #BF1E28; }
html body #pf-onas.on-stos .ob-gora { display: flex; align-items: center; gap: 1rem; }
html body #pf-onas.on-stos .ob-nr { flex: 0 0 auto; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 32px; font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: #09090B; transition: color 0.35s var(--pf-ease); }
html body #pf-onas.on-stos .ob-karta.ob-aktywna .ob-nr { color: #BF1E28; }
html body #pf-onas.on-stos .ob-linia { flex: 1 1 auto; height: 1px; background: #FFFFFF; }
html body #pf-onas.on-stos .ob-etykieta { flex: 0 0 auto; font-family: 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.18em; text-transform: uppercase; color: #76787C; }
html body #pf-onas.on-stos .ob-karta .ob-tyt { margin: 0.75rem 0 0 !important; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 20px !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: -0.015em !important; text-transform: none !important; color: #09090B !important; -webkit-text-fill-color: #09090B !important; }
html body #pf-onas.on-stos .ob-karta .ob-tekst { margin: 0.375rem 0 0 !important; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 15px !important; line-height: 1.55 !important; color: var(--pf-tekst) !important; -webkit-text-fill-color: var(--pf-tekst) !important; text-wrap: pretty; }
/* przycisk i telefon w jednej linii: srodki na tej samej wysokosci */
html body #pf-onas.on-stos .ob-dol { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2rem; }
html body #pf-onas.on-stos .ob-tel { display: inline-flex; align-items: center; min-height: 40px; font-family: 'Inter', system-ui, sans-serif; font-size: 15px; line-height: 21px; color: var(--pf-tekst); }
html body #pf-onas.on-stos .ob-tel a { margin-left: 0.3em; font-weight: 600; color: #09090B; text-decoration: none; }
html body #pf-onas.on-stos .ob-tel a:hover { text-decoration: underline; text-underline-offset: 4px; }
html body #pf-onas.on-stos .ob-przewin { display: none; }
@media (min-width: 768px) {
  html body #pf-onas.on-stos .ob-h2 { margin-top: 1.5rem !important; }
  html body #pf-onas.on-stos .ob-wstep { margin-top: 1.75rem !important; }
}
@media (min-width: 1024px) {
  html body #pf-onas.on-stos .ob-uklad {
    --ob-m: max(1.5rem, calc((100cqw - 72rem) / 2 + 1.5rem));
    --ob-luka: 5cqw;
    grid-template-columns: calc(var(--ob-m) + (100cqw - 2 * var(--ob-m) - var(--ob-luka)) * 0.451) minmax(0, 1fr);
    column-gap: 0; row-gap: 0; align-items: stretch;
  }
  html body #pf-onas.on-stos .ob-prawa { padding: 0; }
  html body #pf-onas.on-stos .ob-lewa { padding: 0 var(--ob-m) 0 var(--ob-luka); }
  /* prawa kolumna nieruchoma (zwykla lista); zdjecie 633 x 641 (jak w 1A) przykleja sie pod menu i wedruje wzdluz tekstu,
     a kadr w ramce lekko przesuwa sie przy przewijaniu (JS, klasa .ob-js) */
  html body #pf-onas.on-stos .ob-foto { position: sticky; top: 92px; aspect-ratio: auto; height: clamp(36.875rem, 44.5cqw, 40.1rem); }
  html body #pf-onas.on-stos.ob-js .ob-foto img { height: 118%; top: 0; bottom: auto; will-change: transform; }
  html body #pf-onas.on-stos .ob-przewin { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html body #pf-onas.on-stos .ob-karta, html body #pf-onas.on-stos .ob-nr { transition: none; }
}

html body #pf-wstep.zal-z2 { --op-biel: #FFFFFF; --op-czern: #09090B; --op-czerwien: #BF1E28; --op-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --op-ease-out: cubic-bezier(0.16, 0.84, 0.28, 1); --op-linia: #76787C; --op-tekst: #09090B; }
#pf-wstep.zal-z2 {
  background: var(--op-biel);
  color: var(--op-tekst);
  overflow-x: clip;
}
#pf-wstep.zal-z2 .zal-glowa { min-width: 0; }
#pf-wstep.zal-z2 .zal-h2 { margin-top: 1.25rem; }
#pf-wstep.zal-z2 .zal-lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 2.75rem 0 0;
  padding: 0;
  list-style: none;
}
#pf-wstep.zal-z2 .zal-poz {
  min-width: 0;
  padding: 1.5rem 0 1.75rem;
  border-top: 1px solid var(--op-linia);
  font-size: 16px !important;
  line-height: 1.6 !important;
}
#pf-wstep.zal-z2 .zal-znak { display: block; width: 34px; height: 34px; }
#pf-wstep.zal-z2 .zal-znak svg { display: block; width: 34px; height: 34px; }
#pf-wstep.zal-z2 .zal-ring {
  fill: none;
  stroke: var(--op-czern);
  stroke-width: 2;
  transform: rotate(-90deg);      
  transform-origin: center;
  transform-box: fill-box;
}
#pf-wstep.zal-z2 .zal-kropka {
  fill: var(--op-czerwien);
  transform-origin: center;
  transform-box: fill-box;
}
#pf-wstep.zal-z2 .zal-poz .zal-tyt {
  margin: 1.25rem 0 0 !important;
  min-width: 0;
  font-family: inherit;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  color: var(--op-czern) !important;
  -webkit-text-fill-color: var(--op-czern) !important;
  text-wrap: balance;
}
#pf-wstep.zal-z2 .zal-tekst {
  margin: 0.75rem 0 0;
  max-width: 30rem;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--op-tekst);
  text-wrap: pretty;
}
@media (min-width: 768px) {
#pf-wstep.zal-z2 .zal-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
  }
#pf-wstep.zal-z2 .zal-poz { padding: 1.75rem 0 2rem; }
}
@media (min-width: 1024px) {
#pf-wstep.zal-z2 .zal-lista {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 2rem;
    margin-top: 3.5rem;
  }
#pf-wstep.zal-z2 .zal-poz { padding: 1.75rem 0 0; }
#pf-wstep.zal-z2 .zal-h2 { margin-top: 1.5rem; }
}
@media (min-width: 1280px) {
#pf-wstep.zal-z2 .zal-lista { column-gap: 2.5rem; }
}
#pf-wstep.zal-z2.zal-js .zal-ring {
  stroke-dasharray: 101px;
  stroke-dashoffset: 101px;
}
#pf-wstep.zal-z2.zal-js.pf-widoczne .zal-ring {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.8s var(--op-ease-out);
  transition-delay: calc(0.1s + var(--zal-i, 0) * 120ms);
}
#pf-wstep.zal-z2.zal-js .zal-ring.zal-domkniete { stroke-dasharray: none; }
#pf-wstep.zal-z2.zal-js .zal-kropka { transform: scale(0); }
#pf-wstep.zal-z2.zal-js.pf-widoczne .zal-kropka {
  animation: op-zal-pyk 0.5s var(--op-ease) both;
  animation-delay: calc(0.75s + var(--zal-i, 0) * 120ms);
}
@media (prefers-reduced-motion: reduce) {
#pf-wstep.zal-z2 .zal-ring {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
#pf-wstep.zal-z2 .zal-kropka {
    transform: none !important;
    animation: none !important;
  }
}
#pf-wstep.zal-z2 .zal-poz { border-top-color: #09090B; }

@keyframes op-zal-pyk {
  0% { transform: scale(0); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@media (min-width: 1024px) { html body #pf-wstep.zal-z2 .zal-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
html body #pf-wstep.zal-z2 .zal-lista .zal-poz { border-top: 1px solid #09090B !important; }
html body #pf-pytania .pt-otwarte .pt-znak { transform: none !important; }
html body #pf-pytania .pt-znak::after { transition: opacity 0.25s ease, background-color 0.3s ease; }
html body #pf-pytania .pt-otwarte .pt-znak::after { opacity: 0; }
html body #pf-pytania .pt-otwarte .pt-nr { color: #FFFFFF !important; }


/* ze strony 2: hero i proces (system op-) */
#top h1 .hero-br, .br-lg { display: none; }
@media (min-width: 1024px) {
#top h1 .hero-br { display: inline; }
}
.hero-wyrownanie { display: none; }
@media (min-width: 1024px) {
#top .hero-wyrownanie { display: block; height: calc(3.9rem * 1.04); }
}
@media (min-width: 1280px) {
#top .hero-wyrownanie { height: calc(4.5rem * 1.04); }
}

@media (min-width: 640px) {

}
@media (min-width: 1024px) {

}

@media (min-width: 640px) {

}
@media (min-width: 1024px) {

}
:root {
  --op-czern: #09090B;
  --op-grafit: #09090B;
  --op-grafit-2: #09090B;
  --op-czerwien: #BF1E28;      
  --op-czerwien-h: #BF1E28;
  --op-biel: #FFFFFF;
  --op-mgla: #FFFFFF;
  --op-linia: #76787C;
  --op-linia-ciemna: #76787C;
  --op-tekst: #09090B;
  --op-tekst-2: #76787C;
  --op-szary: #76787C;          
  --op-szary-ciemne: #76787C;   
  --op-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --op-ease-out: cubic-bezier(0.16, 0.84, 0.28, 1);
}
.op-kontener { max-width: 72rem; margin-inline: auto; padding-inline: 1.5rem; }
.op-ciemna { background: var(--op-czern); color: #FFFFFF; }
.op-nadtytul { display: flex; align-items: center; gap: 0.75rem; margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--op-tekst-2); }
.op-ciemna .op-nadtytul { color: #FFFFFF; }
.op-nadtytul::before { content: ""; flex: 0 0 auto; width: 2.25rem; height: 2px; background: var(--op-czerwien); transform-origin: left; transform: scaleX(0); transition: transform 1.1s var(--op-ease-out) 0.15s; }
.op-widoczne .op-nadtytul::before, .op-nadtytul.op-widoczne::before { transform: scaleX(1); }
main .op-h2 { margin: 0; font-size: clamp(2.4rem, 4.6vw, 3.75rem) !important; line-height: 0.98 !important; letter-spacing: -0.03em !important; font-weight: 600 !important; color: var(--op-czern) !important; -webkit-text-fill-color: var(--op-czern) !important; text-wrap: balance; }
main .op-h2 .l2 { display: block; color: var(--op-szary) !important; -webkit-text-fill-color: var(--op-szary) !important; }
main .op-ciemna .op-h2 { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
main .op-ciemna .op-h2 .l2 { color: var(--op-szary-ciemne) !important; -webkit-text-fill-color: var(--op-szary-ciemne) !important; }
main .op-kropka { color: var(--op-czerwien) !important; -webkit-text-fill-color: var(--op-czerwien) !important; }
main .op-lead, [id^="op-"] .op-lead { font-size: 17px !important; line-height: 1.65 !important; color: var(--op-tekst); max-width: 36rem; margin: 0; }
main .op-ciemna .op-lead, [id^="op-"].op-ciemna .op-lead, [id^="op-"] .op-ciemna .op-lead { color: #FFFFFF; }
.op-przycisk { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 48px; padding: 0 1.5rem; border: 0; background: var(--op-czerwien); color: #FFFFFF !important; font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; }
.op-przycisk:hover, .op-przycisk:focus-visible { background: var(--op-czerwien-h); }
.op-przycisk svg { transition: transform 0.25s ease; }
.op-przycisk:hover svg { transform: translateX(3px); }
.op-przycisk--obrys { background: transparent; color: var(--op-czern) !important; box-shadow: inset 0 0 0 1.5px var(--op-czern); }
.op-przycisk--obrys:hover, .op-przycisk--obrys:focus-visible { background: var(--op-czern); color: #FFFFFF !important; }
.op-ciemna .op-przycisk--obrys { color: #FFFFFF !important; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55); }
.op-ciemna .op-przycisk--obrys:hover, .op-ciemna .op-przycisk--obrys:focus-visible { background: #FFFFFF; color: var(--op-czern) !important; }
[data-op-reveal] .op-wjazd { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--op-ease), transform 0.7s var(--op-ease); transition-delay: calc(var(--op-i, 0) * 110ms); }
.op-widoczne .op-wjazd { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.op-nadtytul::before { transition: none; transform: scaleX(1); }
[data-op-reveal] .op-wjazd { opacity: 1; transform: none; transition: none; }
}
#op-hero {
  --hero-menu: 68px;       
  box-sizing: border-box;  
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin-top: calc(-1 * var(--hero-menu));
  padding-top: var(--hero-menu);
  background: var(--op-czern);
  color: #FFFFFF;
}
#op-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("assets/119479f804e50776b777.webp") center 40% / cover no-repeat var(--op-grafit);
}
#op-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(9, 9, 11, 0.55) 0, rgba(9, 9, 11, 0) 140px),
    linear-gradient(180deg,
      rgba(9, 9, 11, 0) 18%,
      rgba(9, 9, 11, 0.72) 62%,
      rgba(9, 9, 11, 0.96) 100%);
}
#op-hero > div { padding-top: 0 !important; padding-bottom: 0 !important; }
#op-hero .hero-plansza { position: relative; z-index: 1; flex: 1 0 auto; display: flex; align-items: flex-end; }
#op-hero .hero-tresc { width: 100%; padding-block: 2rem 3rem; }
#op-hero .hero-cechy { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
#op-hero .hero-cecha {
  padding: 0.5rem 1rem;
  border: 1px solid #76787C;
  font-size: 11px !important;
  font-weight: 600;
  line-height: 1.2 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FFFFFF;
  white-space: nowrap;
}
#op-hero .hero-tytul {
  margin: 1.75rem 0 0;
  max-width: 22ch;
  font-family: inherit;
  font-size: clamp(2.4rem, 5.4vw, 4.8rem) !important;
  font-weight: 600 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.035em !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
#op-hero .hero-linia {
  display: block;
  overflow: hidden;
  padding: 0.14em 0 0.22em;
  margin: -0.14em 0 -0.22em;
}
#op-hero .hero-linia-in { display: block; }
#op-hero .hero-kropka { display: inline-block; transform-origin: 57% 77%; }
#op-hero .hero-lead {
  margin: 1.5rem 0 0;
  max-width: 34rem;
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: #FFFFFF;
}
#op-hero .hero-akcje { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin-top: 2.25rem; }
#op-hero .hero-akcje .op-przycisk { white-space: nowrap; }
#op-hero .hero-pasek {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 1.5rem;
  row-gap: 0.5rem;
  max-width: 34rem;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #76787C;
}
#op-hero .hero-ocena {
  margin: 0;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #FFFFFF;
}
#op-hero .hero-ocena-nr { font-weight: 600; color: #FFFFFF; }
#op-hero .hero-sep { color: #76787C; }
#op-hero .hero-tel {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: #FFFFFF;
  white-space: nowrap;
  text-decoration: none;
  padding-bottom: 2px;
  background: linear-gradient(var(--op-czerwien), var(--op-czerwien)) 0 100% / 0 1px no-repeat;
  transition: background-size 0.35s var(--op-ease);
}
#op-hero .hero-tel:hover, #op-hero .hero-tel:focus-visible { background-size: 100% 1px; }
@media (min-width: 640px) {
#op-hero .hero-akcje { display: flex; flex-wrap: wrap; }
}
@media (min-width: 768px) {
#op-hero .hero-tytul { margin-top: 2rem; }
#op-hero .hero-cechy { gap: 0.625rem; }
}
@media (min-width: 1024px) {
#op-hero .hero-tytul { font-size: clamp(2.6rem, 5.4vw, 4.8rem) !important; }
#op-hero .hero-tresc { padding-block: 3.5rem clamp(3.5rem, 8vh, 6rem); }
#op-hero .hero-lead { margin-top: 1.75rem; }
#op-hero .hero-akcje { margin-top: 2.5rem; }
#op-hero .hero-pasek { margin-top: 3rem; }
}
@media (min-width: 1280px) {
#op-hero .hero-tytul { margin-top: 2.25rem; }
}
#op-hero.hero-js .hero-cecha { clip-path: inset(0 100% 0 0); }
#op-hero.hero-start .hero-cecha {
  clip-path: inset(0);
  transition: clip-path 0.5s var(--op-ease-out);
  transition-delay: calc(0.08s + var(--hero-i, 0) * 90ms);
}
#op-hero.hero-js .hero-linia-in { transform: translateY(130%); }
#op-hero.hero-start .hero-linia-in {
  transform: none;
  transition: transform 0.9s var(--op-ease-out);
  transition-delay: calc(0.42s + var(--hero-i, 0) * 70ms);
}
#op-hero.hero-js .hero-kropka { transform: scale(0); }
#op-hero.hero-start .hero-kropka { animation: op-hero-pyk 0.5s var(--op-ease) 1.1s both; }
#op-hero.hero-js .hero-wjazd { opacity: 0; transform: translateY(18px); }
#op-hero.hero-start .hero-wjazd {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--op-ease), transform 0.7s var(--op-ease);
  transition-delay: calc(1.2s + var(--hero-w, 0) * 100ms);
}
@media (prefers-contrast: more) {
#op-hero .hero-lead, #op-hero .hero-ocena { color: #FFFFFF; }
#op-hero .hero-cecha { border-color: #76787C; }
}
@media (prefers-reduced-motion: reduce) {
#op-hero.hero-js .hero-cecha,
  #op-hero.hero-start .hero-cecha { clip-path: none !important; transition: none !important; }
#op-hero.hero-js .hero-linia-in,
  #op-hero.hero-start .hero-linia-in,
  #op-hero.hero-js .hero-kropka,
  #op-hero.hero-start .hero-kropka,
  #op-hero.hero-js .hero-wjazd,
  #op-hero.hero-start .hero-wjazd {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
#op-hero .hero-tel { transition: none; }
}
#op-proces {
  --pro-nr: clamp(2.5rem, 4vw, 3.5rem);   
  --pro-znak: 14px;
  --pro-luz: 1.25rem;                     
  --pro-luz2: 1.5rem;                     
  --pro-os: calc(var(--pro-nr) / 2);      
  --pro-t: 900ms;
  --pro-c: 0ms;
  background: var(--op-czern);
  overflow-x: clip;
}
#op-proces .pro-glowa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
#op-proces .pro-glowa-tekst { min-width: 0; }
#op-proces .pro-h2 { margin: 1.25rem 0 0; }
#op-proces .pro-lead {
  max-width: 34rem;
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: #FFFFFF;
}
#op-proces .pro-szyna { margin-top: 3rem; }
#op-proces .pro-kroki {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
#op-proces .pro-krok {
  position: relative;
  display: grid;
  grid-template-columns: var(--pro-znak) minmax(0, 1fr);
  grid-template-areas:
    "znak nr"
    ".    tresc";
  column-gap: 1.25rem;
  row-gap: 0.75rem;
  padding: 0 0 2.5rem;
  font-size: 16px !important;   
  color: #FFFFFF;
}
#op-proces .pro-krok:last-child { padding-bottom: 0; }
#op-proces .pro-krok::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: calc(var(--pro-znak) / 2 - 0.5px);
  top: var(--pro-os);
  width: 1px;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
}
#op-proces .pro-tor {
  position: absolute;
  z-index: 0;
  left: calc(var(--pro-znak) / 2 - 1px);
  top: var(--pro-os);
  width: 2px;
  height: 100%;
  background: var(--op-czerwien);
  transform-origin: center top;
}
#op-proces .pro-krok:last-child::before,
#op-proces .pro-krok:last-child .pro-tor { display: none; }
#op-proces .pro-znak {
  grid-area: znak;
  position: relative;
  z-index: 1;                 
  align-self: start;
  box-sizing: border-box;
  width: var(--pro-znak);
  height: var(--pro-znak);
  margin-top: calc(var(--pro-nr) / 2 - var(--pro-znak) / 2);
  border: 2px solid #76787C;
  border-radius: 50%;
  background: var(--op-czern);
}
#op-proces .pro-znak::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--op-czerwien);
}
#op-proces .pro-nr {
  grid-area: nr;
  display: block;
  font-family: inherit;
  font-size: var(--pro-nr);
  font-weight: 600;
  line-height: 1;             
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
}
#op-proces .pro-tresc { grid-area: tresc; min-width: 0; max-width: 32rem; }
#op-proces .pro-krok .pro-tyt {
  margin: 0 !important;
  font-family: inherit;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  text-wrap: balance;
}
#op-proces .pro-opis {
  margin: 0.625rem 0 0;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #FFFFFF;
  text-wrap: pretty;
}
#op-proces .pro-akcja { margin-top: 3rem; }
@media (min-width: 640px) {
#op-proces .pro-szyna { margin-top: 3.5rem; }
#op-proces .pro-krok { column-gap: 1.75rem; padding-bottom: 3rem; }
#op-proces .pro-krok .pro-tyt { font-size: 1.375rem !important; }
#op-proces .pro-akcja { margin-top: 3.5rem; }
}
@media (min-width: 1024px) {
#op-proces {
    --pro-os: calc(var(--pro-nr) + var(--pro-luz) + var(--pro-znak) / 2);
    --pro-t: 600ms;
    --pro-c: 300ms;
  }
#op-proces .pro-glowa { gap: 1.75rem; }
#op-proces .pro-h2 { margin-top: 1.5rem; }
#op-proces .pro-lead { max-width: 36rem; }
#op-proces .pro-szyna { margin-top: 80px; }
#op-proces .pro-kroki { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0; }
#op-proces .pro-krok {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;                  
    padding: 0 0.75rem;      
  }
#op-proces .pro-krok::before {
    left: 0;
    top: var(--pro-os);
    width: calc(100% + 1px);
    height: 1px;
    margin-top: -0.5px;
  }
#op-proces .pro-tor {
    left: 0;
    top: var(--pro-os);
    width: calc(100% + 1px);
    height: 2px;
    margin-top: -1px;
    transform-origin: left center;
  }
#op-proces .pro-krok:last-child::before { display: block; width: 100%; }
#op-proces .pro-krok:last-child .pro-tor { display: block; width: 100%; }
#op-proces .pro-nr { margin: 0 0 var(--pro-luz); text-align: center; }
#op-proces .pro-znak { align-self: center; margin-top: 0; }
#op-proces .pro-tresc { width: 100%; max-width: 20rem; margin-top: var(--pro-luz2); }
#op-proces .pro-akcja { margin-top: 4.5rem; }
}
@media (min-width: 1280px) {
#op-proces .pro-krok { padding-inline: 1rem; }
#op-proces .pro-akcja { margin-top: 5rem; }
}
#op-proces.pro-js .pro-tor { transform: scaleY(0); }
#op-proces.pro-js .pro-nr,
#op-proces.pro-js .pro-tresc { opacity: 0; transform: translateY(16px); }
#op-proces.pro-js .pro-znak::after { transform: scale(0); }
#op-proces.pro-js .pro-kroki.op-widoczne .pro-tor {
  transform: none;
  transition: transform var(--pro-t) linear;
  transition-delay: calc(var(--pro-i, 0) * var(--pro-t));
}
#op-proces.pro-js .pro-kroki.op-widoczne .pro-nr,
#op-proces.pro-js .pro-kroki.op-widoczne .pro-tresc {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s var(--op-ease), transform 0.7s var(--op-ease-out);
  transition-delay: calc(var(--pro-i, 0) * var(--pro-t) + var(--pro-c));
}
#op-proces.pro-js .pro-kroki.op-widoczne .pro-znak::after {
  transform: scale(1);
  transition: transform 0.45s var(--op-ease);
  transition-delay: calc(var(--pro-i, 0) * var(--pro-t) + var(--pro-c));
}
@media (min-width: 1024px) {
#op-proces.pro-js .pro-tor { transform: scaleX(0); }
}
@media (prefers-contrast: more) {
#op-proces .pro-lead,
  #op-proces .pro-opis { color: #FFFFFF; }
#op-proces .pro-krok::before { background: rgba(255, 255, 255, 0.42); }
}
@media (prefers-reduced-motion: reduce) {
#op-proces.pro-js .pro-tor,
  #op-proces.pro-js .pro-znak::after,
  #op-proces.pro-js .pro-kroki.op-widoczne .pro-tor,
  #op-proces.pro-js .pro-kroki.op-widoczne .pro-znak::after { transform: none !important; transition: none !important; }
#op-proces.pro-js .pro-nr,
  #op-proces.pro-js .pro-tresc,
  #op-proces.pro-js .pro-kroki.op-widoczne .pro-nr,
  #op-proces.pro-js .pro-kroki.op-widoczne .pro-tresc { opacity: 1 !important; transform: none !important; transition: none !important; }
}
#op-proces > div { padding-bottom: calc(var(--sekcja) / 2) !important; }
main .op-nadtytul {
    display: block;
    position: relative;
    width: fit-content;
    gap: 0;
    padding-bottom: 0.35rem;   
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.16em;
  }
main .op-nadtytul::before { display: none; }
main .op-nadtytul::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0.16em;   
    bottom: 0;
    height: 2px;
    background: var(--op-czerwien);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.7s ease-out 0.15s;
  }
main .op-widoczne .op-nadtytul::after,
  main .op-nadtytul.op-widoczne::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
main .op-nadtytul::after { transition: none; transform: scaleX(1); }
}
html body .op-przycisk,
  html body main#strona-glowna .op-przycisk,
  html body main #op-hero .hero-akcje .op-przycisk,
  html body main #op-proces .op-przycisk,
  html body main #op-opinie .op-przycisk.opi-link,
  html body main #op-cta .op-przycisk.cta-przycisk,
  html body main #op-kontakt .op-przycisk.kon-wyslij {
    box-sizing: border-box !important;
    min-height: 40px !important;
    padding: 8px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 21px !important;
  }


@keyframes op-hero-pyk {
  0% { transform: scale(0); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}


/* ze strony 1: o nas (#obiuro-foto) i korzysci (#etapy) */
#etapy .etap h3 { display: flex; align-items: center; min-height: 38px; }
#etapy .etap p { margin-top: 1rem !important; }
.text-brand, #proces .text-brand, #etapy .text-brand, #opinie .text-brand, #komu .text-brand, #oferta-lista .text-brand, #top .text-brand { background-image: none !important; background-color: transparent !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: #09090B !important; -webkit-text-fill-color: #09090B !important; }
#etapy .text-brand { color: #76787C !important; -webkit-text-fill-color: #76787C !important; }
#etapy > div { padding-top: var(--sekcja) !important; padding-bottom: var(--sekcja) !important; }
#etapy { position: relative; background: url(assets/119479f804e50776b777.webp) 82% center / cover no-repeat !important; color: #FFFFFF; }
#etapy::before { content: ""; position: absolute; inset: 0; background: rgba(9, 9, 11, 0.93); }
#etapy > div { position: relative; }
#etapy .naglowek { max-width: 44rem; }
#etapy .naglowek h2 { color: #FFFFFF !important; }
#etapy .naglowek p { margin-top: 1.5rem; color: #FFFFFF !important; }
#etapy .punkty { display: grid; gap: 3rem 2.5rem; margin-top: 4.5rem; }
@media (min-width: 640px) {
#etapy .punkty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
#etapy .punkty { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4rem 3rem; margin-top: 6rem; }
}
#etapy .etap { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.1rem; align-items: center; align-content: start; }
#etapy .etap .numer { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #76787C; border-radius: 0 !important; font-size: 14px; font-weight: 500; color: #76787C; }
#etapy .etap h3 { margin: 0; font-size: 1.35rem !important; font-weight: 400 !important; letter-spacing: 0.07em !important; text-transform: uppercase; color: #FFFFFF !important; }
#etapy .etap p { grid-column: 2; margin-top: 1rem; color: #FFFFFF !important; }
#etapy .zamkniecie { max-width: 46rem; margin: 5rem auto 0; text-align: center; }
@media (min-width: 1024px) {
#etapy .zamkniecie { margin-top: 7rem; }
}
#etapy .zamkniecie h2 { color: #FFFFFF !important; }
#etapy .zamkniecie p { margin-top: 1.5rem; color: #FFFFFF !important; }
#etapy .zamkniecie .przycisk { margin-top: 2.25rem; }
section#etapy { background-image: none !important; background-position: 50% 56% !important; background-color: #76787C !important; background-blend-mode: multiply !important; filter: saturate(1.4) !important; }
section#etapy::before { background: rgba(9, 9, 11, 0.5) !important; }
section#etapy, section#etapy p, section#etapy h2, section#etapy h3, section#etapy span, section#etapy div,
  section#kontakt-cta, section#kontakt-cta p, section#kontakt-cta h2, section#kontakt-cta span,
  #proces .karta-foto, #proces .karta-foto p, #proces .karta-foto h3,
  #opinie .karta-kolor, #opinie .karta-kolor p, #opinie .karta-kolor span, #opinie .karta-kolor strong, #opinie .karta-kolor small, #opinie .karta-kolor div,
  #top .text-zinc-500, #top h1 { color: #FFFFFF !important; }
section#etapy .etap .numer { border-color: #76787C !important; }
section#etapy .naglowek p, section#etapy .etap p, section#kontakt-cta .srodek p { color: #FFFFFF !important; }
section#etapy span.bg-brand, #top span.bg-brand { background-color: #FFFFFF !important; }
section#etapy .kreska-anim::after, #top .kreska-anim::after { background-color: #FFFFFF !important; }
section#etapy .text-zinc-500, #top .text-zinc-500 { color: #FFFFFF !important; }
section#etapy .etap .numer { border-color: #76787C !important; color: #FFFFFF !important; }
section#kontakt-cta h2, section#kontakt-cta span.bg-brand,
  section#etapy h2, section#etapy h2 .text-brand,
  section#etapy .naglowek h2, section#etapy .zamkniecie h2,
  #proces .karta-foto h3, #opinie .karta-kolor h3 { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
#top, section#etapy, section#kontakt-cta, #proces .karta-foto, #opinie .karta-kolor {
    background-color: transparent !important;
    background-blend-mode: normal !important;
    filter: none !important;
  }
section#etapy::before, section#kontakt-cta::before { background: rgba(9, 9, 11, 0.93) !important; }
.kreska-anim::after,
  section#etapy .kreska-anim::after,
  section#kontakt-cta .kreska-anim::after,
  #top .kreska-anim::after,
  #top span.bg-brand,
  section#etapy span.bg-brand,
  section#kontakt-cta span.bg-brand {
    background-image: none !important;
    background-color: #BF1E28 !important;
  }
#etapy .etap .numer, section#etapy .etap .numer {
    position: relative !important;
    border-color: transparent !important;
  }
#etapy .etap .numer::before, #etapy .etap .numer::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
    width: 0;
    height: 0;
    pointer-events: none;
    transition: width 0.3s linear, height 0.3s linear 0.3s;
  }
#etapy .etap .numer::before {
    top: -1px; left: -1px;
    border-top: 1px solid #BF1E28;
    border-right: 1px solid #BF1E28;
  }
#etapy .etap .numer::after {
    right: -1px; bottom: -1px;
    border-bottom: 1px solid #BF1E28;
    border-left: 1px solid #BF1E28;
  }
#etapy .etap.is-visible .numer::before, #etapy .etap.is-visible .numer::after {
    width: calc(100% + 2px);
    height: calc(100% + 2px);
  }
@media (prefers-reduced-motion: reduce) {
#etapy .etap .numer::before, #etapy .etap .numer::after {
      width: calc(100% + 2px); height: calc(100% + 2px); transition: none;
    }
}
#obiuro-foto { background: #FFFFFF !important; }
#obiuro-foto > .opakowanie {
    padding-top: calc(var(--sekcja) / 2) !important;
    padding-bottom: calc(var(--sekcja) / 2) !important;
  }
#obiuro-foto .blok-foto {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
#obiuro-foto .foto {
    background-image: url(assets/f7833b74eaf403400f6d.webp);
    background-size: cover;
    background-position: 50% 42%;
    background-repeat: no-repeat;
    min-height: 20rem;
  }
#obiuro-foto .panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.15rem;
    background: #09090B;
    color: #FFFFFF;
    padding: 2.5rem 1.5rem;
  }
#obiuro-foto .panel h3 { margin: 0; color: #FFFFFF !important; letter-spacing: -0.01em; }
#obiuro-foto .panel p { margin: 0; color: #FFFFFF !important; max-width: 36rem; }
#obiuro-foto .przycisk { margin-top: 0.85rem; }
#obiuro-foto .obrys {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 1.75rem;
    border: 1px solid #76787C;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 500;
    transition: background-color 0.25s, border-color 0.25s, color 0.25s;
  }
#obiuro-foto .obrys:hover, #obiuro-foto .obrys:focus-visible {
    background-color: #FFFFFF !important;
    border-color: #76787C !important;
    color: #09090B !important;
  }
@media (min-width: 768px) {
#obiuro-foto .panel { padding: 3rem 2.5rem; }
}
@media (min-width: 1024px) {
#obiuro-foto .blok-foto { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
#obiuro-foto .foto { min-height: 32rem; }
#obiuro-foto .panel { padding: 3.5rem 4rem; }
}
#obiuro-foto .panel { gap: 0; }
#obiuro-foto .panel-tresc { display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 40rem; }
#obiuro-foto .panel-nadtytul { position: relative; display: inline-block; padding-bottom: 0.5rem; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.24em; text-transform: uppercase; color: #FFFFFF; }
#obiuro-foto .panel-nadtytul::after { content: ""; position: absolute; left: 0; right: 0.24em; bottom: 0; height: 2px; background: #BF1E28; transform: scaleX(0); transform-origin: left center; transition: transform 0.7s ease-out 0.75s; }
#obiuro-foto.is-visible .panel-nadtytul::after { transform: scaleX(1); }
#obiuro-foto .panel h3.panel-tytul { margin: 1.25rem 0 0 !important; font-size: clamp(2.1rem, 3.4vw, 3.1rem) !important; font-weight: 600 !important; line-height: 1.02 !important; letter-spacing: -0.03em !important; color: #FFFFFF !important; }
#obiuro-foto .panel h3.panel-tytul span { display: block; }
#obiuro-foto .panel p.panel-lead { margin: 1.5rem 0 0 !important; max-width: 34rem; font-size: 18px !important; line-height: 1.6 !important; color: #FFFFFF !important; }
#obiuro-foto .panel-kolumny { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; width: 100%; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #76787C; }
#obiuro-foto .panel .panel-kolumny p { position: relative; margin: 0 !important; padding-top: 1.125rem; max-width: none; font-size: 15px !important; line-height: 1.65 !important; color: #FFFFFF !important; }
#obiuro-foto .panel .panel-kolumny p::before { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 2px; background: #BF1E28; }
#obiuro-foto .panel-dol { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; width: 100%; margin-top: 2.25rem; }
#obiuro-foto .panel-dol .przycisk { margin-top: 0; }
#obiuro-foto .panel-podpis { display: flex; align-items: center; gap: 0.875rem; }
#obiuro-foto .panel-podpis img { display: block; flex: none; width: 44px; height: 44px; border-radius: 50%; }
#obiuro-foto .panel-podpis strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; color: #FFFFFF; }
#obiuro-foto .panel-podpis span span { display: block; font-size: 13px; line-height: 1.45; color: #FFFFFF; }
@media (min-width: 640px) {
#obiuro-foto .panel-kolumny { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
}
@media (min-width: 1024px) {
#obiuro-foto .panel { padding: 4.5rem 4.5rem; }
}
@media (prefers-reduced-motion: reduce) {
#obiuro-foto .panel-nadtytul::after { transition: none; transform: scaleX(1); }
}
#etapy .etap h3 { font-size: 1.4rem !important; }
#etapy .etap p { font-size: 17px !important; line-height: 1.68 !important; }
#etapy .etap .numer { width: 1.4rem !important; height: 1.4rem !important; font-size: 11px !important; }
@media (min-width: 1024px) {
#etapy .etap h3 { font-size: 1.7rem !important; }
#etapy .etap .numer { width: 1.7rem !important; height: 1.7rem !important; font-size: 13px !important; }
}
#etapy > div {
    max-width: none !important;
    padding-left: clamp(1.5rem, 6vw, 6rem) !important;
    padding-right: clamp(1.5rem, 6vw, 6rem) !important;
  }
#etapy .naglowek { max-width: 46rem; }
#obiuro-foto .obrys {
    border: 0 !important;
    background-color: #BF1E28 !important;
    color: #FFFFFF !important;
  }
#obiuro-foto .obrys:hover, #obiuro-foto .obrys:focus-visible {
    background-color: #BF1E28 !important;
    border: 0 !important;
    color: #FFFFFF !important;
  }
section#etapy {
    background-image: none !important;
    background-color: #09090B !important;
  }
section#etapy::before { background: transparent !important; }
#obiuro-foto.reveal {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}
#obiuro-foto .foto {
  clip-path: inset(0 100% 0 0);
  transform: scale(1.06);
}
#obiuro-foto .panel { clip-path: inset(0 0 0 100%); }
#obiuro-foto.is-visible .foto {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
  transition: clip-path 0.85s cubic-bezier(0.16, 0.84, 0.28, 1), transform 1.5s cubic-bezier(0.16, 0.84, 0.28, 1);
}
#obiuro-foto.is-visible .panel {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.85s cubic-bezier(0.16, 0.84, 0.28, 1) 0.06s;
}
@media (prefers-reduced-motion: reduce) {
#obiuro-foto .foto, #obiuro-foto .panel { clip-path: none !important; transform: none !important; }
}
#obiuro-foto .panel { background: #09090B !important; }
#obiuro-foto .obrys {
    background-color: #BF1E28 !important;
    border: 0 !important;
    color: #FFFFFF !important;
  }
#obiuro-foto .obrys:hover, #obiuro-foto .obrys:focus-visible {
    background-color: #BF1E28 !important;
    border: 0 !important;
    color: #FFFFFF !important;
  }
section#etapy {
    background-image: none !important;
    background-color: #09090B !important;
  }
section#etapy::before { background: transparent !important; }
.nadtytul > span.kreska-anim,
  section#etapy .nadtytul > span.kreska-anim,
  section#kontakt-cta .nadtytul > span.kreska-anim { background: transparent !important; }
@media (min-width: 1024px) {
#etapy .naglowek { max-width: none !important; }
#etapy .naglowek h2 .naglowek-w { display: block; white-space: nowrap; }
#etapy .naglowek > p { max-width: 46rem; }
}
html body section#etapy .punkty { margin-top: 3rem !important; }
@media (min-width: 1024px) {
html body section#etapy .punkty { margin-top: 4rem !important; }
}
html body section#etapy > div { max-width: 72rem !important; margin-left: auto !important; margin-right: auto !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
html body section#etapy#etapy { position: relative; isolation: isolate; background: #09090B !important; background-image: none !important; background-blend-mode: normal !important; filter: none !important; }
html body section#etapy#etapy::before { content: "" !important; display: none !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none; background: linear-gradient(180deg, rgba(9, 9, 11, 0.92) 0%, rgba(9, 9, 11, 0.84) 100%) !important; }
html body section#etapy#etapy > div { position: relative; z-index: 1; }
html body section#etapy .punkty { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 1rem !important; }
html body section#etapy .etap { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 6px; position: relative; padding: 0 !important; background: none !important; border: 0 !important;
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), scale 0.35s ease; }
html body section#etapy .etap::before, html body section#etapy .etap::after { display: none !important; content: none !important; }
html body section#etapy .etap-gora, html body section#etapy .etap-dol { position: relative; width: 100%; box-sizing: border-box; transition: background-color 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; }
html body section#etapy .etap-gora { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 1.75rem; background: #BF1E28; }
html body section#etapy .etap-gora::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: #BF1E28; transform: scaleX(0); transform-origin: left center; transition: transform 0.35s ease; }
html body section#etapy .etap-dol { flex: 1 1 auto; padding: 1.75rem 1.75rem 2rem; background: #BF1E28; border: 0; }
html body section#etapy#etapy .etap h3.font-display { margin: 0 !important; font-size: 20px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: -0.015em !important; text-transform: none !important; white-space: normal !important; color: #FFFFFF !important; }
html body section#etapy .etap .numer { display: block !important; position: static !important; flex: none; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0.04em !important; color: #BF1E28 !important; -webkit-text-fill-color: #BF1E28 !important; -webkit-text-stroke: 0 !important; }
html body section#etapy .etap .numer::before, html body section#etapy .etap .numer::after { display: none !important; content: none !important; }
html body section#etapy .etap p { margin: 0 !important; font-size: 16px !important; line-height: 1.6 !important; color: #FFFFFF !important; }
@media (min-width: 1024px) {
html body section#etapy .punkty { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1.25rem !important; }
html body section#etapy .etap-gora { padding: 1.75rem 2.25rem; }
html body section#etapy .etap-dol { padding: 2rem 2.25rem 2.25rem; }
html body section#etapy#etapy .etap h3.font-display { font-size: 22px !important; }
}
@media (min-width: 1280px) {
html body section#etapy .etap-gora { padding: 2rem 2.5rem; }
html body section#etapy .etap-dol { padding: 2.25rem 2.5rem 2.5rem; }
}
html body section#etapy .etap.etap-aktywny { scale: 1.03; z-index: 2; }
html body section#etapy .etap.etap-aktywny .etap-gora, html body section#etapy .etap.etap-aktywny .etap-dol { background-color: #09090B; box-shadow: 0 30px 60px -30px rgba(9, 9, 11, 0.6); }
html body section#etapy .etap.etap-aktywny .etap-gora::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
html body section#etapy .etap, html body section#etapy .etap-gora::before { transition: none; }
}
/* nadtytul jak na stronie 1 (kreska pod napisem) - tylko w korzysciach */
html body section#etapy .nadtytul {
    display: grid !important;
    grid-template-columns: auto;
    align-items: end !important;
    gap: 0 !important;
    width: fit-content;
    max-width: 100%;
  }
html body section#etapy .nadtytul > span { grid-area: 1 / 1; }
html body section#etapy .nadtytul > span:last-child {
    display: block;
    padding-bottom: 0.35rem;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em !important;
    line-height: 1.5 !important;
    white-space: normal !important;
  }
html body section#etapy .nadtytul > span.bg-brand {
    align-self: end;
    justify-self: stretch;
    width: auto !important;
    height: 2px !important;
    font-size: 14px;
    margin-right: 0.16em;
  }
html body section#etapy .nadtytul > .kreska-anim::after { transition: width 0.7s ease-out 0.15s; }
html body section#etapy .nadtytul > span.bg-brand:not(.kreska-anim) {
    transform-origin: left center;
    animation: nadtytul-kreska 0.7s ease-out 0.15s both;
  }
html body section#etapy html.preloader-trwa .nadtytul > span.bg-brand:not(.kreska-anim) { animation: none; transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) {
html body section#etapy .nadtytul > .kreska-anim::after { transition: none; }
html body section#etapy .nadtytul > span.bg-brand:not(.kreska-anim) { animation: none; transform: none; }
}

  @keyframes nadtytul-kreska { from { transform: scaleX(0); } to { transform: scaleX(1); } }


/* ze strony 3: zalety (#pf-wstep) */
#pf-wstep {
  --wst-kolo: 5.5rem;
  background: #FFFFFF;
  color: var(--pf-tekst);
  overflow-x: clip;
}
#pf-wstep .wst-h2 { margin: 1.25rem 0 0 !important; }
#pf-wstep .wst-tresc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 3rem;
  margin-top: 2.25rem;
}
#pf-wstep .wst-bok { min-width: 0; }
#pf-wstep .wst-bok .wst-lead {
  margin: 0 !important;
  max-width: 34rem;
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: var(--pf-tekst) !important;
  text-wrap: pretty;
}
#pf-wstep .wst-marka {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  margin-top: 2.25rem;
}
#pf-wstep .wst-kolo {
  position: relative;
  flex: 0 0 var(--wst-kolo);
  width: var(--wst-kolo);
  height: var(--wst-kolo);
  border-radius: 50%;
  background: var(--pf-mgla);
}
#pf-wstep .wst-kolo .wst-sygnet {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  border-radius: 50%;
  max-width: none;
  height: auto;
  translate: -50% -50%;
}
#pf-wstep .wst-podpis { display: block; min-width: 0; }
#pf-wstep .wst-firma {
  display: block;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--pf-czern);
}
#pf-wstep .wst-miejsce {
  display: block;
  margin-top: 0.2rem;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pf-tekst-2);
}
#pf-wstep .wst-czesc { white-space: nowrap; }
@media (max-width: 479px) {
#pf-wstep .wst-sep { display: none; }
#pf-wstep .wst-czesc { display: block; }
}
#pf-wstep .wst-lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 2.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
#pf-wstep .wst-lista .wst-punkt {
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--pf-tekst);
}
#pf-wstep .wst-punkt .wst-tyt {
  margin: 0 !important;
  font-family: inherit;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  color: var(--pf-naglowek) !important;
  -webkit-text-fill-color: var(--pf-naglowek) !important;
}
#pf-wstep .wst-punkt .wst-znak {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.7rem;
  vertical-align: 0.2em;
  background: var(--pf-akcent);
}
#pf-wstep .wst-punkt .wst-nazwa {
  padding-bottom: 0.15em;
  background-image: linear-gradient(var(--pf-akcent), var(--pf-akcent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.4s var(--pf-ease);
}
#pf-wstep .wst-punkt .wst-tekst {
  margin: 0.625rem 0 0 !important;
  max-width: 30rem;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: var(--pf-tekst) !important;
  text-wrap: pretty;
}
@media (min-width: 768px) {
#pf-wstep .wst-h2 { margin-top: 1.5rem !important; }
#pf-wstep .wst-tresc { row-gap: 3.5rem; margin-top: 2.75rem; }
#pf-wstep .wst-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; row-gap: 2.75rem; }
}
@media (min-width: 1024px) {
#pf-wstep .wst-tresc {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 3rem;
    align-items: start;
    margin-top: 3.5rem;
  }
#pf-wstep .wst-bok .wst-lead { max-width: 26rem; }
#pf-wstep .wst-marka { margin-top: 2.5rem; }
#pf-wstep .wst-lista { column-gap: 2.5rem; row-gap: 3rem; }
}
@media (min-width: 1280px) {
#pf-wstep .wst-tresc { column-gap: 4rem; }
#pf-wstep .wst-lista { column-gap: 3rem; }
}
@media (hover: hover) and (pointer: fine) {
#pf-wstep .wst-punkt:hover .wst-nazwa { background-size: 100% 2px; }
}
#pf-wstep.wst-js .wst-punkt { opacity: 0; transform: translateY(18px); }
#pf-wstep.wst-js .wst-punkt .wst-znak { transform: scale(0); }
#pf-wstep.wst-js .wst-lista.pf-widoczne .wst-punkt {
  opacity: 1;
  transform: none;
  transition: opacity 0.65s var(--pf-ease), transform 0.75s var(--pf-ease-out);
  transition-delay: calc(0.1s + var(--wst-i, 0) * 110ms);
}
#pf-wstep.wst-js .wst-lista.pf-widoczne .wst-punkt .wst-znak {
  animation: wst-pyk 0.55s var(--pf-ease) both;
  animation-delay: calc(0.45s + var(--wst-i, 0) * 110ms);
}
@media (prefers-contrast: more) {
#pf-wstep .wst-miejsce { color: var(--pf-tekst); }
#pf-wstep .wst-punkt .wst-tekst,
  #pf-wstep .wst-bok .wst-lead { color: #09090B !important; }
}
@media (prefers-reduced-motion: reduce) {
#pf-wstep.wst-js .wst-punkt,
  #pf-wstep.wst-js .wst-lista.pf-widoczne .wst-punkt { opacity: 1 !important; transform: none !important; transition: none !important; }
#pf-wstep.wst-js .wst-punkt .wst-znak,
  #pf-wstep.wst-js .wst-lista.pf-widoczne .wst-punkt .wst-znak { transform: none !important; animation: none !important; }
#pf-wstep .wst-punkt .wst-nazwa { transition: none !important; }
}
#pf-wstep > div { padding-top: calc(var(--sekcja) / 2) !important; }
html body section#pf-wstep > div { padding-top: var(--sekcja) !important; padding-bottom: calc(var(--sekcja) / 2) !important; }

@keyframes wst-pyk {
  0% { transform: scale(0) rotate(-45deg); }
  60% { transform: scale(1.35) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); }
}


/* z glownej 1A: korzysci na granacie (#pf-zalety) */
html body section#pf-zalety.w-granat.et-wspolne { background: transparent !important; position: relative; z-index: 1; }
html body #pf-zalety { --pf-czern: #09090B; --pf-grafit: #09090B; --pf-akcent: #BF1E28; --pf-mgla: #FFFFFF; --pf-linia: #76787C; --pf-tekst: #09090B; --pf-tekst-2: #76787C; --pf-naglowek: #09090B; --pf-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --pf-ease-out: cubic-bezier(0.16, 0.84, 0.28, 1); }
html body #pf-zalety .pf-kontener { max-width: 72rem; margin-inline: auto; padding-inline: 1.5rem; }
html body #pf-zalety .pf-nadtytul { display: block; position: relative; width: fit-content; max-width: 100%; margin: 0; padding-bottom: 0.35rem; font-size: 14px; font-weight: 600; line-height: 1.5; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pf-naglowek); }
html body #pf-zalety.pf-ciemna .pf-nadtytul { color: #FFFFFF; }
html body #pf-zalety .pf-nadtytul::after { content: ""; position: absolute; left: 0; right: 0.16em; bottom: 0; height: 2px; background: var(--pf-akcent); transform: scaleX(0); transform-origin: left center; transition: transform 0.7s ease-out 0.15s; }
html body #pf-zalety.pf-widoczne .pf-nadtytul::after { transform: scaleX(1); }
html body #pf-zalety .pf-h2 { font-size: clamp(2.4rem, 4.6vw, 3.75rem) !important; line-height: 0.98 !important; letter-spacing: -0.03em !important; font-weight: 600 !important; color: var(--pf-naglowek) !important; -webkit-text-fill-color: var(--pf-naglowek) !important; text-wrap: balance; }
html body #pf-zalety .pf-h2 .l2 { display: block; color: inherit !important; -webkit-text-fill-color: inherit !important; }
html body #pf-zalety.pf-ciemna .pf-h2 { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
@media (prefers-reduced-motion: reduce) {
html body #pf-zalety .pf-nadtytul::after { transition: none; transform: scaleX(1); }
}
html body #pf-zalety { --zl-nazwa: 1.375rem; background: var(--pf-czern); color: #FFFFFF; overflow-x: clip; }
html body #pf-zalety > .pf-kontener { position: relative; }
html body #pf-zalety > .pf-kontener::before { display: none; content: ""; position: absolute; top: 0; left: 1.5rem; right: 1.5rem; height: 1px; background: rgba(255, 255, 255, 0.12); pointer-events: none; }
html body #pf-zalety .zl-h2 { margin: 1.25rem 0 0; }
html body #pf-zalety .zl-lista { display: grid; grid-template-columns: minmax(0, 1fr); margin: 2.5rem 0 0; padding: 0; list-style: none; }
html body #pf-zalety .zl-lista .zl-poz { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 1rem; align-content: start; margin: 0; padding: 1.75rem 0 2rem; font-size: 16px !important; line-height: 1.7 !important; color: #FFFFFF; }
html body #pf-zalety .zl-lista .zl-poz::marker { content: none; }
html body #pf-zalety .zl-lista .zl-poz::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255, 255, 255, 0.18); transform-origin: 0 50%; pointer-events: none; }
html body #pf-zalety .zl-ikona { grid-column: 1; grid-row: 1; display: block; width: 24px; height: 24px; margin-top: calc((var(--zl-nazwa) * 1.25 - 24px) / 2); color: var(--pf-akcent); }
html body #pf-zalety .zl-poz .zl-nazwa { grid-column: 2; grid-row: 1; margin: 0 !important; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: var(--zl-nazwa) !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: -0.015em !important; text-transform: none !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; text-wrap: balance; }
html body #pf-zalety .zl-poz .zl-opis { grid-column: 2; grid-row: 2; margin: 0.625rem 0 0 !important; max-width: 34rem; font-family: 'Inter', system-ui, sans-serif; font-size: 16px !important; font-weight: 400 !important; line-height: 1.7 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; text-wrap: pretty; }
@media (min-width: 768px) {
html body #pf-zalety { --zl-nazwa: 1.5rem; }
}
@media (min-width: 768px) {
html body #pf-zalety .zl-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; margin-top: 3.25rem; }
}
@media (min-width: 768px) {
html body #pf-zalety .zl-lista .zl-poz { column-gap: 1.25rem; padding: 2rem 0 2.25rem; }
}
@media (min-width: 768px) {
html body #pf-zalety .zl-poz .zl-opis { font-size: 17px !important; }
}
@media (min-width: 1024px) {
html body #pf-zalety .zl-lista { column-gap: 5rem; margin-top: 4rem; }
}
@media (min-width: 1024px) {
html body #pf-zalety .zl-lista .zl-poz { padding: 2.25rem 0 2.5rem; }
}
@media (min-width: 1280px) {
html body #pf-zalety .zl-lista { column-gap: 6rem; }
}
html body #pf-zalety .zl-lista .zl-poz:last-child { padding-bottom: 0; }
@media (min-width: 768px) {
html body #pf-zalety .zl-lista .zl-poz:nth-last-child(2):nth-child(odd) { padding-bottom: 0; }
}
html body #pf-zalety .zl-poz { --zl-k: 0; }
@media (min-width: 768px) {
html body #pf-zalety .zl-poz:nth-child(even) { --zl-k: 1; }
}
html body #pf-zalety.zl-js .zl-lista .zl-poz::before { transform: scaleX(0); }
html body #pf-zalety.zl-js .zl-poz > * { opacity: 0; transform: translateY(14px); }
html body #pf-zalety.zl-js .zl-lista .zl-poz.pf-widoczne::before { transform: none; transition: transform 1.1s var(--pf-ease-out); transition-delay: calc(var(--zl-k) * 180ms); }
html body #pf-zalety.zl-js .zl-poz.pf-widoczne > * { opacity: 1; transform: none; transition: opacity 0.6s var(--pf-ease), transform 0.8s var(--pf-ease-out); transition-delay: calc(var(--zl-k) * 180ms + 260ms); }
html body #pf-zalety.zl-js .zl-poz.pf-widoczne > .zl-opis { transition-delay: calc(var(--zl-k) * 180ms + 340ms); }
html body #pf-zalety:not(.zl-js) .pf-nadtytul::after { transform: scaleX(1); transition: none; }
@media (prefers-contrast: more) {
html body #pf-zalety .zl-poz .zl-opis { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
}
@media (prefers-contrast: more) {
html body #pf-zalety .zl-lista .zl-poz::before { background: rgba(255, 255, 255, 0.4); }
}
@media (prefers-reduced-motion: reduce) {
html body #pf-zalety .zl-lista .zl-poz::before, html body #pf-zalety .zl-poz > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media (min-width: 768px) {
html body #pf-zalety .zl-h2 { margin-top: 1.5rem; }
}
html body #pf-zalety > div { padding-top: calc(var(--sekcja) / 2) !important; }
html body section#pf-zalety.zl-jasne { background: #FFFFFF !important; color: var(--pf-tekst); }
html body #pf-zalety.zl-jasne .zl-lista .zl-poz { color: var(--pf-tekst); }
html body #pf-zalety.zl-jasne .zl-lista .zl-poz::before { background: var(--pf-linia); }
html body #pf-zalety.zl-jasne .zl-poz .zl-nazwa { color: var(--pf-naglowek) !important; -webkit-text-fill-color: var(--pf-naglowek) !important; }
html body #pf-zalety.zl-jasne .zl-poz .zl-opis { color: var(--pf-tekst) !important; -webkit-text-fill-color: var(--pf-tekst) !important; }
@media (prefers-contrast: more) {
html body #pf-zalety.zl-jasne .zl-poz .zl-opis { color: var(--pf-naglowek) !important; -webkit-text-fill-color: var(--pf-naglowek) !important; }
}
@media (prefers-contrast: more) {
html body #pf-zalety.zl-jasne .zl-lista .zl-poz::before { background: var(--pf-tekst-2); }
}


/* one page 3 (Mateusz 19.09.2026): oferta 1:1 z 3A (#oferta-uslugi, style przeniesione ze strona.css 3A) */
@keyframes komu-pasmo { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
html body #oferta-uslugi .wiersz p { font-size: 15px !important; }
html body #oferta-uslugi .text-brand { background-image: none !important; background-color: transparent !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: #09090B !important; -webkit-text-fill-color: #09090B !important; }
html body #oferta-uslugi > div { padding-top: calc(var(--sekcja) / 2) !important; }
html body #oferta-uslugi { background: #FFFFFF; }
html body #oferta-uslugi .tytul span { display: block; }
html body #oferta-uslugi .lista { margin-top: 3.5rem; border-top: 2px solid #76787C; }
html body #oferta-uslugi .wiersz { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; align-items: center; padding: 1.75rem 1.25rem; border-bottom: 2px solid #76787C; transition: background-color 0.3s ease, color 0.3s ease; }
@media (min-width: 1024px) { html body #oferta-uslugi .wiersz { grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1.1fr); gap: 2.5rem; padding: 2rem 1.75rem; } }
html body #oferta-uslugi .ikona { color: #09090B; transition: color 0.3s ease; }
html body #oferta-uslugi .wiersz h3 { margin: 0; font-size: 1.35rem !important; font-weight: 400 !important; color: #09090B !important; transition: color 0.3s ease; }
html body #oferta-uslugi .wiersz p { margin: 0; font-size: 15px !important; line-height: 1.6 !important; color: #09090B !important; transition: color 0.3s ease; }
@media (min-width: 1024px) { html body #oferta-uslugi .wiersz p { text-align: right; } }
html body #oferta-uslugi .wiersz { position: relative; }
html body #oferta-uslugi .wiersz::before { content: ""; position: absolute; inset: 0; z-index: 0; background: #09090B; transform-origin: center bottom; transform: scaleY(0); transition: transform 0.45s cubic-bezier(0.22, 0.7, 0.25, 1); }
html body #oferta-uslugi .wiersz:hover::before { transform: scaleY(1); }
html body #oferta-uslugi .wiersz > * { position: relative; z-index: 1; }
html body #oferta-uslugi .wiersz:hover .ikona, html body #oferta-uslugi .wiersz:hover h3 { color: #FFFFFF !important; }
html body #oferta-uslugi .wiersz:hover p { color: #FFFFFF !important; }
@media (prefers-reduced-motion: reduce) { html body #oferta-uslugi .wiersz::before { transition: none; } }
html body #oferta-uslugi .wiersz::before { background: #09090B !important; }
html body #oferta-uslugi h2 .text-brand { color: #09090B !important; -webkit-text-fill-color: #09090B !important; background-image: none !important; }
html body #oferta-uslugi { background: #FFFFFF !important; }
html body #oferta-uslugi .wiersz::before { background: #09090B !important; }
html body #oferta-uslugi .wiersz::before { background: #09090B !important; }
html body #oferta-uslugi .lista { border-top: 1px solid #09090B !important; }
html body #oferta-uslugi .wiersz { border-bottom: 1px solid #09090B !important; }
html body #oferta-uslugi > div { padding-bottom: var(--sekcja) !important; }
html body #oferta-uslugi .lista.reveal, html body #oferta-uslugi .lista.reveal-slide-up { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
html body #oferta-uslugi .lista .wiersz { opacity: 0; }
html body #oferta-uslugi .lista.is-visible .wiersz { animation: komu-pasmo 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; }
html body #oferta-uslugi .lista.is-visible .wiersz:nth-of-type(1) { animation-delay: 0.02s; }
html body #oferta-uslugi .lista.is-visible .wiersz:nth-of-type(2) { animation-delay: 0.14s; }
html body #oferta-uslugi .lista.is-visible .wiersz:nth-of-type(3) { animation-delay: 0.26s; }
html body #oferta-uslugi .lista.is-visible .wiersz:nth-of-type(4) { animation-delay: 0.38s; }
@media (prefers-reduced-motion: reduce) { html body #oferta-uslugi .lista .wiersz { opacity: 1 !important; animation: none !important; transform: none !important; } }
html body #oferta-uslugi .wiersz::before { background: #09090B !important; }
html body #oferta-uslugi .kreska-anim::after { background-image: none !important; background-color: #09090B !important; }
html body #oferta-uslugi .kreska-anim::after { background-color: #09090B !important; }
html body #oferta-uslugi .kreska-anim::after { background-image: none !important; background-color: #BF1E28 !important; }
html body #oferta-uslugi .nadtytul { display: grid !important; grid-template-columns: auto; align-items: end !important; gap: 0 !important; width: fit-content; max-width: 100%; }
html body #oferta-uslugi .nadtytul > span { grid-area: 1 / 1; }
html body #oferta-uslugi .nadtytul > span:last-child { display: block; padding-bottom: 0.35rem; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.16em !important; line-height: 1.5 !important; white-space: normal !important; }
html body #oferta-uslugi .nadtytul > span.bg-brand { align-self: end; justify-self: stretch; width: auto !important; height: 2px !important; font-size: 14px; margin-right: 0.16em; }
html body #oferta-uslugi .nadtytul > span.kreska-anim { background: transparent !important; }
html body #oferta-uslugi .nadtytul > .kreska-anim::after { transition: width 0.7s ease-out 0.15s; }
html body #oferta-uslugi .nadtytul > span.bg-brand:not(.kreska-anim) { transform-origin: left center; animation: nadtytul-kreska 0.7s ease-out 0.15s both; }
html body #oferta-uslugi html.preloader-trwa .nadtytul > span.bg-brand:not(.kreska-anim) { animation: none; transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) { html body #oferta-uslugi .nadtytul > .kreska-anim::after { transition: none; } }
@media (prefers-reduced-motion: reduce) { html body #oferta-uslugi .nadtytul > span.bg-brand:not(.kreska-anim) { animation: none; transform: none; } }
@keyframes nadtytul-kreska { from { transform: scaleX(0); } to { transform: scaleX(1); } }
html body #oferta-uslugi h2 span:not(.text-brand) { color: #09090B !important; -webkit-text-fill-color: #09090B !important; }


/* one page 3, opinie (Mateusz 19.09.2026): sekcja opinii z 3A (3 opinie obok siebie, ocena 5,0 po prawej od naglowka),
   bez zdjecia pod spodem - granatowe kafle na granatowym tle. Style przeniesione ze strona.css 3A. */
html body section#pf-opinie-k .op-lista .op-el { background-color: #09090B; }
html body section#pf-opinie-k.op-ruch .op-lista .op-el.op-aktywne { background-color: #09090B; }
html body #pf-opinie-k { --op-linia: #76787C; --op-zolty: #BF1E28; position: relative; isolation: isolate; overflow-x: clip; background: var(--pf-czern); color: #FFFFFF; }
html body #pf-opinie-k::before { content: ""; position: absolute; inset: 0; z-index: -2; background: none center center / cover no-repeat var(--pf-grafit); }
html body #pf-opinie-k::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(9, 9, 11, 0.92); }
html body #pf-opinie-k > .pf-kontener { padding-top: var(--sekcja) !important; padding-bottom: var(--sekcja) !important; }
html body #pf-opinie-k .op-glowa { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
html body #pf-opinie-k .op-naglowek { min-width: 0; }
html body #pf-opinie-k .op-h2 { margin: 1.5rem 0 0 !important; }
html body #pf-opinie-k .op-ocena { justify-self: start; min-width: 0; font-family: 'Inter', system-ui, sans-serif; }
html body #pf-opinie-k .op-ocena-gora { display: flex; align-items: flex-end; flex-wrap: wrap; column-gap: 1.25rem; row-gap: 0.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--op-linia); }
html body #pf-opinie-k .op-wynik { display: flex; align-items: baseline; gap: 0.5rem; font-family: 'Space Grotesk', system-ui, sans-serif; color: #FFFFFF; }
html body #pf-opinie-k .op-liczba { display: block; font-size: 3.5rem; font-weight: 600; line-height: 0.82; letter-spacing: -0.045em; white-space: nowrap; }
html body #pf-opinie-k .op-max { display: block; font-size: 1.25rem; font-weight: 500; line-height: 1; white-space: nowrap; color: #FFFFFF; }
html body #pf-opinie-k .op-gwiazdy { display: flex; gap: 3px; padding-bottom: 2px; }
html body #pf-opinie-k .op-gwiazdy svg, html body #pf-opinie-k .op-gw svg { display: block; flex: 0 0 auto; fill: var(--op-zolty); }
html body #pf-opinie-k .op-gwiazdy svg { width: 20px; height: 20px; }
html body #pf-opinie-k .op-profil { display: inline-flex; align-items: center; gap: 0.625rem; margin-top: 1rem; font-size: 15px; font-weight: 500; line-height: 1.4; color: #FFFFFF; text-decoration: none; }
html body #pf-opinie-k .op-profil .op-g { display: block; flex: 0 0 auto; width: 18px; height: 18px; }
html body #pf-opinie-k .op-profil-tekst { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: #76787C; transition: text-decoration-color 0.3s var(--pf-ease); }
html body #pf-opinie-k .op-strzalka { display: block; flex: 0 0 auto; width: 16px; height: 16px; color: #FFFFFF; transition: color 0.3s var(--pf-ease), transform 0.3s var(--pf-ease); }
@media (hover: hover) and (pointer: fine) {
html body #pf-opinie-k .op-profil:hover .op-profil-tekst { text-decoration-color: var(--pf-akcent); }
}
@media (hover: hover) and (pointer: fine) {
html body #pf-opinie-k .op-profil:hover .op-strzalka { color: #FFFFFF; transform: translate(2px, -2px); }
}
html body #pf-opinie-k .op-profil:focus-visible { outline: 2px solid var(--pf-akcent); outline-offset: 4px; }
html body #pf-opinie-k .op-profil:focus-visible .op-profil-tekst { text-decoration-color: var(--pf-akcent); }
html body #pf-opinie-k .op-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
html body #pf-opinie-k .op-pasek { position: relative; margin-top: 2.5rem; border: 1px solid var(--op-linia); }
html body #pf-opinie-k .op-lista { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
html body #pf-opinie-k .op-lista .op-el { display: flex; min-width: 0; margin: 0; padding: 0; font-size: 16px !important; line-height: 1.6 !important; transition: background-color 0.6s var(--pf-ease); }
html body #pf-opinie-k .op-lista .op-el::before, html body #pf-opinie-k .op-lista .op-el::marker { content: none; }
html body #pf-opinie-k .op-lista .op-el + .op-el { border-top: 1px solid var(--op-linia); }
html body #pf-opinie-k .op-pole { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; margin: 0; padding: 1.5rem 1.375rem 1.375rem; font-family: 'Inter', system-ui, sans-serif; }
html body #pf-opinie-k .op-cudzyslow { display: block; height: 1.125rem; overflow: visible; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 2.75rem; font-weight: 600; line-height: 0.9; color: var(--pf-akcent); -webkit-text-fill-color: var(--pf-akcent); }
html body #pf-opinie-k .op-cytat { margin: 0.875rem 0 1.25rem; padding: 0; border: 0; quotes: none; }
html body #pf-opinie-k .op-cytat p { margin: 0 !important; font-family: 'Inter', system-ui, sans-serif; font-size: 16px !important; font-weight: 400 !important; line-height: 1.7 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; text-wrap: pretty; }
html body #pf-opinie-k .op-stopka { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid #76787C; }
html body #pf-opinie-k .op-kto { display: block; min-width: 0; }
html body #pf-opinie-k .op-imie { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; color: #FFFFFF; }
html body #pf-opinie-k .op-zrodlo { display: block; margin-top: 0.125rem; font-size: 13px; line-height: 1.4; color: #FFFFFF; }
html body #pf-opinie-k .op-gw { display: flex; gap: 2px; flex: 0 0 auto; }
html body #pf-opinie-k .op-gw svg { width: 13px; height: 13px; }
html body #pf-opinie-k .op-wskaznik { position: absolute; left: 0; top: 0; width: 0; height: 2px; background: var(--pf-akcent); opacity: 0; pointer-events: none; transform-origin: left center; will-change: transform; }
@media (min-width: 640px) {
html body #pf-opinie-k .op-pasek { margin-top: 3rem; }
}
@media (min-width: 640px) {
html body #pf-opinie-k .op-pole { display: grid; grid-template-columns: minmax(0, 1fr) 11.5rem; grid-template-rows: auto 1fr; column-gap: 2.5rem; padding: 1.75rem 2rem 1.875rem; }
}
@media (min-width: 640px) {
html body #pf-opinie-k .op-cudzyslow { grid-column: 1; grid-row: 1; }
}
@media (min-width: 640px) {
html body #pf-opinie-k .op-cytat { grid-column: 1; grid-row: 2; margin: 0.875rem 0 0; }
}
@media (min-width: 640px) {
html body #pf-opinie-k .op-stopka { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0.625rem; margin-top: 0; padding: 0.125rem 0 0 1.5rem; border-top: 0; border-left: 1px solid #76787C; }
}
@media (min-width: 1024px) {
html body #pf-opinie-k .op-glowa { grid-template-columns: minmax(0, 1fr) auto; column-gap: 3rem; align-items: end; }
}
@media (min-width: 1024px) {
html body #pf-opinie-k .op-h2 { white-space: nowrap; }
}
@media (min-width: 1024px) {
html body #pf-opinie-k .op-ocena { justify-self: end; }
}
@media (min-width: 1024px) {
html body #pf-opinie-k .op-liczba { font-size: 4rem; }
}
@media (min-width: 1024px) {
html body #pf-opinie-k .op-pasek { margin-top: 4rem; }
}
@media (min-width: 1024px) {
html body #pf-opinie-k .op-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
html body #pf-opinie-k .op-lista .op-el + .op-el { border-top: 0; border-left: 1px solid var(--op-linia); }
}
@media (min-width: 1024px) {
html body #pf-opinie-k .op-pole { display: flex; flex-direction: column; padding: 1.875rem 1.75rem 1.625rem; }
}
@media (min-width: 1024px) {
html body #pf-opinie-k .op-cytat { margin: 0.875rem 0 1.5rem; }
}
@media (min-width: 1024px) {
html body #pf-opinie-k .op-cytat p { font-size: 15px !important; line-height: 1.65 !important; }
}
@media (min-width: 1024px) {
html body #pf-opinie-k .op-stopka { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding: 1rem 0 0; border-left: 0; border-top: 1px solid #76787C; }
}
@media (min-width: 1280px) {
html body #pf-opinie-k .op-pole { padding: 2rem 2.25rem 1.75rem; }
}
@media (min-width: 1280px) {
html body #pf-opinie-k .op-cytat p { font-size: 16px !important; line-height: 1.7 !important; }
}
html body #pf-opinie-k.op-ruch .op-lista .op-el.op-aktywne { background-color: rgba(255, 255, 255, 0.06); }
html body #pf-opinie-k.op-ruch .op-wskaznik.op-jest { opacity: 1; transition: opacity 0.5s var(--pf-ease); }
html body #pf-opinie-k.op-ruch .op-wskaznik.op-jedzie { transition: opacity 0.5s var(--pf-ease), transform 0.85s var(--pf-ease-out), width 0.85s var(--pf-ease-out), height 0.85s var(--pf-ease-out); }
html body #pf-opinie-k.op-ruch .op-lista .op-el > .op-pole { opacity: 0; transform: translateY(18px); }
html body #pf-opinie-k.op-ruch .op-pasek.pf-widoczne .op-el > .op-pole { opacity: 1; transform: none; transition: opacity 0.7s var(--pf-ease), transform 0.8s var(--pf-ease-out); transition-delay: calc(var(--op-i, 0) * 140ms); }
html body #pf-opinie-k.op-awaryjnie .op-lista .op-el > .op-pole { opacity: 1; transform: none; }
html body #pf-opinie-k:not(.op-ruch) .pf-nadtytul::after, html body #pf-opinie-k.op-awaryjnie .pf-nadtytul::after { transform: scaleX(1); }
@media (prefers-contrast: more) {
html body #pf-opinie-k .op-zrodlo, html body #pf-opinie-k .op-max { color: #FFFFFF; }
}
@media (prefers-reduced-motion: reduce) {
html body #pf-opinie-k .op-lista .op-el > .op-pole, html body #pf-opinie-k.op-ruch .op-lista .op-el > .op-pole, html body #pf-opinie-k.op-ruch .op-pasek.pf-widoczne .op-el > .op-pole { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media (prefers-reduced-motion: reduce) {
html body #pf-opinie-k .op-wskaznik { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
html body #pf-opinie-k .op-lista .op-el, html body #pf-opinie-k .op-profil-tekst, html body #pf-opinie-k .op-strzalka { transition: none !important; }
}
@media (prefers-reduced-motion: reduce) {
html body #pf-opinie-k .op-profil:hover .op-strzalka { transform: none; }
}
@media (min-width: 1024px) {
html body #pf-opinie-k .op-lista .op-el:nth-child(3n+1) { border-left: 0; }
}
@media (min-width: 1024px) {
html body #pf-opinie-k .op-lista .op-el:nth-child(n+4) { border-top: 1px solid var(--op-linia); }
}
html body #pf-opinie-k .op-wskaznik { display: none !important; }
html body #pf-opinie-k .op-lista .op-el { position: relative; }
html body #pf-opinie-k .op-lista .op-el::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--pf-akcent); opacity: 0; transition: opacity 0.5s var(--pf-ease); pointer-events: none; }
html body #pf-opinie-k.op-ruch .op-lista .op-el.op-aktywne::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
html body #pf-opinie-k .op-lista .op-el::after { transition: none; }
}
html body #pf-opinie-k .op-wiecej { margin-top: 2.25rem; }
html body #pf-opinie-k .op-wiecej-link { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 15px; font-weight: 500; color: #FFFFFF; text-decoration: underline; text-decoration-color: #76787C; text-underline-offset: 5px; transition: text-decoration-color 0.25s ease; }
html body #pf-opinie-k .op-wiecej-link svg { color: var(--pf-akcent); transition: transform 0.3s var(--pf-ease); }
html body #pf-opinie-k .op-wiecej-link:hover { text-decoration-color: var(--pf-akcent); }
html body #pf-opinie-k .op-wiecej-link:hover svg { transform: translateX(4px); }
html body #pf-opinie-k .op-profil { display: flex; width: fit-content; }
html body section#pf-opinie-k { background: #09090B !important; }
html body section#pf-opinie-k::before, html body section#pf-opinie-k::after { display: none !important; content: none !important; }
html body section#pf-opinie-k > .pf-kontener { padding-top: var(--sekcja) !important; padding-bottom: var(--sekcja) !important; }

/* zaznaczona opinia (Mateusz 19.09.2026): wszystkie kafle w jednym kolorze (bez jasniejszego tla zaznaczonej),
   zaznaczona podnosi sie z cieniem, a czerwona kreska na dole rysuje sie od lewej do prawej */
html body #pf-opinie-k .op-lista .op-el { transition: background-color 0.6s var(--pf-ease), transform 0.45s var(--pf-ease), box-shadow 0.45s var(--pf-ease); }
html body section#pf-opinie-k.op-ruch .op-lista .op-el.op-aktywne { background-color: #09090B !important; transform: translateY(-10px); box-shadow: 0 34px 60px -30px rgba(9, 9, 11, 0.65); z-index: 2; }
html body #pf-opinie-k .op-lista .op-el::after { opacity: 1 !important; transform: scaleX(0); transform-origin: left center; transition: transform 0.7s var(--pf-ease-out, cubic-bezier(0.16, 0.84, 0.28, 1)); }
html body #pf-opinie-k.op-ruch .op-lista .op-el.op-aktywne::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { html body #pf-opinie-k .op-lista .op-el, html body #pf-opinie-k .op-lista .op-el::after { transition: none; } }
/* poprawka (Mateusz 19.09.2026): czerwona kreska na GORZE kafla; obramowanie ma kazdy kafel osobno (nie cala lista),
   wiec po podniesieniu kafla nie zostaje w miejscu zadna linia; sasiednie ramki nachodza na siebie o 1 px */
html body #pf-opinie-k .op-pasek { border: 0 !important; }
html body #pf-opinie-k .op-lista .op-el, html body #pf-opinie-k .op-lista .op-el + .op-el, html body #pf-opinie-k .op-lista .op-el:nth-child(3n+1), html body #pf-opinie-k .op-lista .op-el:nth-child(n+4) { border: 1px solid var(--op-linia) !important; }
html body #pf-opinie-k .op-lista .op-el + .op-el { margin-top: -1px; }
@media (min-width: 1024px) { html body #pf-opinie-k .op-lista .op-el + .op-el { margin-top: 0; margin-left: -1px; } }
html body #pf-opinie-k .op-lista .op-el::after { top: -1px !important; bottom: auto !important; left: -1px !important; right: -1px !important; }



/* odstepy strony 5: zmiana tla = pelny odstep (--sekcja), to samo tlo = pol + pol */
html body section#oferta-uslugi > div { padding-top: var(--sekcja) !important; padding-bottom: calc(var(--sekcja) / 2) !important; }
html body section#pf-wstep > div { padding-top: calc(var(--sekcja) / 2) !important; padding-bottom: var(--sekcja) !important; }
html body section#op-proces > div { padding-top: var(--sekcja) !important; padding-bottom: calc(var(--sekcja) / 2) !important; }
html body section#pf-zalety > div { padding-top: calc(var(--sekcja) / 2) !important; padding-bottom: var(--sekcja) !important; }
html body section#pf-jak > div { padding-top: var(--sekcja) !important; padding-bottom: var(--sekcja) !important; }
html body section#pf-opinie-k > .pf-kontener { padding-top: var(--sekcja) !important; padding-bottom: var(--sekcja) !important; }


/* strona 5: bez zdjec pod tlem i bez gradientu - samo granatowe tlo (hero i CTA) */
html body section#op-hero::before, html body section#op-hero::after, html body section#pf-cta::before, html body section#pf-cta::after { display: none !important; background: none !important; }
html body section#op-hero, html body section#pf-cta { background: #09090B !important; background-image: none !important; }
/* naglowek hero taki jak naglowki sekcji (Mateusz 19.09.2026): Space Grotesk 600, 41,6 px na telefonie, 60 px od 640 px, interlinia 0,98, litery -0,03em */
html body section#op-hero h1.hero-tytul { font-family: 'Space Grotesk', system-ui, sans-serif !important; font-weight: 600 !important; font-size: 2.6rem !important; line-height: 0.98 !important; letter-spacing: -0.03em !important; }
@media (min-width: 640px) { html body section#op-hero h1.hero-tytul { font-size: 3.75rem !important; } }


/* strona 6 (Mateusz 19.09.2026): elementy z naszej strony szablon - pani w hero, panie w kolkach w O nas, galeria biura */
/* hero: zdjecie po prawej, przy dolnej krawedzi; tresc hero ma swoja szerokosc, zeby nie wchodzila na zdjecie */
html body section#op-hero { position: relative; overflow: hidden; }
html body section#op-hero .u-hero-osoba { position: absolute; right: calc(max(1.5rem, (100vw - 72rem) / 2) - 8px); bottom: 0; z-index: 1; display: none; pointer-events: none; }
/* cala sylwetka, prawa krawedz i dol bez zmian, o 5% wieksza (Mateusz 19.09.2026) */
html body section#op-hero .u-hero-osoba { bottom: 0; }
html body section#op-hero .u-hero-osoba img { display: block; height: min(calc((100svh - 138px) * 1.08), 43.2rem); width: auto; max-width: none; object-fit: contain; }
html body section#op-hero .hero-tresc { position: relative; z-index: 2; }
@media (min-width: 1024px) {
  html body section#op-hero .u-hero-osoba { display: block !important; }
  /* kontener hero zostaje pelnej szerokosci (tekst przy lewym marginesie); waskie sa tylko naglowek i tekst pod nim */
  html body section#op-hero h1.hero-tytul { max-width: 40rem; }
  html body section#op-hero .hero-lead { max-width: 34rem; }
}
/* nadtytul hero: wersaliki i zlota kreska pod napisem */
html body section#op-hero .u-nadtytul { display: inline-block; margin-bottom: 0.25rem; padding-bottom: 0.6rem; border-bottom: 2px solid #BF1E28; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0.24em; text-transform: uppercase; color: #FFFFFF; }
/* dolny pasek hero (ocena i telefon) - linia nad nim jak w one page 2 */
html body section#op-hero .hero-pasek { margin-top: 3rem; max-width: 24rem; padding-top: 1.25rem; border-top: 1px solid #76787C; }
/* hero i CTA: zdjecie pod plaskim granatem, bez gradientow */
html body section#op-hero { background: url(assets/119479f804e50776b777.webp) center center / cover no-repeat #09090B !important; }
html body section#op-hero::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none;
  /* przyciemnienie zdjecia + ciemniejszy granat od lewej (Mateusz 19.09.2026) */
  background: linear-gradient(90deg, rgba(9, 9, 11, 0.53) 0%, rgba(9, 9, 11, 0.26) 38%, rgba(9, 9, 11, 0) 62%), rgba(9, 9, 11, 0.7) !important; }
html body section#pf-cta { background: url(assets/sigma-cta.webp?v=6) 78% 15% / cover no-repeat #09090B !important; }
html body section#pf-cta::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; background: rgba(9, 9, 11, 0.95) !important; pointer-events: none; }
html body section#pf-cta > .pf-kontener { position: relative; z-index: 1; }
/* O nas: zdjecie pani w bialej koszuli zamiast zdjecia z dokumentami */
/* granat pod kaflami i zakladka 1 px - miedzy kwadratem a prostokatem prosweiecala biala strona (Mateusz 19.09.2026) */

/* O nas: zdjecie pani w bialej koszuli, granat pod kaflami i zakladka 1 px (Mateusz 19.09.2026) */
html body #obiuro-foto .blok-foto { background: #09090B !important; }
html body #obiuro-foto .foto {
  position: relative; overflow: hidden;
  background-color: #09090B !important;
  /* dokladnie to samo tlo co ma Dagmara w hero: zdjecie biura pod granatowym przyciemnieniem (Mateusz 21.09.2026) */
  background-image:
    linear-gradient(90deg, rgba(18, 20, 24, 0.44) 0%, rgba(18, 20, 24, 0.20) 38%, rgba(18, 20, 24, 0) 62%),
    linear-gradient(rgba(33, 35, 39, 0.56), rgba(33, 35, 39, 0.56)),
    url(assets/119479f804e50776b777.webp) !important;
  background-size: cover, cover, cover !important;
  background-position: center center, center center, center center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  margin-right: -1px;
}
/* przyciemnienie przy podlodze - warstwa NAD Aleksandra, zeby stala przy scianie, a nie byla wklejona */
html body #obiuro-foto .foto::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgba(9, 9, 11, 0) 56%, rgba(9, 9, 11, 0.44) 100%);
}
/* samo zdjecie w warstwie nad kaflem - filtr schodzacy z pomaranczu dziala tylko na nie, granat zostaje czysty */
html body #obiuro-foto .foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  z-index: 1;
  background: url(assets/sigma-certyfikat.webp) 47% 50% / cover no-repeat;   /* staly rozmiar - przyrost kafla idzie na tlo nad glowa */
  /* cien rzucany przez postac, w te sama strone co w hero */
  filter: saturate(0.8) hue-rotate(-7deg) drop-shadow(16px 12px 26px rgba(4, 9, 20, 0.5));
}
/* prawa polowa O nas dokladnie w kolorze wypelnienia kafli z opinii, lewa w kolorze tla tamtej sekcji */
html body #obiuro-foto .panel { background: #09090B !important; }
/* naglowek "Krok po kroku" jak w reszcie strony: bez zlotej kreski przy nadtytule i bez drugiego koloru w tytule */
html body section#op-proces .op-nadtytul::before { display: none !important; content: none !important; }
html body section#op-proces .op-nadtytul { color: #FFFFFF !important; }
html body section#op-proces h2 .l2, html body section#op-proces h2 .op-kropka { color: #FFFFFF !important; }
/* JEDEN KOLOR NAGLOWKOW NA CALEJ STRONIE (Mateusz 20.09.2026): na bialym #09090B, na granacie bialy.
   Zadnych drugich odcieni w jednym tytule i zadnych granatowych naglowkow obok czarnych. */
html body #galeria .nadtytul .kreska-anim, html body #oferta-uslugi .nadtytul .kreska-anim { display: none !important; }
html body #galeria .nadtytul > span:last-child, html body #oferta-uslugi .nadtytul > span:last-child {
  font-size: 14px !important; font-weight: 600 !important; letter-spacing: 2.24px !important;
  color: #09090B !important; padding-bottom: 5.6px; border-bottom: 2px solid #BF1E28;
}
html body #galeria h2, html body #galeria h2 span,
html body #oferta-uslugi h2, html body #oferta-uslugi h2 span { color: #09090B !important; }
/* w ofercie pierwszy wiersz mial wlasna regule z granatem - bije ja mocniejszym selektorem */
html body #oferta-uslugi h2 span.text-brand, html body #galeria h2 span.text-brand { color: #09090B !important; }
/* sekcja 2: oryginalny granatowy blok (dwie kolumny + wizytowka), po lewej zdjecie wnetrza biura */
#obiuro-biuro { background: #FFFFFF !important; }
#obiuro-biuro > .opakowanie {
    padding-top: calc(var(--sekcja) / 2) !important;
    padding-bottom: calc(var(--sekcja) / 2) !important;
  }
#obiuro-biuro .blok-foto {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
#obiuro-biuro .foto {
    background-image: url(assets/f7833b74eaf403400f6d.webp);
    background-size: cover;
    background-position: 50% 42%;
    background-repeat: no-repeat;
    min-height: 20rem;
  }
#obiuro-biuro .panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.15rem;
    background: #09090B;
    color: #FFFFFF;
    padding: 2.5rem 1.5rem;
  }
#obiuro-biuro .panel h3 { margin: 0; color: #FFFFFF !important; letter-spacing: -0.01em; }
#obiuro-biuro .panel p { margin: 0; color: #FFFFFF !important; max-width: 36rem; }
#obiuro-biuro .przycisk { margin-top: 0.85rem; }
#obiuro-biuro .obrys {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 1.75rem;
    border: 1px solid #76787C;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 500;
    transition: background-color 0.25s, border-color 0.25s, color 0.25s;
  }
#obiuro-biuro .obrys:hover, #obiuro-biuro .obrys:focus-visible {
    background-color: #FFFFFF !important;
    border-color: #76787C !important;
    color: #09090B !important;
  }
@media (min-width: 768px) {
#obiuro-biuro .panel { padding: 3rem 2.5rem; }
}
@media (min-width: 1024px) {
#obiuro-biuro .blok-foto { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
#obiuro-biuro .foto { min-height: 32rem; }
#obiuro-biuro .panel { padding: 3.5rem 4rem; }
}
#obiuro-biuro .obrys {
    border: 0 !important;
    background-color: #BF1E28 !important;
    color: #FFFFFF !important;
  }
#obiuro-biuro .obrys:hover, #obiuro-biuro .obrys:focus-visible {
    background-color: #BF1E28 !important;
    border: 0 !important;
    color: #FFFFFF !important;
  }
#obiuro-biuro.reveal {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}
#obiuro-biuro .foto {
  clip-path: inset(0 100% 0 0);
  transform: scale(1.06);
}
#obiuro-biuro .panel { clip-path: inset(0 0 0 100%); }
#obiuro-biuro.is-visible .foto {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
  transition: clip-path 0.85s cubic-bezier(0.16, 0.84, 0.28, 1), transform 1.5s cubic-bezier(0.16, 0.84, 0.28, 1);
}
#obiuro-biuro.is-visible .panel {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.85s cubic-bezier(0.16, 0.84, 0.28, 1) 0.06s;
}
@media (prefers-reduced-motion: reduce) {
#obiuro-biuro .foto, #obiuro-biuro .panel { clip-path: none !important; transform: none !important; }
}
#obiuro-biuro { background: #FFFFFF !important; }
#obiuro-biuro > .opakowanie {
    padding-top: calc(var(--sekcja) / 2) !important;
    padding-bottom: calc(var(--sekcja) / 2) !important;
  }
#obiuro-biuro .blok-foto {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
#obiuro-biuro .foto {
    background-image: url(assets/f7833b74eaf403400f6d.webp);
    background-size: cover;
    background-position: 50% 42%;
    background-repeat: no-repeat;
    min-height: 20rem;
  }
#obiuro-biuro .panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.15rem;
    background: #09090B;
    color: #FFFFFF;
    padding: 2.5rem 1.5rem;
  }
#obiuro-biuro .panel h3 { margin: 0; color: #FFFFFF !important; letter-spacing: -0.01em; }
#obiuro-biuro .panel p { margin: 0; color: #FFFFFF !important; max-width: 36rem; }
#obiuro-biuro .przycisk { margin-top: 0.85rem; }
#obiuro-biuro .obrys {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 1.75rem;
    border: 1px solid #76787C;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 500;
    transition: background-color 0.25s, border-color 0.25s, color 0.25s;
  }
#obiuro-biuro .obrys:hover, #obiuro-biuro .obrys:focus-visible {
    background-color: #FFFFFF !important;
    border-color: #76787C !important;
    color: #09090B !important;
  }
@media (min-width: 768px) {
#obiuro-biuro .panel { padding: 3rem 2.5rem; }
}
@media (min-width: 1024px) {
#obiuro-biuro .blok-foto { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
#obiuro-biuro .foto { min-height: 32rem; }
#obiuro-biuro .panel { padding: 3.5rem 4rem; }
}
#obiuro-biuro .panel { gap: 0; }
#obiuro-biuro .panel-tresc { display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 40rem; }
#obiuro-biuro .panel-nadtytul { position: relative; display: inline-block; padding-bottom: 0.5rem; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.24em; text-transform: uppercase; color: #FFFFFF; }
#obiuro-biuro .panel-nadtytul::after { content: ""; position: absolute; left: 0; right: 0.24em; bottom: 0; height: 2px; background: #BF1E28; transform: scaleX(0); transform-origin: left center; transition: transform 0.7s ease-out 0.75s; }
#obiuro-biuro.is-visible .panel-nadtytul::after { transform: scaleX(1); }
#obiuro-biuro .panel h3.panel-tytul { margin: 1.25rem 0 0 !important; font-size: clamp(2.1rem, 3.4vw, 3.1rem) !important; font-weight: 600 !important; line-height: 1.02 !important; letter-spacing: -0.03em !important; color: #FFFFFF !important; }
#obiuro-biuro .panel h3.panel-tytul span { display: block; }
#obiuro-biuro .panel p.panel-lead { margin: 1.5rem 0 0 !important; max-width: 34rem; font-size: 18px !important; line-height: 1.6 !important; color: #FFFFFF !important; }
#obiuro-biuro .panel-kolumny { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; width: 100%; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #76787C; }
#obiuro-biuro .panel .panel-kolumny p { position: relative; margin: 0 !important; padding-top: 1.125rem; max-width: none; font-size: 15px !important; line-height: 1.65 !important; color: #FFFFFF !important; }
#obiuro-biuro .panel .panel-kolumny p::before { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 2px; background: #BF1E28; }
#obiuro-biuro .panel-dol { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; width: 100%; margin-top: 2.25rem; }
#obiuro-biuro .panel-dol .przycisk { margin-top: 0; }
#obiuro-biuro .panel-podpis { display: flex; align-items: center; gap: 0.875rem; }
#obiuro-biuro .panel-podpis img { display: block; flex: none; width: 44px; height: 44px; border-radius: 50%; }
#obiuro-biuro .panel-podpis strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; color: #FFFFFF; }
#obiuro-biuro .panel-podpis span span { display: block; font-size: 13px; line-height: 1.45; color: #FFFFFF; }
@media (min-width: 640px) {
#obiuro-biuro .panel-kolumny { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
}
@media (min-width: 1024px) {
#obiuro-biuro .panel { padding: 4.5rem 4.5rem; }
}
@media (prefers-reduced-motion: reduce) {
#obiuro-biuro .panel-nadtytul::after { transition: none; transform: scaleX(1); }
}
#obiuro-biuro .obrys {
    border: 0 !important;
    background-color: #BF1E28 !important;
    color: #FFFFFF !important;
  }
#obiuro-biuro .obrys:hover, #obiuro-biuro .obrys:focus-visible {
    background-color: #BF1E28 !important;
    border: 0 !important;
    color: #FFFFFF !important;
  }
#obiuro-biuro.reveal {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}
#obiuro-biuro .foto {
  clip-path: inset(0 100% 0 0);
  transform: scale(1.06);
}
#obiuro-biuro .panel { clip-path: inset(0 0 0 100%); }
#obiuro-biuro.is-visible .foto {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
  transition: clip-path 0.85s cubic-bezier(0.16, 0.84, 0.28, 1), transform 1.5s cubic-bezier(0.16, 0.84, 0.28, 1);
}
#obiuro-biuro.is-visible .panel {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.85s cubic-bezier(0.16, 0.84, 0.28, 1) 0.06s;
}
@media (prefers-reduced-motion: reduce) {
#obiuro-biuro .foto, #obiuro-biuro .panel { clip-path: none !important; transform: none !important; }
}
#obiuro-biuro .panel { background: #09090B !important; }
#obiuro-biuro .obrys {
    background-color: #BF1E28 !important;
    border: 0 !important;
    color: #FFFFFF !important;
  }
#obiuro-biuro .obrys:hover, #obiuro-biuro .obrys:focus-visible {
    background-color: #BF1E28 !important;
    border: 0 !important;
    color: #FFFFFF !important;
  }
html body #obiuro-biuro .blok-foto { background: #09090B !important; }
html body #obiuro-biuro .foto {
  background-image: url(assets/sigma-biuro.webp) !important;
  background-size: cover !important;
  background-position: 50% 46% !important;
  background-repeat: no-repeat !important;
  margin-right: -1px;
}
html body #obiuro-biuro .foto::before, html body #obiuro-biuro .foto::after { content: none !important; display: none !important; }
html body #obiuro-biuro .panel { background: #09090B !important; }
/* styk zdjecia z panelem ma wypadac w tym samym miejscu co w szarej sekcji z Aleksandra (Mateusz 21.09.2026):
   tam kafel konczy sie na 45% bloku wsunietego w marginesy, wiec to samo liczymy tu dla pelnej szerokosci */
@media (min-width: 1024px) {
  html body #obiuro-biuro .blok-foto {
    grid-template-columns: calc((100vw - min(100vw, 72rem)) / 2 + 1.5rem + 0.45 * (min(100vw, 72rem) - 3rem)) minmax(0, 1fr) !important;
  }
}
/* sekcja 3: dwie szarosci zamiast granatu, blok nizszy o 2 cm (~76 px), wiec i Aleksandra mniejsza (Mateusz 21.09.2026) */
html body #obiuro-foto > .opakowanie { max-width: 72rem; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
/* kontener bez tla - inaczej caly szary prostokat pojawia sie przed animacja, a dopiero potem wjezdzaja polowki.
   Szczeline miedzy kaflami kasuje ujemny margines zdjecia, nie tlo pod spodem (Mateusz 21.09.2026) */
html body #obiuro-foto .blok-foto { background: transparent !important; }
/* tlo za Aleksandra: wylacznie odcienie z tej samej linii co #E4E4E7 (R=G, B wyzsze o 3-4), tylko ciemniejsze.
   Nierownosc robi jeden pionowy gradient miedzy nimi - zadnej bieli ani innego szarego (Mateusz 21.09.2026) */
/* przyciemnienie przy podlodze - warstwa NAD postacia, zeby stala przy scianie */
html body #obiuro-foto .foto::before {
  content: "" !important; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgba(9, 9, 11, 0) 58%, rgba(9, 9, 11, 0.38) 100%);
}
  /* mocniejszy cien: jeden krotki przy samej sylwetce (kontakt ze sciana) i drugi szeroki, rozmyty (Mateusz 21.09.2026) */
html body #obiuro-foto .foto::after { filter: saturate(0.8) hue-rotate(-7deg)
  drop-shadow(6px 6px 12px rgba(4, 9, 20, 0.40))
  drop-shadow(20px 16px 34px rgba(4, 9, 20, 0.58)); }
html body #obiuro-foto .panel { background: #FFFFFF !important; }   /* ten sam szary co zamkniete pytanie w FAQ */
/* tresc panelu byla bialym tekstem na granacie - na jasnej szarosci musi byc ciemna */
/* tekst w tej sekcji w granatowej rodzinie, tak jak pytania w FAQ (#212327) i ich numery (#717376) - Mateusz 21.09.2026 */
/* Mateusz 21.09.2026: jednak czarne napisy w tej sekcji */
html body #obiuro-foto .panel, html body #obiuro-foto .panel .panel-tresc, html body #obiuro-foto .panel h3,
html body #obiuro-foto .panel strong, html body #obiuro-foto .panel h3 span,
html body #obiuro-foto .panel .panel-lead { color: #09090B !important; }
html body #obiuro-foto .panel .panel-nadtytul { color: #09090B !important; }
html body #obiuro-foto .panel .osoba > span > span { color: #09090B !important; }
/* podpis pod blokiem: zlota kreska na calej szerokosci i jedno zdanie ciagiem */
html body #obiuro-foto .u-podpis { margin-top: 2.25rem; }
html body #obiuro-foto .u-podpis::before { content: ""; display: block; width: 36px; height: 2px; background: #BF1E28; margin-bottom: 0.95rem; }
/* podpis pod blokiem na bialym tle - tu wraca czern strony (Mateusz 21.09.2026) */
html body #obiuro-foto .u-podpis p { margin: 0 !important; color: #09090B !important; font-size: 13px !important; line-height: 1.45 !important;   /* jak maly tekst w tej sekcji (stanowiska) */ max-width: none !important; }
/* ostatni czarny element w sekcji - kreska nad zespolem - tez idzie w granat (Mateusz 21.09.2026) */
html body #obiuro-foto .panel .panel-zespol { border-top-color: #09090B !important; }
/* po zamianie kolejnosci: nad szarym blokiem jest biale "Co wyroznia" (polowa odstepu), pod nim ciemna sekcja (pelny) */
html body #pf-wstep > .pf-kontener { padding-bottom: calc(var(--sekcja) / 2) !important; }
html body #obiuro-foto > .opakowanie { padding-bottom: var(--sekcja) !important; }
/* lead ma sie rozlozyc szeroko - stare ograniczenie 36rem z pierwowzoru zdjete */
@media (min-width: 1024px) { html body #obiuro-foto .panel .panel-lead { max-width: none !important; } }
/* po zamianie: "Co wyroznia" jest biale nad szarym blokiem (polowa odstepu), a pod blokiem jest ciemna sekcja (pelny) */
html body #pf-wstep > .pf-kontener { padding-bottom: calc(var(--sekcja) / 2) !important; }
html body #obiuro-foto > .opakowanie { padding-bottom: var(--sekcja) !important; }
/* lead ma sie rozlozyc na 3 wiersze - kafel jest teraz szerszy, wiec zdejmujemy stare ograniczenie 36rem */
@media (min-width: 1024px) { html body #obiuro-foto .panel .panel-lead { max-width: none !important; } }
/* sekcja zamknieta w marginesach po obu stronach (Mateusz 21.09.2026 - wrocilismy do symetrii) */
@media (min-width: 1024px) {
  html body #obiuro-foto .blok-foto { grid-template-columns: calc(0.45 * (min(100vw, 72rem) - 3rem)) minmax(0, 1fr) !important; }
}
/* asymetria wraca (Mateusz 21.09.2026): lewy margines zostaje, prawy znika - kafel idzie do krawedzi ekranu.
   Zdjecie ma zostac tej samej szerokosci, wiec kolumna liczona jest ze starego, wsunietego ukladu. */
@media (min-width: 1024px) {
  html body #obiuro-foto > .opakowanie {
    max-width: none !important; margin-right: 0 !important; padding-right: 0 !important;
    margin-left: calc((100vw - min(100vw, 72rem)) / 2) !important; padding-left: 1.5rem !important;
  }
}
/* mocniejsze selektory - tytul panelu mial wlasna regule z bialym kolorem */
html body section#obiuro-foto .panel h3.panel-tytul, html body section#obiuro-foto .panel .osoba > span > strong,
html body section#obiuro-foto .panel p.panel-lead { color: #09090B !important; }
/* nadtytul tej sekcji byl 11 px, reszta strony ma 14 px - wyrownane (Mateusz 21.09.2026) */
html body section#obiuro-foto .panel span.panel-nadtytul { color: #09090B !important; font-size: 14px !important; letter-spacing: 2.24px !important; }
/* kreska pod "O NAS" szla tylko na szerokosc napisu (47 px) - dociagnieta do 60 px, jak przy "ZALETY" */
/* kreska pod "O NAS" na naturalna dlugosc napisu, jak w pozostalych sekcjach */
/* zbite odstepy w panelu, zeby blok byl nizszy o ~2 cm, a razem z nim Aleksandra */
@media (min-width: 1024px) {
  /* 3 mm (11 px) mniej u dolu: Aleksandra zachowuje wielkosc i gorna krawedz, ucina sie tylko dol */
  /* zdjecie siedzi teraz w warstwie ::after, wiec kafel nie potrzebuje juz wlasnego kadrowania tla */
  html body #obiuro-foto .foto { min-height: 0 !important; }
  /* tresc zaczyna sie w tej samej pionowej linii co w sekcji 2 (tam panel ma 4.5rem od lewej) */
  /* wysokosc bloku zostaje jak przy czterowierszowym leadzie - odzyskany wiersz idzie na oddech w panelu */
  /* +2 cm wysokosci sekcji (Mateusz 21.09.2026): same paddingi w pionie, szerokosci bez zmian */
  /* powietrze rozlozone po calym panelu, a nie tylko nad i pod trescia (Mateusz 21.09.2026) */
  html body #obiuro-foto .panel { padding: 3.95rem 2.25rem 3.95rem 4.5rem; gap: 1.75rem; }
  html body #obiuro-foto .panel h3.panel-tytul { margin-top: 0.6rem !important; }
  html body #obiuro-foto .panel .panel-zespol { row-gap: 1rem; padding-top: 2.3rem; margin-top: 1.6rem;
    /* kolejnosc kolumnami: po lewej Dagmara i Aleksandra, po prawej Irena i Judyta (Mateusz 21.09.2026) */
    grid-auto-flow: column !important; grid-template-rows: auto auto !important;
    /* kolumny szerokie na tyle, ile trzeba - prawa ma stac blisko lewej, bez wielkiej pauzy */
    grid-template-columns: minmax(0, max-content) minmax(0, max-content) !important; column-gap: 3rem !important; }
  html body #obiuro-foto .panel .panel-zespol .osoba-foto, html body #obiuro-foto .panel .panel-zespol .osoba-foto img,
  html body #obiuro-foto .panel .panel-zespol .osoba-inicjaly { width: 46px !important; height: 46px !important; }
}
/* oferta: podswietlenie lapie na calej szerokosci ekranu, nie tylko na kafelku z usluga (Mateusz 21.09.2026) */
html body #oferta-uslugi .wiersz { position: relative; }
html body #oferta-uslugi .wiersz::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 0;
  left: calc((100vw - 100%) / -2); width: 100vw; background: transparent;
}
html body #oferta-uslugi .wiersz > * { position: relative; z-index: 1; }
/* zdjecie biura nie skaluje sie przy wjezdzie - samo wycieranie, wysokosc od poczatku ta sama */
html body #obiuro-biuro .foto { transform: none !important; transition: clip-path 0.85s cubic-bezier(0.16, 0.84, 0.28, 1) !important; }
/* wizytowka w sekcji 2: znak w szarym kolku, dopasowany */
html body #obiuro-biuro .panel-podpis img {
  width: 54px !important; height: 54px !important; padding: 9px; box-sizing: border-box;
  background: #FFFFFF; border-radius: 999px; object-fit: contain !important;
}
/* kolko przy "Biuro Rachunkowe szablon": granatowe kolko, bialy znak, wysrodkowany */

html body #pf-wstep .wst-kolo { background: #FFFFFF !important; overflow: hidden; display: grid; place-items: center; }
html body #pf-wstep .wst-sygnet {
  width: 58% !important; height: 58% !important; padding: 0 !important;
  object-fit: contain !important; display: block;
}
/* stopka: Dagmara bez wbudowanej ramki */
html body footer .stopka-awatar { background: #FFFFFF !important; }
html body footer .stopka-awatar img { object-fit: cover !important; object-position: 50% 50% !important; transform: translateY(8px); }
/* rolka w przyciskach hero - wlasne reguly, zeby nie ruszyc ich kolorow (Mateusz 21.09.2026) */
html body .op-przycisk .cta-roll__text { position: relative; display: inline-block; overflow: hidden; height: 1.45em; line-height: 1.45em; vertical-align: middle; }
html body .op-przycisk .cta-roll__orig, html body .op-przycisk .cta-roll__clone { display: block !important; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
html body .op-przycisk .cta-roll__clone { position: absolute; left: 0; top: 0; transform: translateY(100%); }
html body .op-przycisk:hover .cta-roll__orig, html body .op-przycisk:focus-visible .cta-roll__orig { transform: translateY(-100%); }
html body .op-przycisk:hover .cta-roll__clone, html body .op-przycisk:focus-visible .cta-roll__clone { transform: translateY(0); }
/* 1. przyciski: rolka tekstu jak w machala 1 (oryginal ma to wylaczone w podgladzie) */
html body .cta-roll__text { position: relative; display: block; overflow: hidden; height: 1.45em; line-height: 1.45em; }
html body .cta-roll__orig, html body .cta-roll__clone { display: block !important; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) !important; }
html body .cta-roll__clone { position: absolute; left: 0; top: 0; transform: translateY(100%); }
html body .cta-roll:hover .cta-roll__orig, html body .cta-roll:focus-visible .cta-roll__orig { transform: translateY(-100%) !important; }
html body .cta-roll:hover .cta-roll__clone, html body .cta-roll:focus-visible .cta-roll__clone { transform: translateY(0) !important; }
/* 2 i 3. zlota kreska pod nadtytulem wjezdza dopiero, gdy nadtytul wchodzi w kadr.
   Podglad ma wszystkie te kreski splaszczone na scaleX(1), wiec wlaczam wlasny wyzwalacz (klasa u-kreska-on). */
html body .pf-nadtytul:not(.u-kreska-on)::after, html body .panel-nadtytul:not(.u-kreska-on)::after,
html body #op-hero .u-nadtytul:not(.u-kreska-on)::after {
  transform: scaleX(0) !important; transform-origin: left center !important;
}
html body .pf-nadtytul::after, html body .panel-nadtytul::after, html body #op-hero .u-nadtytul::after {
  transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s !important; transform-origin: left center !important;
}
html body .pf-nadtytul.u-kreska-on::after, html body .panel-nadtytul.u-kreska-on::after,
html body #op-hero .u-nadtytul.u-kreska-on::after { transform: scaleX(1) !important; }
/* to samo dla cienkiego nadtytulu w hero - byl na sztywnej ramce, wiec zamieniam ja na wysuwana kreske */
html body section#op-hero .u-nadtytul { border-bottom: 0 !important; position: relative; }
html body section#op-hero .u-nadtytul::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #BF1E28;
  transform: scaleX(0); transform-origin: left center; transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) 0.45s;
}
html body section#op-hero.is-visible .u-nadtytul::after, html body section#op-hero .u-nadtytul.hero-wjazd.is-visible::after,
html body .hero-gotowe section#op-hero .u-nadtytul::after { transform: scaleX(1); }
/* 8. CTA: mniej przyciemnienia, zdjecie ma byc widoczne */
html body section#pf-cta::before { background: rgba(9, 9, 11, 0.93) !important; }   /* taka sama powloka jak na stronach 1-5 */
/* STRONA 7: jasniejszy granat #BF1E28 z machala 1 */
html body #obiuro-biuro .panel { background: #09090B !important; }
html body #obiuro-biuro .blok-foto { background: #09090B !important; }
html body section#pf-opinie-k .op-lista .op-el,
html body section#pf-opinie-k.op-ruch .op-lista .op-el.op-aktywne { background-color: #09090B !important; }
html body #pf-pytania .pt-poz.pt-otwarte { background: #09090B !important; }
/* do obejrzenia: Aleksandra na tym samym tle co sekcja 2, czyli plaski jasniejszy granat */
html body #obiuro-foto .foto { background-color: #09090B !important; background-image: none !important; }
html body #obiuro-foto .foto::before { background: linear-gradient(to bottom, rgba(9, 9, 11, 0) 56%, rgba(9, 9, 11, 0.34) 100%) !important; }
/* oferta: podswietlony wiersz tez w jasniejszym granacie */
html body #oferta-uslugi .wiersz::before { background: #BF1E28 !important; }
html body #oferta-uslugi .wiersz { border-bottom-color: #BF1E28 !important; }
/* plusy w FAQ tez na jasniejszym granacie */
html body #pf-pytania .pt-znak { border-color: #BF1E28 !important; }
html body #pf-pytania .pt-znak::before, html body #pf-pytania .pt-znak::after { background: #BF1E28 !important; }
html body #pf-pytania .pt-poz:not(.pt-otwarte) .pt-przycisk:hover .pt-znak { background: #BF1E28 !important; }
html body #pf-pytania .pt-poz:not(.pt-otwarte) .pt-przycisk:hover .pt-znak::before,
html body #pf-pytania .pt-poz:not(.pt-otwarte) .pt-przycisk:hover .pt-znak::after { background: #FFFFFF !important; }
/* blog: niebieski kwadrat zmienia zdjecia szybciej - bylo 1,2 s na zdjeciu i 0,5 s + 0,33 s zwloki na markerze */
html body #pf-poradnik .bl-zdjecie { transition-duration: 0.5s !important; }
html body #pf-poradnik .bl-marker { transition: top 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s, transform 0.3s !important; transition-delay: 0s !important; }
html body #pf-poradnik .bl-poz { transition-duration: 0.35s !important; }
/* menu: po najechaniu zloto, nie granat ani biel (Mateusz 21.09.2026) */
html body header nav a:hover, html body header nav a:focus-visible,
html body footer .stopka-lista a:hover, html body footer .stopka-lista a:focus-visible,
html body #menu-mobilne a:hover, html body [id*="menu"] a:hover { color: #BF1E28 !important; }
/* ===== KOLOR NAGLOWKOW: na bialym czarny, na granacie bialy, bez zadnych akcentow w srodku (Mateusz 20.09.2026) ===== */
html body #obiuro-biuro h1, html body #obiuro-biuro h2 { color: #FFFFFF !important; }
html body #obiuro-biuro h1 *, html body #obiuro-biuro h2 *, html body #obiuro-biuro h1 *[class], html body #obiuro-biuro h2 *[class] { color: inherit !important; background-image: none !important; -webkit-text-fill-color: currentColor !important; }
html body #oferta-uslugi h1, html body #oferta-uslugi h2 { color: #09090B !important; }
html body #oferta-uslugi h1 *, html body #oferta-uslugi h2 *, html body #oferta-uslugi h1 *[class], html body #oferta-uslugi h2 *[class] { color: inherit !important; background-image: none !important; -webkit-text-fill-color: currentColor !important; }
html body #galeria h1, html body #galeria h2 { color: #09090B !important; }
html body #galeria h1 *, html body #galeria h2 *, html body #galeria h1 *[class], html body #galeria h2 *[class] { color: inherit !important; background-image: none !important; -webkit-text-fill-color: currentColor !important; }
html body #pf-wstep h1, html body #pf-wstep h2 { color: #09090B !important; }
html body #pf-wstep h1 *, html body #pf-wstep h2 *, html body #pf-wstep h1 *[class], html body #pf-wstep h2 *[class] { color: inherit !important; background-image: none !important; -webkit-text-fill-color: currentColor !important; }
html body #pf-jak h1, html body #pf-jak h2 { color: #09090B !important; }
html body #pf-jak h1 *, html body #pf-jak h2 *, html body #pf-jak h1 *[class], html body #pf-jak h2 *[class] { color: inherit !important; background-image: none !important; -webkit-text-fill-color: currentColor !important; }
html body #pf-pytania h1, html body #pf-pytania h2 { color: #09090B !important; }
html body #pf-pytania h1 *, html body #pf-pytania h2 *, html body #pf-pytania h1 *[class], html body #pf-pytania h2 *[class] { color: inherit !important; background-image: none !important; -webkit-text-fill-color: currentColor !important; }
html body #pf-poradnik h1, html body #pf-poradnik h2 { color: #09090B !important; }
html body #pf-poradnik h1 *, html body #pf-poradnik h2 *, html body #pf-poradnik h1 *[class], html body #pf-poradnik h2 *[class] { color: inherit !important; background-image: none !important; -webkit-text-fill-color: currentColor !important; }
html body #pf-kontakt h1, html body #pf-kontakt h2 { color: #09090B !important; }
html body #pf-kontakt h1 *, html body #pf-kontakt h2 *, html body #pf-kontakt h1 *[class], html body #pf-kontakt h2 *[class] { color: inherit !important; background-image: none !important; -webkit-text-fill-color: currentColor !important; }
html body #op-hero h1, html body #op-hero h2 { color: #FFFFFF !important; }
html body #op-hero h1 *, html body #op-hero h2 *, html body #op-hero h1 *[class], html body #op-hero h2 *[class] { color: inherit !important; background-image: none !important; -webkit-text-fill-color: currentColor !important; }
html body #op-proces h1, html body #op-proces h2 { color: #FFFFFF !important; }
html body #op-proces h1 *, html body #op-proces h2 *, html body #op-proces h1 *[class], html body #op-proces h2 *[class] { color: inherit !important; background-image: none !important; -webkit-text-fill-color: currentColor !important; }
html body #pf-zalety h1, html body #pf-zalety h2 { color: #FFFFFF !important; }
html body #pf-zalety h1 *, html body #pf-zalety h2 *, html body #pf-zalety h1 *[class], html body #pf-zalety h2 *[class] { color: inherit !important; background-image: none !important; -webkit-text-fill-color: currentColor !important; }
html body #pf-opinie-k h1, html body #pf-opinie-k h2 { color: #FFFFFF !important; }
html body #pf-opinie-k h1 *, html body #pf-opinie-k h2 *, html body #pf-opinie-k h1 *[class], html body #pf-opinie-k h2 *[class] { color: inherit !important; background-image: none !important; -webkit-text-fill-color: currentColor !important; }
html body #pf-cta h1, html body #pf-cta h2 { color: #FFFFFF !important; }
html body #pf-cta h1 *, html body #pf-cta h2 *, html body #pf-cta h1 *[class], html body #pf-cta h2 *[class] { color: inherit !important; background-image: none !important; -webkit-text-fill-color: currentColor !important; }
/* te same twarze w kolkach i w stopce */
html body #obiuro-foto .panel-zespol .osoba-foto img, html body footer .stopka-awatar img { filter: saturate(0.8) hue-rotate(-7deg); }
html body section#op-hero .u-hero-osoba img { filter: saturate(0.8) hue-rotate(-7deg); }
/* tekst w O nas: tyle samo wolnego miejsca z lewej i z prawej strony Aleksandry (Mateusz 20.09.2026) */

html body .u-duo { background: linear-gradient(135deg, #09090B 0%, #09090B 26%, #09090B 50%, #09090B 74%, #09090B 100%) !important; }
html body .u-duo section#op-proces, html body .u-duo section#pf-zalety { background: transparent !important; }
html body section#pf-opinie-k .op-lista .op-el { background-color: #09090B !important; }
html body section#pf-opinie-k.op-ruch .op-lista .op-el.op-aktywne { background-color: #09090B !important; }
/* cztery panie w kolkach (kolko w kolorze marki) */
#obiuro-foto .panel-zespol { row-gap: 1.75rem; }
#obiuro-foto .panel-zespol .osoba { display: flex; align-items: center; gap: 1rem; }
#obiuro-foto .panel-zespol .osoba-foto, #obiuro-foto .panel-zespol .osoba-inicjaly { display: block; flex: none; box-sizing: border-box; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 2px solid #BF1E28; background: #76787C; }
#obiuro-foto .panel-zespol .osoba-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
#obiuro-foto .panel-zespol .osoba-inicjaly { display: grid; place-items: center; color: #76787C; }
#obiuro-foto .panel-zespol .osoba-inicjaly img { display: block; width: 34px; height: 34px; object-fit: contain; }
#obiuro-foto .panel-zespol .osoba strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; color: #FFFFFF; }
#obiuro-foto .panel-zespol .osoba span span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: #FFFFFF; }
html body #obiuro-foto .panel-zespol { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; }
@media (min-width: 768px) { html body #obiuro-foto .panel-zespol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; } }

/* Mobile portrait correction; hero uses the supplied original styles. */
@media (max-width: 1023px) {
  /* Fit the entire portrait into its frame, including space above the head. */
  html body #obiuro-foto .foto {
    height: clamp(25rem, 112vw, 34rem);
    min-height: 0;
    margin-right: 0;
  }

  /* Keep the full portrait inside its frame only in the mobile layout. */
  html body #obiuro-foto .foto::after {
    inset: 1rem 0.75rem 0;
    background-size: contain;
    background-position: center bottom;
  }
}

/* Na telefonie opinie przylegaja do siebie, a aktywna karta zostaje na miejscu.
   Animacja wejscia tresci i animowana zlota kreska zachowuja oryginalne reguly. */
@media (max-width: 1023px) {
  html body section#pf-opinie-k .op-lista {
    gap: 0 !important;
  }
  html body section#pf-opinie-k .op-lista .op-el {
    margin: 0 !important;
  }
  html body section#pf-opinie-k .op-lista .op-el + .op-el {
    margin-top: -1px !important;
  }
  html body section#pf-opinie-k.op-ruch .op-lista .op-el.op-aktywne {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Match the section 4 caption to section 3 benefit descriptions at every width. */
html body #obiuro-foto .u-podpis p {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: var(--pf-tekst) !important;
  text-wrap: pretty;
}


/* Navigation for the standalone blog pages. */
#poradnik .pr-blog-header { padding-top: 3rem; }
#poradnik .pr-blog-title { margin: 1.25rem 0 0; font-size: clamp(2.1rem, 5vw, 3.75rem); line-height: 1.06; font-weight: 600; letter-spacing: -.03em; color: #09090B; }
#poradnik .pr-blog-intro { margin-top: 1rem; max-width: 42rem; font-size: 17px !important; line-height: 1.6 !important; }
#poradnik .pr-uklad { padding-top: 2.5rem; }
.pr-breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1.5rem; font-size: 14px; color: #09090B; }
.pr-breadcrumb a, .pr-return { text-decoration: underline; text-underline-offset: 4px; }
.pr-breadcrumb a:focus-visible, .pr-return:focus-visible { outline: 2px solid #BF1E28; outline-offset: 5px; }
.pr-return { display: inline-block; margin-top: 2rem; color: #09090B; font-weight: 600; }
#pf-poradnik .bl-all { margin-top: 2.5rem; }

/* ===== SIGMA (22.09.2026): dopasowanie szablonu do Biura Rachunkowego SIGMA ===== */
/* hero: nowa osoba bez filtra kolorow (filtr byl dobrany pod zdjecie z szablon) */
html body section#op-hero .u-hero-osoba img { filter: drop-shadow(18px 10px 30px rgba(0, 0, 0, 0.35)) !important; }
/* O biurze: drzwi biura Sigmy z logo */
html body #obiuro-biuro .foto { background-position: 30% 50% !important; }
/* Nasze biura: zdjecie na calym polu, bez cienia postaci */
html body #obiuro-foto .foto::after { filter: none !important; }
/* sygnet Sigmy w kolkach zamiast zdjec osob */
html body #obiuro-foto .panel-zespol .osoba-foto img, html body footer .stopka-awatar img { filter: none !important; }
#obiuro-foto .panel-zespol .osoba-inicjaly { background: #FFFFFF; }
#obiuro-foto .panel-zespol .osoba-inicjaly img { width: 100%; height: 100%; object-fit: cover; }
#obiuro-foto .panel-zespol .osoba a, #pf-kontakt .kon-dane a { color: inherit; text-decoration: none; }
#obiuro-foto .panel-zespol .osoba a:hover, #pf-kontakt .kon-dane a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Opinie: cztery opinie z Google Sigmy - siatka 2 x 2 zamiast trzech kafli w rzedzie */
@media (min-width: 768px) { html body #pf-opinie-k .op-lista.op-lista--cztery { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
/* Nasze biura: kafle Szczecin i Dobiegniew obok siebie (w szablonie byly ukladane kolumnami po 2 osoby) */
html body #obiuro-foto .panel .panel-zespol { grid-auto-flow: row !important; grid-template-rows: none !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 1.5rem !important; }
@media (max-width: 519px) { html body #obiuro-foto .panel .panel-zespol { grid-template-columns: minmax(0, 1fr) !important; } }
/* Kontakt: dwa zwarte bloki biur obok siebie zamiast listy 7 wierszy (lista byla dluzsza niz formularz) */
html body #pf-kontakt .kon-biura { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid #76787C; }
html body #pf-kontakt .kon-biuro p { margin: 0; font-size: 15px; line-height: 1.65; color: #09090B; }
html body #pf-kontakt .kon-biuro p + p { margin-top: 0.7rem; }
html body #pf-kontakt .kon-biuro .kon-biuro-nazwa { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.55rem; font-size: 16px; font-weight: 600; color: #09090B; }
html body #pf-kontakt .kon-biuro-nazwa svg { flex: none; color: #BF1E28; }
html body #pf-kontakt .kon-biuro a { color: inherit; text-decoration: none; }
html body #pf-kontakt .kon-biuro a:hover { color: #BF1E28; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 419px) { html body #pf-kontakt .kon-biura { grid-template-columns: minmax(0, 1fr); } }
/* Kontakt: bez kreski nad biurami; od 1024 px bloki biur dosuniete do dolu kolumny - koncza sie rowno z przyciskiem formularza */
html body #pf-kontakt .kon-biura { border-top: 0 !important; padding-top: 0 !important; margin-top: 2rem; }
@media (min-width: 1024px) {
  html body #pf-kontakt .kon-uklad { align-items: stretch !important; }
  html body #pf-kontakt .kon-lewa { display: flex !important; flex-direction: column !important; }
  html body #pf-kontakt .kon-biura { margin-top: auto !important; padding-top: 2rem !important; }
}
/* Kontakt: formularz rozciagniety na wysokosc kolumny - gdy lewa kolumna jest wyzsza (np. 1024 px),
   rosnie pole Wiadomosc, wiec przycisk i tak konczy sie rowno z blokami biur */
@media (min-width: 1024px) {
  html body #pf-kontakt .kon-prawa { display: flex !important; flex-direction: column !important; }
  html body #pf-kontakt .kon-form { flex: 1 1 auto; display: flex !important; flex-direction: column !important; }
  html body #pf-kontakt .kon-form > * { flex: none; }
  html body #pf-kontakt .kon-form .kon-pole--tresc { flex: 1 1 auto; display: flex; flex-direction: column; }
  html body #pf-kontakt .kon-form .kon-pole--tresc textarea { flex: 1 1 auto; }
  html body #pf-kontakt .kon-form .kon-wyslij { align-self: flex-start; }
}
/* Stopka: dwie krotkie kolumny biur (Szczecin, Dobiegniew) zamiast jednej dlugiej "Kontakt z nami" */
footer#kontakt .stopka-kol--biuro .stopka-adres { margin: 0 0 16px; line-height: 1.7; }
/* CTA: zdjecie z MasterClass - mocne przyciemnienie pod naglowkiem, lzejsze po prawej, zeby bylo widac scene */
html body section#pf-cta::before { background: linear-gradient(90deg, rgba(9, 9, 11, 0.94) 0%, rgba(9, 9, 11, 0.85) 36%, rgba(9, 9, 11, 0.4) 66%, rgba(9, 9, 11, 0.2) 100%) !important; }

/* ===== SIGMA 22.09.2026: sekcje przeniesione z dem Machaly (kolory: koral -> czerwien Sigmy, granat -> czern) ===== */

/* --- Oferta (demo 1) --- */
#s-oferta {--t3: 1rem}
#s-oferta .h-px {height:1px}
#s-oferta .pozycja h3 {font-size: 1.75rem !important; font-weight: 600 !important; letter-spacing: -0.03em !important; line-height: 1.02 !important;}
@media (min-width: 1024px) {
  #s-oferta .pozycja h3 {font-size: 2.25rem !important;}
}
#s-oferta .pozycja p {font-size: var(--t3) !important; line-height: 1.55;}
#s-oferta > div {padding-top: var(--sekcja) !important; padding-bottom: var(--sekcja) !important;}
#s-oferta > div {padding-bottom: calc(var(--sekcja) / 2) !important;}
#s-oferta {background: #FFFFFF !important;}
#s-oferta > div {padding-bottom: var(--sekcja) !important;}
#s-oferta .pozycja h3, #s-oferta h3 {font-size: 1.5rem !important; font-weight: 500 !important; letter-spacing: -0.01em !important;}
#s-oferta .text-brand {background-image: none !important; background-color: transparent !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: #09090B !important; -webkit-text-fill-color: #09090B !important;}
#s-oferta > div {padding-bottom: calc(var(--sekcja) / 2) !important;}
#s-oferta .lista {margin-top: 2.5rem;}
#s-oferta .linia {height: 2px; background: transparent; overflow: hidden;}
#s-oferta .linia span {display: block; height: 100%; width: 0; background: #09090B; transition: width 1.6s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i) * 0.4s);}
#s-oferta.is-visible .linia span {width: 100%;}
@media (prefers-reduced-motion: reduce) {
  #s-oferta .linia span {width: 100%; transition: none;}
}
#s-oferta .pozycja {display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 2rem; padding: 1.75rem 0;}
#s-oferta .pozycja h3 {font-size: 1.9rem; line-height: 1.02; letter-spacing: -0.03em; font-weight: 600; color: #09090B;}
#s-oferta .pozycja p {margin-top: 0.75rem; font-size: 14px; line-height: 1.5; color: #09090B; max-width: 62ch;}
#s-oferta .numer {font-size: 3.25rem; font-weight: 400; line-height: 1; letter-spacing: -0.02em; color: #09090B;}
@media (min-width: 640px) {
  #s-oferta .pozycja {padding: 2.25rem 0;}
  #s-oferta .pozycja h3 {font-size: 2.5rem;}
  #s-oferta .numer {font-size: 4.5rem;}
}
@media (min-width: 1024px) {
  #s-oferta .pozycja h3 {font-size: 3rem;}
  #s-oferta .numer {font-size: 5.5rem;}
}
#s-oferta {background: #FFFFFF !important;}
#s-oferta .linia span {background: #09090B !important;}
#s-oferta h2 .text-brand {color: #09090B !important; -webkit-text-fill-color: #09090B !important; background-image: none !important;}
#s-oferta {background: #FFFFFF !important;}
#s-oferta .linia span {background: #09090B !important;}
#s-oferta .linia span {background: #09090B !important;}

/* --- O nas (demo 3) --- */
#s-onas {--pf-akcent: #BF1E28; --pf-biel: #FFFFFF; --pf-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --pf-ease-out: cubic-bezier(0.16, 0.84, 0.28, 1); --pf-linia: #E3E7EE; --pf-mgla: #F0F2F6; --pf-naglowek: #09090b; --pf-tekst: #2B2C2E; }
#s-onas {background: var(--pf-biel);}
#s-onas > div {padding-bottom: var(--sekcja) !important;}
#s-onas .obz-uklad {display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2.5rem;}
#s-onas .obz-foto {position: relative; margin: 0; overflow: hidden; aspect-ratio: 915 / 829; background: var(--pf-mgla);}
#s-onas .obz-foto img {display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; transform: scale(1.06); transition: transform 1.2s var(--pf-ease-out);}
#s-onas.pf-widoczne .obz-foto img {transform: none;}
#s-onas .obz-tresc {min-width: 0;}
#s-onas .obz-h2 {margin: 1.5rem 0 0 !important;}
@media (max-width: 1023.98px) {
  #s-onas .obz-h2 {text-wrap: balance;}
  #s-onas .obz-h2 .l2 {display: inline;}
}
#s-onas .obz-tresc .obz-lead {margin: 1.75rem 0 0 !important; max-width: 34rem; text-wrap: pretty;}
#s-onas .obz-kafel {position: relative; margin-top: 2.25rem; padding: 1.75rem 1.75rem 1.875rem; background: var(--pf-mgla);}
#s-onas .obz-kreska {position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--pf-akcent); transform: scaleX(0); transform-origin: left center; transition: transform 0.45s var(--pf-ease-out); pointer-events: none;}
#s-onas .obz-kafel .obz-h3 {margin: 0 !important; font-family: inherit; font-size: 1.25rem !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: -0.02em !important; text-transform: none !important; color: var(--pf-naglowek) !important; -webkit-text-fill-color: var(--pf-naglowek) !important;}
#s-onas .obz-kafel .obz-tekst {margin: 0.75rem 0 0 !important; font-size: 16px !important; line-height: 1.65 !important; color: var(--pf-tekst) !important; text-wrap: pretty;}
#s-onas .obz-kafel .obz-adres {margin: 1rem 0 0 !important; padding-top: 1rem; border-top: 1px solid var(--pf-linia); font-size: 15px !important; font-weight: 600; line-height: 1.5 !important; color: var(--pf-naglowek) !important;}
#s-onas .obz-akcja {display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 2.25rem;}
#s-onas .obz-tel {font-size: 15px; line-height: 1.5; color: var(--pf-tekst);}
#s-onas .obz-tel-nr {padding-bottom: 3px; font-weight: 600; color: var(--pf-naglowek) !important; text-decoration: none !important; white-space: nowrap; background: linear-gradient(var(--pf-akcent), var(--pf-akcent)) 0 100% / 0 2px no-repeat; transition: background-size 0.35s var(--pf-ease-out);}
#s-onas .obz-tel-nr:hover, #s-onas .obz-tel-nr:focus-visible {background-size: 100% 2px;}
@media (min-width: 1024px) {
  #s-onas .obz-uklad {grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); column-gap: clamp(3rem, 5vw, 5rem); align-items: stretch;}
  #s-onas .obz-foto {aspect-ratio: auto; min-height: 26rem;}
  #s-onas .obz-foto {margin-left: calc((min(100vw, 72rem) - 100vw) / 2 - 1.5rem);}
  #s-onas .obz-foto img {position: absolute; inset: 0;}
  #s-onas .obz-kafel {padding: 2rem 2.25rem 2.125rem;}
}
@media (hover: hover) and (pointer: fine) {
  #s-onas .obz-kafel {transition: scale 0.35s var(--pf-ease-out), opacity 0.7s var(--pf-ease), transform 0.7s var(--pf-ease-out);}
  #s-onas .obz-kafel:hover {scale: 1.02;}
  #s-onas .obz-kafel:hover .obz-kreska {transform: scaleX(1);}
}
@media (prefers-reduced-motion: reduce) {
  #s-onas .obz-foto img {transform: none; transition: none;}
  #s-onas .obz-kafel, #s-onas .obz-kreska, #s-onas .obz-tel-nr {transition: none;}
  #s-onas .obz-kafel:hover {scale: none;}
}
#s-onas > div {padding-top: calc(var(--sekcja) / 2) !important;}
body #s-onas .obz-kafel {margin-top: 1.5rem; padding: 1.25rem 1.5rem 1.375rem;}
body #s-onas .obz-kafel .obz-tekst {margin-top: 0 !important; font-size: 15px !important; line-height: 1.55 !important;}
body #s-onas .obz-kafel .obz-adres {margin-top: 0.75rem !important; padding-top: 0.75rem; font-size: 14px !important;}
@media (min-width: 1024px) {
  body #s-onas .obz-kafel {padding: 1.375rem 1.75rem 1.5rem;}
}
html body section#s-onas > div {padding-top: calc(var(--sekcja) / 2) !important; padding-bottom: var(--sekcja) !important;}

/* --- Zalety (demo 2) --- */
#s-zalety {--op-biel: #FFFFFF; --op-czern: #09090B; --op-czerwien: #BF1E28; --op-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --op-ease-out: cubic-bezier(0.16, 0.84, 0.28, 1); --op-linia: #76787C; --op-tekst: #09090B}
@keyframes op-zal-pyk {
  0% { transform: scale(0); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
#s-zalety {background: var(--op-biel); color: var(--op-tekst); overflow-x: clip;}
#s-zalety .zal-glowa {min-width: 0;}
#s-zalety .zal-h2 {margin-top: 1.25rem;}
#s-zalety .zal-lista {display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 2.75rem 0 0; padding: 0; list-style: none;}
#s-zalety .zal-poz {min-width: 0; padding: 1.5rem 0 1.75rem; border-top: 1px solid var(--op-linia); font-size: 16px !important; line-height: 1.6 !important;}
#s-zalety .zal-znak {display: block; width: 34px; height: 34px;}
#s-zalety .zal-znak svg {display: block; width: 34px; height: 34px;}
#s-zalety .zal-ring {fill: none; stroke: var(--op-czern); stroke-width: 2; transform: rotate(-90deg); transform-origin: center; transform-box: fill-box;}
#s-zalety .zal-kropka {fill: var(--op-czerwien); transform-origin: center; transform-box: fill-box;}
#s-zalety .zal-poz .zal-tyt {margin: 1.25rem 0 0 !important; min-width: 0; font-family: inherit; font-size: 1.25rem !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: -0.015em !important; text-transform: none !important; color: var(--op-czern) !important; -webkit-text-fill-color: var(--op-czern) !important; text-wrap: balance;}
#s-zalety .zal-tekst {margin: 0.75rem 0 0; max-width: 30rem; font-size: 16px !important; line-height: 1.6 !important; color: var(--op-tekst); text-wrap: pretty;}
@media (min-width: 768px) {
  #s-zalety .zal-lista {grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem;}
  #s-zalety .zal-poz {padding: 1.75rem 0 2rem;}
}
@media (min-width: 1024px) {
  #s-zalety .zal-lista {grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2rem; margin-top: 3.5rem;}
  #s-zalety .zal-poz {padding: 1.75rem 0 0;}
  #s-zalety .zal-h2 {margin-top: 1.5rem;}
}
@media (min-width: 1280px) {
  #s-zalety .zal-lista {column-gap: 2.5rem;}
}
#s-zalety.zal-js .zal-ring {stroke-dasharray: 101px; stroke-dashoffset: 101px;}
#s-zalety.zal-js.op-widoczne .zal-ring {stroke-dashoffset: 0; transition: stroke-dashoffset 0.8s var(--op-ease-out); transition-delay: calc(0.1s + var(--zal-i, 0) * 120ms);}
#s-zalety.zal-js .zal-ring.zal-domkniete {stroke-dasharray: none;}
#s-zalety.zal-js .zal-kropka {transform: scale(0);}
#s-zalety.zal-js.op-widoczne .zal-kropka {animation: op-zal-pyk 0.5s var(--op-ease) both; animation-delay: calc(0.75s + var(--zal-i, 0) * 120ms);}
@media (prefers-reduced-motion: reduce) {
  #s-zalety .zal-ring {stroke-dasharray: none !important; stroke-dashoffset: 0 !important; transition: none !important;}
  #s-zalety .zal-kropka {transform: none !important; animation: none !important;}
}
#s-zalety .zal-poz {border-top-color: #09090B;}

/* --- Krok po kroku (demo 3) --- */
#s-kroki {--pf-akcent: #BF1E28; --pf-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --pf-ease-out: cubic-bezier(0.16, 0.84, 0.28, 1); --pf-grafit: #09090B; }
@keyframes usl-obrot { to { transform: rotate(360deg); } }
@media (min-width: 1024px) {
  main #s-kroki .usl-h2 {font-size: clamp(2.75rem, 3.9vw, 3.125rem) !important;}
}
#s-kroki {--usl-menu: 68px; --usl-znak: 7.5rem; background: linear-gradient(135deg, #09090B 0%, #09090B 45%, #09090B 100%); color: #FFFFFF;}
#s-kroki {position: relative; isolation: isolate;}
#s-kroki > .pf-kontener {position: relative; z-index: 1;}
#s-kroki .usl-foto {display: none;}
@media (min-width: 1024px) {
  #s-kroki .usl-foto {position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; display: block; height: var(--usl-foto-h, 50%); max-height: 64vw; overflow: hidden; pointer-events: none; --usl-maska: linear-gradient(var(--usl-foto-kat, 180deg), transparent var(--usl-foto-a, 0px), rgba(9, 9, 11, 0.4) calc(var(--usl-foto-a, 0px) + (var(--usl-foto-b, 320px) - var(--usl-foto-a, 0px)) * 0.45), #09090B var(--usl-foto-b, 320px)); -webkit-mask-image: var(--usl-maska); mask-image: var(--usl-maska);}
  #s-kroki .usl-foto img {position: absolute; left: 50%; bottom: 0; display: block; width: 200%; max-width: none; height: auto; margin: 0 0 -67.333% -100%;}
  #s-kroki .usl-foto::after {content: ""; position: absolute; inset: 0; background: rgba(9, 9, 11, 0.85);}
}
#s-kroki .usl-siatka {display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 3rem;}
#s-kroki .usl-bok {min-width: 0; max-width: 36rem;}
#s-kroki .usl-h2 {margin: 1.5rem 0 0 !important;}
#s-kroki .usl-bok .usl-lead {margin: 1.75rem 0 0 !important; max-width: 30rem; text-wrap: pretty;}
#s-kroki .usl-akcja {margin-top: 1.75rem;}
#s-kroki .usl-odnosnik {display: inline-flex; align-items: center; gap: 0.625rem; font-size: 15px; font-weight: 500; line-height: 1.3; color: #FFFFFF; text-decoration: none;}
#s-kroki .usl-odnosnik-tresc {position: relative;}
#s-kroki .usl-odnosnik-tresc::before, #s-kroki .usl-odnosnik-tresc::after {content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;}
#s-kroki .usl-odnosnik-tresc::before {background: rgba(255, 255, 255, 0.28);}
#s-kroki .usl-odnosnik-tresc::after {background: var(--pf-akcent); transform: scaleX(0); transform-origin: left center; transition: transform 0.4s var(--pf-ease);}
#s-kroki .usl-grot {flex: 0 0 auto; color: var(--pf-akcent); transition: transform 0.35s var(--pf-ease);}
#s-kroki .usl-odnosnik:focus-visible .usl-odnosnik-tresc::after {transform: scaleX(1);}
#s-kroki .usl-odnosnik:focus-visible .usl-grot {transform: translateX(6px);}
#s-kroki .usl-znak {width: var(--usl-znak); height: var(--usl-znak); margin-top: 2.5rem; pointer-events: none;}
#s-kroki .usl-kolo {display: block; width: 100%; height: 100%; overflow: visible;}
#s-kroki .usl-tarcza {fill: var(--pf-grafit);}
#s-kroki .usl-strzalka {fill: none; stroke: var(--pf-akcent); stroke-width: 3; stroke-linecap: square; stroke-linejoin: miter;}
#s-kroki .usl-obrot {transform-origin: 100px 100px; animation: usl-obrot 28s linear infinite; animation-play-state: paused;}
#s-kroki.pf-widoczne .usl-obrot {animation-play-state: running;}
#s-kroki .usl-napis {font-family: inherit; font-size: 13px; font-weight: 600; fill: #FFFFFF;}
#s-kroki .usl-spis {min-width: 0; margin: 0; padding: 0; list-style: none; display: grid; grid-auto-rows: 1fr; gap: 1rem;}
#s-kroki .usl-spis .usl-kafel {position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.25rem; align-items: start; padding: 1.75rem 1.5rem 2rem; background: var(--pf-grafit); font-size: 16px !important; line-height: 1.7 !important; transition: scale 0.35s var(--pf-ease), box-shadow 0.35s var(--pf-ease);}
#s-kroki .usl-kreska {position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--pf-akcent); transform: scaleX(0); transform-origin: left center; transition: transform 0.35s var(--pf-ease); pointer-events: none;}
#s-kroki .usl-kafel .usl-nazwa {grid-column: 1; grid-row: 1; margin: 0 !important; font-family: inherit; font-size: clamp(1.375rem, 2.2vw, 1.75rem) !important; font-weight: 600 !important; line-height: 1.18 !important; letter-spacing: -0.02em !important; text-transform: none !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; text-wrap: balance;}
#s-kroki .usl-kafel .usl-nazwa .usl-jasny {font-weight: 400; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;}
#s-kroki .usl-kafel .usl-opis {grid-column: 1 / -1; grid-row: 2; margin: 1rem 0 0 !important; max-width: 34rem; font-size: 16px !important; font-weight: 400 !important; line-height: 1.7 !important; color: #FFFFFF !important; text-wrap: pretty;}
#s-kroki .usl-nr {grid-column: 2; grid-row: 1; align-self: start; font-size: 2.75rem; font-weight: 400; line-height: 0.8; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: #76787C; transition: color 0.35s var(--pf-ease);}
@media (min-width: 768px) {
  #s-kroki {--usl-znak: 8.5rem;}
  #s-kroki .usl-spis {gap: 1.25rem;}
  #s-kroki .usl-spis .usl-kafel {column-gap: 2rem; padding: 2.5rem 2.5rem 2.75rem;}
  #s-kroki .usl-kafel .usl-opis {grid-column: 1;}
  #s-kroki .usl-nr {grid-row: 1 / span 2; font-size: clamp(4rem, 6vw, 5rem);}
}
@media (min-width: 1024px) {
  #s-kroki .usl-siatka {grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); column-gap: 3.5rem; align-items: start;}
  #s-kroki .usl-bok {align-self: start; max-width: none;}
  #s-kroki .usl-znak {margin-top: 3rem;}
}
@media (min-width: 1024px) and (min-height: 640px) {
  #s-kroki .usl-bok {position: sticky; top: calc(var(--usl-menu) + 2.5rem);}
}
#s-kroki .usl-bez-przerw {white-space: nowrap;}
@media (min-width: 1280px) {
  #s-kroki {--usl-znak: 9.25rem;}
  #s-kroki .usl-siatka {column-gap: 4rem;}
  #s-kroki .usl-spis .usl-kafel {padding: 2.75rem 3rem 3rem;}
}
@media (hover: hover) and (pointer: fine) {
  #s-kroki .usl-spis .usl-kafel:hover {scale: 1.02; box-shadow: 0 24px 48px -28px rgba(9, 9, 11, 0.7);}
  #s-kroki .usl-kafel:hover .usl-kreska {transform: scaleX(1);}
  #s-kroki .usl-kafel:hover .usl-nr {color: #76787C;}
  #s-kroki .usl-odnosnik:hover .usl-odnosnik-tresc::after {transform: scaleX(1);}
  #s-kroki .usl-odnosnik:hover .usl-grot {transform: translateX(6px);}
}
#s-kroki.usl-js .usl-spis .usl-kafel {opacity: 0; transform: translateY(56px); transition: opacity 0.7s var(--pf-ease), transform 0.9s var(--pf-ease-out), scale 0.35s var(--pf-ease), box-shadow 0.35s var(--pf-ease);}
#s-kroki.usl-js .usl-spis .usl-kafel.pf-widoczne {opacity: 1; transform: none;}
@media (prefers-contrast: more) {
  #s-kroki .usl-kafel .usl-opis {color: #FFFFFF !important;}
  #s-kroki .usl-kafel .usl-nazwa .usl-jasny {color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;}
}
@media (prefers-reduced-motion: reduce) {
  #s-kroki.usl-js .usl-spis .usl-kafel, #s-kroki.usl-js .usl-spis .usl-kafel.pf-widoczne {opacity: 1 !important; transform: none !important; transition: none !important;}
  #s-kroki .usl-obrot {animation: none !important;}
  #s-kroki .usl-spis .usl-kafel, #s-kroki .usl-kreska, #s-kroki .usl-nr, #s-kroki .usl-grot, #s-kroki .usl-odnosnik-tresc::after {transition: none !important;}
  #s-kroki .usl-spis .usl-kafel:hover {scale: none !important;}
}
html body section#s-kroki > div {padding-top: var(--sekcja) !important; padding-bottom: var(--sekcja) !important;}

/* --- Zasady wspolpracy (demo 1) --- */
#s-zasady {}
#s-zasady #proces .karta, #s-zasady #korzysci .karta {border-width: 2px !important;}
#s-zasady #korzysci .karta a {border-top-width: 2px;}
#s-zasady #proces .karta {background: #09090B !important; border: 0 !important; box-shadow: none !important;}
#s-zasady #korzysci .karta:not(.karta--niebieska):not(.karta--granat) {background: #FFFFFF;}
#s-zasady #korzysci .karta a {padding: 1.1rem 2rem;}
#s-zasady {background: #FFFFFF;}
#s-zasady .uklad {display: grid; gap: 3rem;}
@media (min-width: 1024px) {
  #s-zasady .uklad {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: center;}
}
#s-zasady .karta {padding: 2.5rem 2rem; background: #FFFFFF;}
@media (min-width: 1024px) {
  #s-zasady .karta {padding: 3rem 2.75rem;}
}
#s-zasady .lista {list-style: none; margin: 0; padding: 0;}
#s-zasady .punkt {display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.1rem; padding: 1.5rem 0; border-bottom: 2px solid #76787C;}
#s-zasady .punkt:first-child {padding-top: 0;}
#s-zasady .punkt:last-child {padding-bottom: 0; border-bottom: 0;}
#s-zasady .znak {display: grid; place-items: center; width: 30px; height: 30px; margin-top: 2px; background: #09090B; color: #FFFFFF;}
#s-zasady .punkt h3 {margin: 0; color: #09090B !important;}
#s-zasady .punkt p {margin-top: 0.4rem; color: #09090B !important;}
#s-zasady .lewa p {margin-top: 1.5rem; color: #09090B !important;}
#s-zasady .lewa .przycisk {margin-top: 2.25rem;}
section#s-zasady > div {padding-bottom: calc(var(--sekcja) / 2) !important;}
#s-zasady > div {padding-bottom: calc(var(--sekcja) / 2) !important;}
#s-zasady {background: #FFFFFF !important;}
#s-zasady .karta {box-shadow: 0 44px 84px -30px rgba(9, 9, 11, 0.34), 0 8px 22px -10px rgba(9, 9, 11, 0.18) !important;}
#s-zasady .znak {background: #09090B !important; color: #FFFFFF !important;}
#s-zasady .znak svg {color: #FFFFFF !important; stroke: #FFFFFF !important;}
#s-zasady .punkt {border-bottom-color: #09090B !important; border-bottom-width: 1px !important;}
#s-zasady > div {padding-bottom: var(--sekcja) !important;}
#s-zasady > div {padding-top: var(--sekcja) !important;}

/* --- Poradnik (demo 2) --- */
#s-blog {--op-biel: #FFFFFF; --op-czern: #09090B; --op-czerwien: #BF1E28; --op-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --op-linia: #76787C; --op-mgla: #FFFFFF; --op-tekst: #09090B; --op-tekst-2: #76787C}
#s-blog {position: relative; background: var(--op-biel); color: var(--op-tekst);}
#s-blog .por-wnetrze {min-width: 0;}
#s-blog .por-gora {display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem;}
#s-blog .por-gora-tekst {min-width: 0;}
#s-blog .por-naglowek {margin-top: 1.25rem;}
#s-blog .por-wszystkie {display: inline-flex; align-items: center; gap: 0.6rem; justify-self: start; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--op-czern); text-decoration: none; white-space: nowrap;}
#s-blog .por-wszystkie-tekst {text-decoration: none; text-underline-offset: 4px; text-decoration-thickness: 1px;}
#s-blog .por-wszystkie-strzalka {color: var(--op-czerwien); flex: 0 0 auto;}
#s-blog .por-lista {margin: 2.5rem 0 0; padding: 0; list-style: none;}
#s-blog .por-poz {border-bottom: 1px solid var(--op-linia);}
#s-blog .por-poz:first-child {border-top: 1px solid var(--op-linia);}
#s-blog .por-wiersz {display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "mini kat" "mini tyt"; column-gap: 1rem; row-gap: 0.4rem; align-items: center; padding: 20px 0; text-decoration: none; color: inherit;}
#s-blog .por-mini {grid-area: mini; align-self: center; width: 104px; height: 68px; background-color: var(--op-mgla); background-size: cover; background-position: center;}
#s-blog .por-nr {grid-area: nr; display: none; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; color: var(--op-tekst-2); font-variant-numeric: tabular-nums;}
#s-blog .por-kat {grid-area: kat; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2em; text-transform: uppercase; color: var(--op-czerwien);}
#s-blog .por-wiersz .por-tyt {grid-area: tyt; margin: 0 !important; min-width: 0; font-family: inherit; font-size: clamp(1.15rem, 1.8vw, 1.5rem) !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: -0.015em !important; text-transform: none !important; color: var(--op-czern) !important; -webkit-text-fill-color: var(--op-czern) !important; text-wrap: pretty;}
#s-blog .por-strzalka {grid-area: strz; display: none; justify-self: end; color: var(--op-czern); transition: color 0.25s ease;}
#s-blog .por-strzalka svg {display: block;}
@media (min-width: 768px) {
  #s-blog .por-gora {grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem;}
  #s-blog .por-wszystkie {justify-self: end;}
  #s-blog .por-lista {margin-top: 56px;}
  #s-blog .por-wiersz {grid-template-columns: 176px 140px minmax(0, 1fr) 40px; grid-template-areas: "mini kat tyt strz"; column-gap: 1.75rem; row-gap: 0; align-items: center; padding: 22px 0;}
  #s-blog .por-mini {width: 176px; height: 110px;}
  #s-blog .por-strzalka {display: block;}
}
@media (min-width: 1024px) {
  #s-blog .por-naglowek {margin-top: 1.5rem;}
}
@media (hover: hover) and (pointer: fine) {
  #s-blog .por-wszystkie:hover .por-wszystkie-tekst, #s-blog .por-wszystkie:focus-visible .por-wszystkie-tekst {text-decoration: underline;}
  #s-blog .por-wiersz .por-tyt {transition: transform 0.4s var(--op-ease);}
  #s-blog .por-mini {transition: transform 0.45s var(--op-ease);}
  #s-blog .por-wiersz:hover .por-mini {transform: scale(1.04);}
  #s-blog .por-wiersz:hover .por-tyt {transform: translateX(12px);}
  #s-blog .por-wiersz:hover .por-strzalka, #s-blog .por-wiersz:focus-visible .por-strzalka {color: var(--op-czerwien);}
}
@media (prefers-reduced-motion: reduce) {
  #s-blog .por-wiersz .por-tyt, #s-blog .por-wiersz:hover .por-tyt, #s-blog .por-mini, #s-blog .por-wiersz:hover .por-mini {transform: none; transition: none;}
}

/* ===== SIGMA: ciemne sekcje na czarno - ta sama czern co stopka (#09090B) ===== */
html body section#op-hero { background-color: #09090B !important; }
html body section#op-hero::before { background: linear-gradient(90deg, rgba(9, 9, 11, 0.6) 0%, rgba(9, 9, 11, 0.3) 38%, rgba(9, 9, 11, 0) 62%), rgba(9, 9, 11, 0.74) !important; }
html body #pf-opinie-k { background: #09090B !important; }
html body section#pf-opinie-k .op-lista .op-el,
html body section#pf-opinie-k.op-ruch .op-lista .op-el.op-aktywne { background-color: #09090B !important; }
html body #s-kroki { background: #09090B !important; }
html body #s-kroki .usl-kafel { background-color: #09090B !important; }
/* Oferta: nagłówek łamie się jak w demie - "Jak możemy zadbać / o księgowość Twojej firmy?" */
html body #s-oferta h2 .br-lg { display: inline !important; }

/* ===== SIGMA: Nasze biura w ukladzie "O nas" - dwa biura obok siebie w szarym polu ===== */
html body #s-onas .obz-biura { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; }
html body #s-onas .obz-biura .obz-adres { margin: 0 0 0.4rem; }
html body #s-onas .obz-biura .obz-tekst { margin: 0; }
html body #s-onas .obz-biura a { color: inherit; text-decoration: none; }
html body #s-onas .obz-biura a:hover { color: #BF1E28; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 479px) { html body #s-onas .obz-biura { grid-template-columns: minmax(0, 1fr); } }
/* O biurze: panel na czarno (jak reszta ciemnych elementow) */
html body #obiuro-biuro .panel, html body #obiuro-biuro .blok-foto { background: #09090B !important; }
/* Krok po kroku: bez zdjecia w tle */
html body #s-kroki .usl-foto { display: none !important; }
/* ===== SIGMA: Co zyskujesz na czarnym tle ===== */
html body #pf-wstep { background: #09090B !important; color: #FFFFFF; }
html body #pf-wstep .pf-nadtytul { color: #FFFFFF !important; }
html body #pf-wstep .pf-h2, html body #pf-wstep .pf-h2 .l2 { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
html body #pf-wstep .pf-lead { color: #FFFFFF !important; }
html body #pf-wstep .wst-tyt, html body #pf-wstep .wst-nazwa { color: #FFFFFF !important; }
html body #pf-wstep .wst-tekst { color: #FFFFFF !important; }
html body #pf-wstep .wst-firma { color: #FFFFFF !important; }
html body #pf-wstep .wst-miejsce, html body #pf-wstep .wst-czesc, html body #pf-wstep .wst-sep { color: #FFFFFF !important; }
html body #pf-wstep .wst-kolo { background: #FFFFFF !important; }

/* ===== SIGMA: odstepy wg systemu szablonu - var(--sekcja) (7 rem od 1024 px) przy zmianie tla,
   polowa, gdy sasiednia sekcja ma to samo tlo (tak jak w oryginale) ===== */
html body main > section#s-oferta > *:first-child { padding-top: var(--sekcja) !important; padding-bottom: calc(var(--sekcja) / 2) !important; }
html body main > section#obiuro-biuro > *:first-child { padding-top: calc(var(--sekcja) / 2) !important; padding-bottom: calc(var(--sekcja) / 2) !important; }
html body main > section#s-zalety > *:first-child { padding-top: calc(var(--sekcja) / 2) !important; padding-bottom: calc(var(--sekcja) / 2) !important; }
html body main > section#s-onas > *:first-child { padding-top: calc(var(--sekcja) / 2) !important; padding-bottom: var(--sekcja) !important; }
html body main > section#s-kroki > *:first-child { padding-top: var(--sekcja) !important; padding-bottom: calc(var(--sekcja) / 2) !important; }
html body main > section#pf-wstep > *:first-child { padding-top: calc(var(--sekcja) / 2) !important; padding-bottom: var(--sekcja) !important; }
html body main > section#s-zasady > *:first-child { padding-top: var(--sekcja) !important; padding-bottom: calc(var(--sekcja) / 2) !important; }
html body main > section#pf-pytania > *:first-child { padding-top: calc(var(--sekcja) / 2) !important; padding-bottom: var(--sekcja) !important; }
html body main > section#pf-opinie-k > *:first-child { padding-top: var(--sekcja) !important; padding-bottom: var(--sekcja) !important; }
html body main > section#s-blog > *:first-child { padding-top: var(--sekcja) !important; padding-bottom: var(--sekcja) !important; }
html body main > section#pf-kontakt > *:first-child { padding-top: var(--sekcja) !important; padding-bottom: var(--sekcja) !important; }
html body section#pf-opinie-k { --pf-czern: #09090B; background: #09090B !important; }

/* ===== SIGMA: paleta 4 barw (czerwony #BF1E28, czarny #09090B, szary #76787C, bialy #FFFFFF) - uzupelnienia ===== */
/* Co zyskujesz na czarnym: caly tekst bialy, drugorzedny szary (wczesniej ciemny tekst znikal na czarnym tle) */
html body main section#pf-wstep :is(h2, h3, p, li, strong, .pf-nadtytul, .pf-h2, .l2, .pf-lead, .wst-lead, .wst-tyt, .wst-nazwa, .wst-tekst, .wst-firma) { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
html body main section#pf-wstep :is(.wst-miejsce, .wst-czesc, .wst-sep) { color: #76787C !important; -webkit-text-fill-color: #76787C !important; }
/* jasnoszare pola -> biale z szara ramka, ciemne karty -> czarne z szara ramka (zeby nadal bylo je widac) */
html body #s-kroki .usl-kafel { background-color: #09090B !important; border: 1px solid #76787C !important; }
html body section#pf-opinie-k .op-lista .op-el,
html body section#pf-opinie-k.op-ruch .op-lista .op-el.op-aktywne { background-color: #09090B !important; box-shadow: inset 0 0 0 1px #76787C !important; }

/* ===== SIGMA: SZARY #1E1E22 - jeden szary dla kart (odrobine jasniejszy niz #1E1E22, na prosbe uzytkownika) ===== */
html body section#pf-opinie-k .op-lista .op-el,
html body section#pf-opinie-k.op-ruch .op-lista .op-el.op-aktywne { background-color: #1E1E22 !important; box-shadow: none !important; }
html body section#pf-opinie-k.op-ruch .op-lista .op-el.op-aktywne { box-shadow: 0 34px 60px -30px rgba(9, 9, 11, 0.65) !important; }
html body #s-kroki .usl-kafel { background-color: #1E1E22 !important; border: 0 !important; }
html body #pf-pytania .pt-poz.pt-otwarte { background: #1E1E22 !important; }
/* Nasze biura: szare pole minimalnie jasniejsze (#F0F2F6 -> #F3F4F7) */
html body #s-onas .obz-kafel { background: #F3F4F7 !important; }
/* Zasady wspolpracy: nadtytul jak w calej stronie - ten sam odstep do naglowka (20 px, od 768 px 24 px) */
html body #s-zasady .pf-nadtytul { margin: 0 0 20px !important; }
@media (min-width: 768px) { html body #s-zasady .pf-nadtytul { margin-bottom: 24px !important; } }

/* ===== SIGMA 22.09.2026 - lista uwag klienta ===== */
/* hero: zdjecie za osoba ma byc widoczne - lzejsze przyciemnienie */
html body section#op-hero::before { background: linear-gradient(90deg, rgba(9, 9, 11, 0.6) 0%, rgba(9, 9, 11, 0.3) 38%, rgba(9, 9, 11, 0) 62%), rgba(9, 9, 11, 0.4) !important; }
/* naglowki: jeden kolor (bez szarej drugiej linii, bez czerwonej kropki i pytajnika) */
html body main section h2 .l2, html body main section h2 .op-kropka, html body main section h2 .text-brand { color: inherit !important; -webkit-text-fill-color: inherit !important; }
/* naglowki tej samej wielkosci (60 px od 640 px); Krok po kroku mial 50 px */
html body #s-kroki h2 { font-size: 2.6rem !important; line-height: 0.98 !important; font-weight: 600 !important; letter-spacing: -0.03em !important; }
@media (min-width: 640px) { html body #s-kroki h2 { font-size: 3.75rem !important; } }
/* Nasze biura: naglowek ciutke mniejszy */
html body #s-onas h2 { font-size: 2.35rem !important; }
@media (min-width: 640px) { html body #s-onas h2 { font-size: 3.35rem !important; } }
/* nadtytuly Oferta, Zalety, Poradnik jak w calej stronie: czarne, czerwona kreska pod spodem, odstep do naglowka 20/24 px */
html body :is(#s-oferta, #s-zalety, #s-blog) .pf-nadtytul { margin: 0 0 20px !important; }
@media (min-width: 768px) { html body :is(#s-oferta, #s-zalety, #s-blog) .pf-nadtytul { margin-bottom: 24px !important; } }
html body :is(#s-oferta, #s-zalety, #s-blog) h2 { margin-top: 0 !important; }
/* Krok po kroku: numery 01-03 czerwone */
html body #s-kroki .usl-nr { color: #BF1E28 !important; -webkit-text-fill-color: #BF1E28 !important; }
/* FAQ: kwadraty nie czerwone - czarna ramka i plus; najechanie: czarne pole i bialy plus; po rozwinieciu biala ramka i bialy minus */
html body #pf-pytania .pt-znak { border-color: #09090B !important; background: transparent !important; }
html body #pf-pytania .pt-znak::before, html body #pf-pytania .pt-znak::after { background: #09090B !important; }
html body #pf-pytania .pt-poz:not(.pt-otwarte) .pt-przycisk:hover .pt-znak { background: #09090B !important; }
html body #pf-pytania .pt-poz:not(.pt-otwarte) .pt-przycisk:hover .pt-znak::before,
html body #pf-pytania .pt-poz:not(.pt-otwarte) .pt-przycisk:hover .pt-znak::after { background: #FFFFFF !important; }
html body #pf-pytania .pt-poz.pt-otwarte .pt-znak { border-color: #FFFFFF !important; background: transparent !important; }
html body #pf-pytania .pt-poz.pt-otwarte .pt-znak::before, html body #pf-pytania .pt-poz.pt-otwarte .pt-znak::after { background: #FFFFFF !important; }
/* Opinie: kazdy kafel tej samej wielkosci, bez wzgledu na dlugosc tekstu */
html body #pf-opinie-k .op-lista.op-lista--cztery { grid-auto-rows: 1fr !important; }
html body #pf-opinie-k .op-lista--cztery .op-el > .op-pole { height: 100%; }
/* Formularz: ramki pol szare, nie czarne */
html body #pf-kontakt .kon-form :is(input, textarea) { border-color: #D4D4D8 !important; }
/* Stopka: w kole twarz */
html body footer .stopka-awatar img { object-fit: cover !important; object-position: 50% 0% !important; }
/* CTA: bez cieniowania z prawej strony */
html body section#pf-cta::before { background: linear-gradient(90deg, rgba(9, 9, 11, 0.94) 0%, rgba(9, 9, 11, 0.85) 36%, rgba(9, 9, 11, 0.35) 60%, rgba(9, 9, 11, 0) 80%) !important; }
/* (wzmocnienie) naglowki Zalet i Poradnika jednym kolorem; Krok po kroku 60 px jak reszta */
html body #s-zalety#s-zalety h2 :is(.l2, .op-kropka), html body #s-blog#s-blog h2 :is(.l2, .op-kropka) { color: #09090B !important; -webkit-text-fill-color: #09090B !important; }
html body #s-kroki#s-kroki h2 { font-size: 2.6rem !important; line-height: 0.98 !important; font-weight: 600 !important; letter-spacing: -0.03em !important; }
@media (min-width: 640px) { html body #s-kroki#s-kroki h2 { font-size: 3.75rem !important; } }
/* FAQ: aktywne (rozwiniete) pytanie - kwadrat wypelniony na czerwono, biala ramka i bialy minus bez zmian */
html body #pf-pytania .pt-poz.pt-otwarte .pt-znak { background: #BF1E28 !important; }
/* FAQ: aktywny kwadrat bez bialej ramki (ramka w kolorze wypelnienia - rozmiar kwadratu bez zmian) */
html body #pf-pytania .pt-poz.pt-otwarte .pt-znak { border-color: #BF1E28 !important; }
/* CTA od 1024 px: cale zdjecie widoczne (nic nie uciete krawedziami sekcji) - na wysokosc sekcji, z prawej w linii z trescia strony */
@media (min-width: 1024px) {
  html body section#pf-cta { background-color: #0A0808 !important; background-image: url(assets/sigma-cta-pelne.webp) !important; background-repeat: no-repeat !important; background-size: auto 100% !important; background-position: right max(24px, calc((100vw - 72rem) / 2 + 1.5rem)) top 0 !important; }
  html body section#pf-cta::before { background: linear-gradient(90deg, rgba(9, 9, 11, 0.94) 0%, rgba(9, 9, 11, 0.85) 36%, rgba(9, 9, 11, 0) 58%) !important; }
}

/* ===== SIGMA 22.09.2026 (2) - kolejne uwagi ===== */
/* Hero: przyciemnienie 40% -> 35% (o 5% jasniej) */
html body section#op-hero::before { background: linear-gradient(90deg, rgba(9, 9, 11, 0.6) 0%, rgba(9, 9, 11, 0.3) 38%, rgba(9, 9, 11, 0) 62%), rgba(9, 9, 11, 0.35) !important; }
/* Oferta: animowane kreski czerwone */
html body #s-oferta .linia span { background: #BF1E28 !important; }
/* Nasze biura: bez szarych kresek nad Szczecinem i Dobiegniewem (razem z odstepem pod kreska) */
html body #s-onas .obz-biura .obz-adres { border-top: 0 !important; padding-top: 0 !important; margin-top: 0 !important; }
/* Krok po kroku: tlo #181A1F, karty czarne; kolo pod obracajacym sie napisem w kolorze tla (jak dotad) */
html body #s-kroki { background: #181A1F !important; }
html body #s-kroki .usl-kafel { background-color: #09090B !important; }
html body #s-kroki .usl-tarcza { fill: #181A1F !important; }
/* Co zyskujesz: tlo #181A1F - to samo tlo co Krok po kroku, wiec odstep miedzy nimi zostaje polowkowy (system odstepow) */
html body #pf-wstep { background: #181A1F !important; }
/* Opinie: tlo #181A1F, kafle czarne */
html body section#pf-opinie-k { background: #181A1F !important; }
html body section#pf-opinie-k .op-lista .op-el,
html body section#pf-opinie-k.op-ruch .op-lista .op-el.op-aktywne { background-color: #09090B !important; }
/* CTA od 1024 px: pas tej samej wysokosci co dotad; zdjecie od konca tekstu do prawej krawedzi ekranu, na cala wysokosc pasa;
   gorna krawedz pasa tnie czerwony pasek szyldu w polowie (pasek na 20% wysokosci zdjecia: 0,2 x 1600/1066 = 0,3 szerokosci;
   --cta-w liczone z vw, bo procent w background-position odnosi sie do wysokosci);
   z lewej wtapia sie w czern - bez twardej krawedzi i bez cieniowania z prawej */
@media (min-width: 1024px) {
  html body section#pf-cta { background-image: none !important; }
  html body section#pf-cta::before { background: none !important; }
  html body section#pf-cta > .pf-kontener::after { content: ""; position: absolute; top: 0; bottom: 0; right: calc((min(100vw, 72rem) - 100vw) / 2); z-index: -1; width: calc((100% - 3rem - clamp(40px, 4.514vw, 65px)) * 519 / 1039 + clamp(40px, 4.514vw, 65px) + 1.5rem + (100vw - min(100vw, 72rem)) / 2); --cta-w: calc((min(100vw, 72rem) - 3rem - clamp(40px, 4.514vw, 65px)) * 519 / 1039 + clamp(40px, 4.514vw, 65px) + 1.5rem + (100vw - min(100vw, 72rem)) / 2); background: url(assets/sigma-cta-foto.webp) 50% calc(var(--cta-w) * -0.3) / 100% auto no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%); mask-image: linear-gradient(90deg, transparent 0, #000 20%); pointer-events: none; }
}
/* Zasady wspolpracy: cien karty nie jest uciety przez biale tlo nastepnej sekcji (FAQ) - karta rysuje sie nad nia */
html body #s-zasady .karta { position: relative; z-index: 1; }
/* FAQ: zamkniete pytania stale szare #F3F4F7, po najechaniu biale; otwarte pytanie i klikniecie bez zmian */
html body #pf-pytania .pt-poz:not(.pt-otwarte) { background: #F3F4F7; }
@media (hover: hover) and (pointer: fine) {
  html body #pf-pytania .pt-poz:not(.pt-otwarte):hover { background: #FFFFFF; }
}
/* Krok po kroku: cyferki 01-03 biale */
html body #s-kroki .usl-nr { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
/* Opinie: kafle z odstepem miedzy soba (jak karty w Krok po kroku) i bez ramek */
html body section#pf-opinie-k#pf-opinie-k .op-lista { gap: 1rem; }
html body section#pf-opinie-k#pf-opinie-k .op-lista .op-el { border: 0 !important; }
@media (min-width: 768px) { html body section#pf-opinie-k#pf-opinie-k .op-lista { gap: 1.25rem; } }
/* FAQ: aktywne (otwarte) pytanie w kolorze #181A1F */
html body #pf-pytania .pt-poz.pt-otwarte { background: #181A1F !important; }
/* Nasze biura: Szczecin i Dobiegniew tej samej wielkosci co adresy (pogrubione), z pinezka jak w kontakcie i odstepem pod nazwa jak w kontakcie */
html body #s-onas .obz-biura .obz-adres { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem !important; font-size: 15px !important; line-height: 1.55 !important; }
html body #s-onas .obz-biura .obz-adres svg { flex: none; color: #BF1E28; }
/* Krok po kroku: aktywna karta (pierwsza zawsze, kolejne po przewinieciu - site.js) - czerwona kreska u gory jak po najechaniu */
html body #s-kroki .usl-kafel.usl-aktywna .usl-kreska { transform: scaleX(1); }
/* FAQ: kreski miedzy pytaniami szare (#D4D4D8 jak ramki formularza), nie ciemne */
html body #pf-pytania { --pf-linia: #D4D4D8; }
/* Opinie: gwiazdki Google zlote #FBBC04 - ocena u gory i 5 gwiazdek w stopce kazdej opinii (jak w oryginale dema) */
html body #pf-opinie-k { --op-zolty: #FBBC04; }
/* Opinie: sam tekst opinii troche mniejszy (kafle byly za wysokie) */
html body #pf-opinie-k .op-cytat p { font-size: 15px !important; line-height: 1.6 !important; }
/* Kontakt: wszystko jedno pod drugim - Szczecin, pod nim Dobiegniew; w kazdym biurze dane wiersz pod wierszem (bez kolumn obok siebie) */
html body #pf-kontakt .kon-biura { grid-template-columns: minmax(0, 1fr); }
/* Krok po kroku + Co zyskujesz (od 1024 px): zdjecie w tle jak w demie 3 - od polowy karty 02 w dol przez cale Co zyskujesz,
   przyciemnione kolorem sekcji (98% - 85%, 92% i 95% bylo za jasno), u gory wtopione ukosem; wysokosc i prog maski liczy site.js */
@media (min-width: 1024px) {
  html body #s-kroki .usl-foto { display: block !important; position: absolute; left: 0; right: 0; top: var(--usl-foto-top, 50%); bottom: calc(-1 * var(--wst-h, 0px)); height: auto; max-height: none; z-index: 0; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(172deg, transparent var(--usl-foto-start, 0%), #000 var(--usl-foto-pelne, 45%)); mask-image: linear-gradient(172deg, transparent var(--usl-foto-start, 0%), #000 var(--usl-foto-pelne, 45%)); }
  html body #s-kroki .usl-foto img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; object-position: 50% 60%; }
  html body #s-kroki .usl-foto::after { content: ""; position: absolute; inset: 0; background: rgba(24, 26, 31, 0.98); }
  html body #pf-wstep { position: relative; z-index: 1; background: transparent !important; }
}
/* Zasady wspolpracy: czerwona kreska na gorze kwadratow 01-03, przyklejona do kwadratu, widoczna caly czas (2 px jak inne kreski) */
html body #s-zasady .znak { box-shadow: inset 0 2px 0 #BF1E28; }
/* Hero na telefonie i tablecie (do 1023 px): Pan Bartosz widoczny - pod trescia hero, na srodku, stoi na dolnej krawedzi */
@media (max-width: 1023.98px) {
  html body section#op-hero .u-hero-osoba { display: block !important; position: relative; right: auto; bottom: auto; order: 2; align-self: center; }
  html body section#op-hero .u-hero-osoba img { height: min(58svh, 28rem); }
}
/* Stopka: Pan Bartosz w kole wysrodkowany - srodek calej widocznej sylwetki (2,5% w lewo; 5,8% bylo za daleko, 0% za bardzo w prawo) */
html body footer .stopka-awatar img { transform: translate(-2.5%, 8px); }
/* Hero od 1024 px: Pan Bartosz ustawiony tak samo jak pani na demoopimedia.pl/urios - widoczna sylwetka konczy sie w tym samym
   miejscu (przy 1440 px: x 1234, 38 px przed marginesem tresci) i ma te sama wysokosc (glowa 226 px od gory, stopy na dole hero).
   Zdjecie URIOS ma ~10% wysokosci przezroczystego pola z prawej i 2,5% u gory, zdjecie Sigmy prawie wcale - stad 0,0965 i 0,9814. */
@media (min-width: 1024px) {
  html body section#op-hero .u-hero-osoba { right: calc(max(1.5rem, (100vw - 72rem) / 2) - 8px + 0.0965 * min(calc((100svh - 138px) * 1.08), 43.2rem)); }
  html body section#op-hero .u-hero-osoba img { height: calc(0.9814 * min(calc((100svh - 138px) * 1.08), 43.2rem)); }
}
/* Kontakt: dane biur zwarte - adres, telefony i e-mail wiersz pod wierszem bez dodatkowych przerw, mala przerwa pod nazwa, mniejszy odstep miedzy biurami */
html body #pf-kontakt .kon-biuro p + p { margin-top: 0; }
html body #pf-kontakt .kon-biuro .kon-biuro-nazwa { margin-bottom: 0.25rem; }
html body #pf-kontakt .kon-biura { row-gap: 1.25rem; }
/* Kontakt od 1024 px: bloki biur zaraz pod naglowkiem (padding 2rem = 32 px), nie dosuniete do przycisku formularza */
@media (min-width: 1024px) {
  html body #pf-kontakt .kon-biura { margin-top: 0 !important; }
}
/* Polityka prywatnosci / cookies: srodtytuly h3 w tresci i odnosnik w banerze zgod */
html body .pr-tresc h3 { margin: 28px 0 10px !important; font-size: 19px !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: -0.01em !important; color: #09090B !important; }
html body .cookie-consent-banner__text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Kontakt: 3 pytania w formularzu (forma dzialalnosci, dokumenty w miesiacu, pracownicy) - listy wyboru wygladaja jak pozostale pola */
html body #pf-kontakt .kon-form select { width: 100%; padding: 0.9rem 2.75rem 0.9rem 1rem; border: 1px solid #D4D4D8; border-radius: 0; background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2309090B' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center; color: #09090B; font-family: inherit; font-size: 16px; line-height: 1.5; -webkit-appearance: none; appearance: none; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
html body #pf-kontakt .kon-form select:has(option[value=""]:checked) { color: #76787C; }
html body #pf-kontakt .kon-form select option { color: #09090B; }
html body #pf-kontakt .kon-form select:focus { outline: none; border-color: #09090B; box-shadow: 0 0 0 3px rgba(191, 30, 40, 0.16); }
html body #pf-kontakt .kon-para--ankieta { margin-bottom: 1.25rem; }
/* Stopka: osobne zdjecie do kola (kwadrat z twarza na srodku) - bez przesuwania */
html body footer .stopka-awatar img { object-fit: cover !important; object-position: 50% 50% !important; transform: none !important; }
/* Dolny pasek stopki: "Projekt graficzny, wykonanie i wdrozenie strony" + logo opimedia (nie napis) -
   tak jak ustalone w szablonie 1 One.html (23.09.2026). Od 900 px w prawym dolnym rogu calego paska,
   poza marginesem tresci; na telefonie pod notka, wysrodkowane i z mozliwoscia zawiniecia. */
html body footer .stopka-pasek-linia .realizacja-opimedia { display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; flex: 0 0 auto;
  font-size: 11px !important; line-height: 1; color: inherit; text-decoration: none !important; white-space: nowrap; }
html body footer .realizacja-opimedia img { display: block; height: 35px; width: auto; max-width: none; }
/* Napis bialy, a czerwien opimedia dopiero po najechaniu: #FF3B63 (jasniejszy odcien marki;
   czysty #E6003D na czarnym ma za slaby kontrast i gasnie zamiast sie zapalac). */
/* jeden wiersz, wysrodkowany na kropce w logo opimedia (kropka siedzi 3,3% ponizej srodka logo) */
   ani nad, ani pod logo */
html body footer .realizacja-opimedia span { color: #FFFFFF !important; font-weight: 600; line-height: 1; white-space: nowrap; transform: translateY(1px); transition: color 0.25s ease; }
html body footer .realizacja-opimedia:hover span, html body footer .realizacja-opimedia:focus-visible span { color: #FF3B63 !important; }
@media (max-width: 899px) {
  html body footer .realizacja-opimedia { flex-wrap: wrap; justify-content: center; white-space: normal; text-align: center; max-width: 100%; }
  html body footer .realizacja-opimedia span { min-width: 0; }
}
@media (min-width: 900px) {
  html body footer#kontakt .stopka-pasek { position: relative; }
  html body footer#kontakt .realizacja-opimedia { position: absolute; right: 110px; bottom: 62px; margin: 0; }
  /* podpis stoi 62 px nad dolna krawedzia, wiec pasek musi miec tyle miejsca pod notka */
  html body footer#kontakt .stopka-pasek-linia { padding-bottom: max(130px, 12vh); }
}
/* Hero (Mateusz 23.09.2026, wersja z przyslanego pliku sigma.html): nad naglowkiem linki tel + oferta ze strzalkami,
   bez nadtytulu i przyciskow, pod opisem trzy liczby (pierwsza = ocena Google). Zdjecia w hero nie ruszamy. */
#op-hero .u1-liczby{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;column-gap:0;margin:2.75rem 0 0;padding:0}
#op-hero .u1-liczby>div{padding:0 2.25rem;border-left:1px solid rgba(255,255,255,.18)}
#op-hero .u1-liczby>div:first-child{padding-left:0;border-left:0}
#op-hero .u1-liczby dt{display:flex;align-items:center;gap:.6rem;font-family:'Space Grotesk',sans-serif;font-size:1.9rem;font-weight:600;color:#fff;line-height:1}
#op-hero .u1-gw{display:flex;gap:1px}
#op-hero .u1-liczby dd{margin:.5rem 0 0;font-size:14px;color:rgba(255,255,255,.65)}
#op-hero .u1-linki{display:flex;flex-wrap:wrap;margin-bottom:0!important;gap:0 3rem!important}
#op-hero .u1-linki a{display:inline-flex!important;align-items:center;gap:.85rem;position:relative;font-family:'Space Grotesk',sans-serif;font-size:1.05rem!important;font-weight:500;letter-spacing:-.005em;color:#fff;text-decoration:none;padding:0!important}
#op-hero .u1-strz{color:#BF1E28;transition:transform .35s cubic-bezier(.22,.7,.25,1)}
#op-hero .u1-linki a:hover .u1-strz{transform:translateX(5px)}
#op-hero .u1-linki + .hero-tytul{margin-top:34px!important}
/* liczby: rzad pod opisem, bez linii nad nim, wszystkie na jednej linii bazowej */
#op-hero .u1-liczby{margin-top:40px!important;padding-top:0!important;border-top:0!important;width:fit-content;align-items:start!important}
#op-hero .u1-liczby>div{padding:0 1.6rem!important}
#op-hero .u1-liczby>div:first-child{padding-left:0!important}
#op-hero .u1-liczby>div:last-child{padding-right:0!important}
#op-hero .u1-liczby dt{font-size:1.75rem!important;height:2.1rem!important;align-items:flex-end!important;white-space:nowrap}
#op-hero .u1-gw svg{width:14px;height:14px}
#op-hero .u1-liczby dd{margin-top:.6rem!important;font-size:13.5px!important;color:rgba(255,255,255,.7)!important}
/* pierwsza kolumna = ocena Google: duze 4,7 / 5 + gwiazdki, pod spodem G i link do profilu */
#op-hero .u1-ocena dt{height:auto!important;gap:.5rem!important;align-items:flex-end!important}
#op-hero .u1-5{font-size:2.35rem!important;line-height:1!important;letter-spacing:-.04em}
#op-hero .u1-max{font-size:1rem;font-weight:500;color:rgba(255,255,255,.7);margin-right:.35rem}
#op-hero .u1-max,#op-hero .u1-ocena .u1-gw{margin-bottom:.3rem}
#op-hero .u1-ocena .u1-gw svg{width:16px!important;height:16px!important}
#op-hero .u1-ocena dd{margin-top:.8rem!important}
#op-hero .u1-profil{display:inline-flex;align-items:center;gap:.5rem;color:#fff;text-decoration:none;font-size:13.5px}
#op-hero .u1-profil span{text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:4px}
#op-hero .u1-profil:hover span{text-decoration-color:#BF1E28}
#op-hero .u1-g{width:15px!important;height:15px!important;flex:none}
#op-hero .u1-ukos{color:rgba(255,255,255,.7);transition:transform .3s}
#op-hero .u1-profil:hover .u1-ukos{transform:translate(2px,-2px)}
/* telefon: ocena na cala szerokosc, pod nia dwie liczby obok siebie */
@media (max-width:639.98px){
  #op-hero .u1-liczby{grid-template-columns:auto auto!important;row-gap:1.5rem}
  #op-hero .u1-liczby>.u1-ocena{grid-column:1/-1;padding-right:0!important}
  #op-hero .u1-liczby>div:nth-child(2){padding-left:0!important;border-left:0!important}
  #op-hero .u1-linki{gap:0 2rem!important}
}
/* Hero, wersja z pliku sigma.html (Mateusz 23.09.2026): nad naglowkiem znow nadtytul, a linki tel + oferta
   jako ostatni wiersz pod liczbami - dwa numery obok siebie z czerwona kropka miedzy nimi. Zdjecie po prawej bez zmian. */
#op-hero .u1-linki{margin:32px 0 0!important}
#op-hero .u1-tel{display:inline-flex;align-items:center;gap:.9rem}
#op-hero .u1-sep{display:block;width:5px;height:5px;border-radius:50%;background:#BF1E28}
/* dol tresci hero jak w Urios: 72 px od dolu (Mateusz) */
@media (min-width:1024px){ html body #op-hero .hero-tresc{padding-bottom:72px!important} }
/* "Co zyskujesz" (23.09.2026): bez kwadracika przed nazwa; zamiast poziomej kreski pod nazwa
   pionowa czerwona kreska z lewej strony calego punktu - jak na przyslanym zrzucie. */
html body #pf-wstep .wst-punkt { position: relative; padding-left: 1.5rem !important; }
html body #pf-wstep .wst-punkt::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--pf-akcent); }
html body #pf-wstep .wst-punkt .wst-nazwa { padding-bottom: 0 !important; background-image: none !important; }
#pf-wstep.wst-js .wst-punkt::before { transform: scaleY(0); transform-origin: 50% 0; }
#pf-wstep.wst-js .wst-lista.pf-widoczne .wst-punkt::before { transform: none; transition: transform 0.6s var(--pf-ease-out); transition-delay: calc(0.35s + var(--wst-i, 0) * 110ms); }
@media (prefers-reduced-motion: reduce) {
  #pf-wstep.wst-js .wst-punkt::before,
  #pf-wstep.wst-js .wst-lista.pf-widoczne .wst-punkt::before { transform: none !important; transition: none !important; }
}
/* Opinie (23.09.2026): pierwszy kafel z lewej to ocena Google zamiast opinii - uklad jak na przyslanym
   zrzucie (tytul, kreska, ocena + gwiazdki + podpis, kreska, profil), na czarnym tle jak reszta kafli. */
html body #pf-opinie-k .opk-pole { display: flex !important; flex-direction: column; }
html body #pf-opinie-k .opk-tyt { margin: 0; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 1.25rem; font-weight: 600; line-height: 1.35; color: #FFFFFF; }
html body #pf-opinie-k .opk-srodek { margin-top: 0; padding-top: 0; border-top: 0; }
html body #pf-opinie-k .opk-wynik { display: flex; align-items: baseline; gap: 0.4rem; margin: 0 !important; font-family: 'Space Grotesk', system-ui, sans-serif; color: #FFFFFF !important; }
html body #pf-opinie-k .opk-liczba { font-size: 3.25rem; font-weight: 600; line-height: 0.9; letter-spacing: -0.04em; }
html body #pf-opinie-k .opk-max { font-size: 1.125rem; font-weight: 500; color: rgba(255, 255, 255, 0.7); }
html body #pf-opinie-k .opk-gwiazdy { display: flex; gap: 3px; margin-top: 0.9rem; }
html body #pf-opinie-k .opk-gwiazdy svg { display: block; width: 18px; height: 18px; fill: var(--op-zolty); }
html body #pf-opinie-k .opk-opis { margin: 1.1rem 0 0 !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.6 !important; color: #FFFFFF !important; }
html body #pf-opinie-k .opk-profil { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.25rem; border-top: 1px solid #76787C; color: #FFFFFF; text-decoration: none; }
html body #pf-opinie-k .opk-profil-tyt { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; transition: color 0.25s ease; }
html body #pf-opinie-k .opk-profil-nazwa { display: block; margin-top: 0.15rem; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.7); }
html body #pf-opinie-k .opk-g { flex: 0 0 auto; }
html body #pf-opinie-k .opk-profil:hover .opk-profil-tyt, html body #pf-opinie-k .opk-profil:focus-visible .opk-profil-tyt { color: var(--pf-akcent); }
/* Kreska POD podpisem (23.09.2026): rozsuwa sie od lewej, gdy stopka wjedzie w kadr - tak samo jak
   kreski przy nadtytulach. Grubosc 0,5 px - ma byc jak najcienisza (na ekranach 1x przegladarka narysuje ja jako slabsza 1 px). Lezy poza ukladem,
   wiec nie rusza wyrownania napisu wzgledem logo. */
html body footer .realizacja-opimedia span { position: relative; }
html body footer .realizacja-opimedia span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 0.5px;
  background: #BF1E28; transform: scaleX(0); transform-origin: left center; transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s; }
html body footer .realizacja-opimedia.realizacja-widoczna span::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { html body footer .realizacja-opimedia span::after { transform: scaleX(1); transition: none; } }
/* Formularz: ukryte pole-pulapka na boty i komunikaty po wyslaniu (23.09.2026) */
html body #pf-kontakt .kon-pulapka { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
html body #pf-kontakt .kon-notka { display: block; }
html body #pf-kontakt .kon-notka[hidden] { display: none; }
html body #pf-kontakt .kon-notka.kon-ok { color: #09090B; font-weight: 600; }
html body #pf-kontakt .kon-notka.kon-blad { color: #BF1E28; font-weight: 600; }
html body #pf-kontakt .kon-wyslij[disabled] { opacity: 0.6; cursor: progress; }

/* Formularz: odnosnik do polityki w etykiecie zgody ma wygladac jak link (25.09.2026) */
html body #pf-kontakt .kon-zgoda label a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* SIGMA nowy uklad sekcji (25.09.2026, lista Mateusza): Hero, Oferta, O biurze, Korzysci, O nas (Nasze biura),
   Proces (Krok po kroku), FAQ, Opinie, Blog, CTA, Formularz, a pod formularzem Zalety i Zasady wspolpracy.
   Odstepy wg systemu: zmiana tla = pelny odstep (--sekcja), to samo tlo = pol + pol. */
html body main > section#s-oferta > div { padding-top: var(--sekcja) !important; padding-bottom: calc(var(--sekcja) / 2) !important; }
html body main > section#obiuro-biuro > div.opakowanie { padding-top: calc(var(--sekcja) / 2) !important; padding-bottom: calc(var(--sekcja) / 2) !important; }
html body main > section#pf-wstep > div.pf-kontener { padding-top: calc(var(--sekcja) / 2) !important; padding-bottom: calc(var(--sekcja) / 2) !important; }
html body main > section#s-onas > div.pf-kontener { padding-top: calc(var(--sekcja) / 2) !important; padding-bottom: var(--sekcja) !important; }
html body main > section#s-kroki > div.pf-kontener { padding-top: var(--sekcja) !important; padding-bottom: var(--sekcja) !important; }
html body main > section#pf-pytania > div.pf-kontener { padding-top: var(--sekcja) !important; padding-bottom: var(--sekcja) !important; }
html body main > section#pf-kontakt > div.pf-kontener { padding-top: var(--sekcja) !important; padding-bottom: var(--sekcja) !important; }
html body main > section#s-zalety > div.op-kontener { padding-top: calc(var(--sekcja) / 2) !important; padding-bottom: calc(var(--sekcja) / 2) !important; }
html body main > section#s-zasady > div:first-child { padding-top: calc(var(--sekcja) / 2) !important; padding-bottom: var(--sekcja) !important; }
/* Korzysci (Co zyskujesz) od 25.09.2026 na BIALYM tle, bez zdjecia biurka (prosba Mateusza).
   Kolory tekstow jak w "Nasze biura": naglowki #09090B, akapity #2B2C2E, drobne szare #76787C. */
html:root body main > section#pf-wstep { background: #FFFFFF !important; color: #09090B !important; }
html:root body main > section#pf-wstep :is(h2, h3, strong, .pf-nadtytul, .pf-h2, .l2, .wst-tyt, .wst-nazwa, .wst-firma) { color: #09090B !important; -webkit-text-fill-color: #09090B !important; }
html:root body main > section#pf-wstep :is(p, li, .pf-lead, .wst-lead, .wst-tekst) { color: #2B2C2E !important; -webkit-text-fill-color: #2B2C2E !important; }
html:root body main > section#pf-wstep :is(.wst-miejsce, .wst-czesc, .wst-sep) { color: #76787C !important; -webkit-text-fill-color: #76787C !important; }
html:root body main > section#pf-wstep .wst-kolo { background: #F3F4F7 !important; }
/* Krok po kroku: zdjecie biurka o 1% bardziej widoczne (przyciemnienie 98% -> 97%, Mateusz 25.09.2026) */
@media (min-width: 1024px) {
  html:root body #s-kroki .usl-foto::after { background: rgba(24, 26, 31, 0.97) !important; }
}

/* Zalety i Zasady wspolpracy UKRYTE od 25.09.2026 (prosba Mateusza) - kod zostaje, sekcje tylko niewidoczne.
   Formularz stoi teraz tuz nad stopka (zmiana tla), wiec ma pelny odstep na dole. */
html body main > section#s-zalety, html body main > section#s-zasady { display: none !important; }

/* Formularz: wlasny wyglad pola zgody (25.09.2026). Natywny checkbox potrafil sie wyswietlic czarny przy ciemnym motywie
   systemu albo podgladu. Teraz: bialy kwadrat z ramka #D4D4D8 jak pola formularza, zaznaczony czerwony #BF1E28 z bialym ptaszkiem. */
html body #pf-kontakt .kon-form { color-scheme: light; }
html body #pf-kontakt .kon-zgoda input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; border: 1px solid #D4D4D8; border-radius: 0; background: #FFFFFF; display: inline-grid; place-content: center; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
html body #pf-kontakt .kon-zgoda input[type="checkbox"]::before { content: ""; width: 11px; height: 11px; background: #FFFFFF; transform: scale(0); transition: transform .12s ease-out; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
html body #pf-kontakt .kon-zgoda input[type="checkbox"]:hover { border-color: #76787C; }
html body #pf-kontakt .kon-zgoda input[type="checkbox"]:checked { background: #BF1E28; border-color: #BF1E28; }
html body #pf-kontakt .kon-zgoda input[type="checkbox"]:checked::before { transform: scale(1); }
html body #pf-kontakt .kon-zgoda input[type="checkbox"]:focus-visible { outline: 2px solid #BF1E28; outline-offset: 2px; }


/* FAQ w ukladzie "Propozycja 07 - z zajawka odpowiedzi" (25.09.2026, prosba Mateusza): pod kazdym pytaniem pierwsza linijka
   odpowiedzi, klik w pytanie albo w zajawke rozwija calosc (jedno otwarte naraz). Wymiary 1:1 z pliku propozycji.
   Stara lista (.pt-*) zapisana w scratchpadzie sesji 64cdb207 (faq-stara-lista.html). */
html:root body main > section#pf-pytania .f7-akord { margin-top: 48px !important; border-top: 1px solid #D4D4D8 !important; }
@media (min-width: 640px) { html:root body main > section#pf-pytania .f7-akord { margin-top: 64px !important; } }
html:root body main > section#pf-pytania .f7-akord .f7-poz { position: relative !important; border-bottom: 1px solid #D4D4D8 !important; background: transparent !important; }
html:root body main > section#pf-pytania .f7-akord .f7-h { margin: 0 !important; padding: 0 !important; font: inherit !important; }
html:root body main > section#pf-pytania .f7-akord .f7-btn { display: grid !important; grid-template-columns: 2.75rem minmax(0, 1fr) !important; align-items: start !important; column-gap: 0.75rem !important; width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 24px 60px 10px 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-align: left !important; cursor: pointer; color: inherit !important; font: inherit !important; letter-spacing: normal !important; text-transform: none !important; }
@media (min-width: 640px) { html:root body main > section#pf-pytania .f7-akord .f7-btn { grid-template-columns: 4.5rem minmax(0, 1fr) !important; column-gap: 0 !important; padding: 28px 76px 10px 0 !important; } }
@media (min-width: 1024px) { html:root body main > section#pf-pytania .f7-akord .f7-btn { grid-template-columns: 5.75rem minmax(0, 1fr) !important; padding: 28px 88px 10px 0 !important; } }
html:root body main > section#pf-pytania .f7-akord .f7-btn:focus-visible { outline: 2px solid #09090B !important; outline-offset: -2px !important; }
html:root body main > section#pf-pytania .f7-akord .f7-nr { justify-self: start !important; margin-top: 0.3em !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.02em !important; font-variant-numeric: tabular-nums; color: #76787C !important; transition: color 0.3s; }
@media (min-width: 640px) { html:root body main > section#pf-pytania .f7-akord .f7-nr { font-size: 14px !important; } }
html:root body main > section#pf-pytania .f7-akord .f7-pyt { display: block !important; margin: 0 !important; padding: 0 !important; font-size: 17px !important; font-weight: 500 !important; line-height: 1.3 !important; letter-spacing: -0.01em !important; color: #09090B !important; -webkit-text-fill-color: #09090B !important; }
@media (min-width: 640px) { html:root body main > section#pf-pytania .f7-akord .f7-pyt { font-size: 20px !important; } }
@media (min-width: 1024px) { html:root body main > section#pf-pytania .f7-akord .f7-pyt { font-size: 22px !important; } }
html:root body main > section#pf-pytania .f7-akord .f7-znak { position: absolute !important; right: 0 !important; top: 31px !important; width: 44px !important; height: 44px !important; border: 1px solid #09090B !important; background: transparent !important; transition: background-color 0.3s, border-color 0.3s; }
@media (min-width: 640px) { html:root body main > section#pf-pytania .f7-akord .f7-znak { width: 52px !important; height: 52px !important; top: 34px !important; } }
@media (min-width: 1024px) { html:root body main > section#pf-pytania .f7-akord .f7-znak { width: 56px !important; height: 56px !important; top: 33px !important; } }
html:root body main > section#pf-pytania .f7-akord .f7-znak::before, html:root body main > section#pf-pytania .f7-akord .f7-znak::after { content: "" !important; position: absolute !important; left: 50% !important; top: 50% !important; width: 14px !important; height: 1.5px !important; background: #09090B !important; transform: translate(-50%, -50%); transition: background-color 0.3s, opacity 0.25s, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); }
html:root body main > section#pf-pytania .f7-akord .f7-znak::after { transform: translate(-50%, -50%) rotate(90deg); }
html:root body main > section#pf-pytania .f7-akord .f7-otwarte .f7-znak { background: #BF1E28 !important; border-color: #BF1E28 !important; }
html:root body main > section#pf-pytania .f7-akord .f7-otwarte .f7-znak::before, html:root body main > section#pf-pytania .f7-akord .f7-otwarte .f7-znak::after { background: #FFFFFF !important; }
html:root body main > section#pf-pytania .f7-akord .f7-otwarte .f7-znak::after { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }
@media (hover: hover) and (pointer: fine) {
  html:root body main > section#pf-pytania .f7-akord .f7-poz:not(.f7-otwarte) .f7-btn:hover .f7-znak { background: #09090B !important; }
  html:root body main > section#pf-pytania .f7-akord .f7-poz:not(.f7-otwarte) .f7-btn:hover .f7-znak::before, html:root body main > section#pf-pytania .f7-akord .f7-poz:not(.f7-otwarte) .f7-btn:hover .f7-znak::after { background: #FFFFFF !important; }
}
html:root body main > section#pf-pytania .f7-akord .f7-odp { display: block !important; visibility: visible !important; }
html:root body main > section#pf-pytania .f7-akord .f7-odp-w { padding: 0 60px 24px 3.5rem !important; }
@media (min-width: 640px) { html:root body main > section#pf-pytania .f7-akord .f7-odp-w { padding: 0 76px 28px 4.5rem !important; } }
@media (min-width: 1024px) { html:root body main > section#pf-pytania .f7-akord .f7-odp-w { padding: 0 88px 28px 5.75rem !important; } }
html:root body main > section#pf-pytania .f7-akord .f7-tekst { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden !important; max-width: 34rem !important; max-height: 1.75em !important; margin: 0 !important; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.75 !important; color: #76787C !important; -webkit-text-fill-color: #76787C !important; cursor: pointer; transition: max-height 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.3s; }
@media (min-width: 640px) { html:root body main > section#pf-pytania .f7-akord .f7-tekst { font-size: 16px !important; } }
html:root body main > section#pf-pytania .f7-akord .f7-otwarte .f7-tekst { display: block !important; -webkit-line-clamp: none; max-height: 30em !important; color: #2B2C2E !important; -webkit-text-fill-color: #2B2C2E !important; cursor: auto; }
html:root body main > section#pf-pytania .f7-akord .f7-otwarte .f7-nr { color: #BF1E28 !important; }

/* SIGMA Nasze biura: zdjecie w marginesie (25.09) - od 1024 px zaczyna sie przy lewym marginesie tresci, a nie przy krawedzi ekranu */
@media (min-width: 1024px) { html body #s-onas .obz-foto { margin-left: 0; } }
/* SIGMA Nasze biura: panowie ok. 10% mniejsi, nad nimi wiecej tla (25.09). Gora zdjecia jest czarna #020202, wiec dolozone tlo w tym kolorze nie ma szwu. Tylko od 1024 px, telefon bez zmian. */
@media (min-width: 1024px) { html body #s-onas .obz-foto { background: #020202; } html body #s-onas .obz-foto img { top: 10%; height: 90%; } }
/* SIGMA jedna linia od linijki (25.09): prawa krawedz zdjecia w „Nasze biura" = prawa krawedz zdjecia biura w „O biurze"
   = lewe kreski w „Korzysciach". Linia = kontener 72rem + (tresc - odstep) * 0.82 / 1.82, odstep = clamp(3rem, 5vw, 5rem)
   (kolumny 0.82fr/1fr z „Nasze biura"). Od 1024 px: zdjecie biura konczy sie na linii (bylo 45% kontenera, czyli szersze),
   tekst panelu O biurze zaczyna sie po tym samym odstepie co tekst „Nasze biura", kreski Korzysci stoja na linii.
   Zdjecie z dwoma panami bez zmian. cqw = szerokosc sekcji bez paska przewijania, tak jak liczy sie kontener.
   768-1023 px: tekst O biurze z marginesem 1.5rem jak kontener. */
html body #obiuro-biuro > .opakowanie { container-type: inline-size; }
@media (min-width: 768px) and (max-width: 1023.98px) { html body #obiuro-biuro .panel { padding-left: 1.5rem; } }
@media (min-width: 1024px) {
  html body section#obiuro-biuro .blok-foto { grid-template-columns: calc((100cqw - min(100cqw, 72rem)) / 2 + 1.5rem + (min(100cqw, 72rem) - 3rem - clamp(3rem, 5vw, 5rem)) * 0.82 / 1.82) minmax(0, 1fr) !important; }
  html body #obiuro-biuro .panel { padding-left: clamp(3rem, 5vw, 5rem); }
  html body #pf-wstep .wst-tresc { grid-template-columns: calc((100% - clamp(3rem, 5vw, 5rem)) * 0.82 / 1.82 - 3rem) minmax(0, 1fr); }
}
@media (min-width: 1280px) {
  html body #pf-wstep .wst-tresc { grid-template-columns: calc((100% - clamp(3rem, 5vw, 5rem)) * 0.82 / 1.82 - 4rem) minmax(0, 1fr); }
}
/* SIGMA Kontakt: formularz zaczyna sie w tym samym miejscu co teksty „O biurze" i „Nasze biura" (25.09, linijka).
   Lewa kolumna bez zmian (0.85 / 2 z (tresc - 5rem)), rosnie tylko odstep: poczatek formularza = (tresc - clamp(3rem, 5vw, 5rem)) * 0.82 / 1.82 + clamp(3rem, 5vw, 5rem). */
@media (min-width: 1024px) {
  html body #pf-kontakt .kon-uklad { grid-template-columns: calc((100% - 5rem) * 0.425) minmax(0, 1fr); column-gap: calc((100% - clamp(3rem, 5vw, 5rem)) * 0.82 / 1.82 + clamp(3rem, 5vw, 5rem) - (100% - 5rem) * 0.425); }
}
/* SIGMA Nasze biura (25.09): bez szarego tla pod adresami biur; adresy zaczynaja sie na linii tekstu (bez wciecia), bez efektu najechania */
html body section#s-onas .obz-kafel { background: transparent !important; padding-left: 0 !important; padding-right: 0 !important; }
html body section#s-onas .obz-kafel .obz-kreska { display: none !important; }
@media (hover: hover) and (pointer: fine) { html body section#s-onas .obz-kafel:hover { scale: none !important; } }
/* SIGMA Kontakt (25.09): tekst pod naglowkiem jak akapit w „Nasze biura"; przy miastach czerwone kwadraciki zamiast pinezek;
   przy adresie, telefonie i mailu czerwone ikony 16 px, tekst wszystkich wierszy zaczyna sie w jednej linii */
html body #pf-kontakt .kon-lead { margin: 1.75rem 0 0 !important; max-width: 34rem; font-size: 16px !important; line-height: 1.65 !important; color: #2B2C2E !important; text-wrap: pretty; }
html body #pf-kontakt .kon-biuro .kon-biuro-nazwa { display: grid !important; grid-template-columns: 16px minmax(0, 1fr); column-gap: 0.625rem; align-items: center; }
html body #pf-kontakt .kon-kwadrat { display: block; width: 7px; height: 7px; background: #BF1E28; }
html body #pf-kontakt .kon-biuro p.kon-linia { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 0.625rem; align-items: start; }
html body #pf-kontakt .kon-linia .kon-ikona { display: block; margin-top: 0.3em; color: #09090B; }
/* SIGMA tlo ciut ciemniejsze (25.09): Krok po kroku i Opinie #181A1F -> #141519; kolo pod napisem i przyciemnienie zdjecia biurka w tym samym kolorze (FAQ bez zmian) */
html body #s-kroki { background: #141519 !important; }
html body #s-kroki .usl-tarcza { fill: #141519 !important; }
html body section#pf-opinie-k { background: #141519 !important; }
html:root body section#s-kroki .usl-foto::after { background: rgba(20, 21, 25, 0.97) !important; }
/* SIGMA Kontakt (25.09): kwadraciki przy miastach na tej samej pionowej osi co ikony pod nimi (srodek kolumny 16 px) */
html body #pf-kontakt .kon-biuro-nazwa .kon-kwadrat { justify-self: center; }
/* SIGMA Nasze biura (25.09): kolumna tekstu wychodzi poza prawy margines - do tej samej prawej krawedzi co tekst w „O biurze"
   (40rem od linii tekstu, nie blizej niz 4.5rem od krawedzi ekranu), nigdy wezsza niz kolumna w siatce. Poczatek bez zmian.
   Mocniejsze wysuniecie (do 1.5rem od krawedzi) bylo i zostalo cofniete na prosbe Mateusza. */
html body section#s-onas { container-type: inline-size; }
@media (min-width: 1024px) {
  html body section#s-onas .obz-tresc { justify-self: start; width: max(100%, min(40rem, 100cqw - 4.5rem - ((100cqw - min(100cqw, 72rem)) / 2 + 1.5rem + (min(100cqw, 72rem) - 3rem - clamp(3rem, 5vw, 5rem)) * 0.82 / 1.82 + clamp(3rem, 5vw, 5rem)))); }
}
/* SIGMA Nasze biura (25.09): biura jako 2 kafelki z lekka ramka #D4D4D8 (jak ramki formularza), biale tlo, bez szarego.
   Lewa krawedz pierwszego kafelka na linii tekstu; zewnetrzny blok bez wlasnych odstepow wewnetrznych. */
html body section#s-onas .obz-kafel { padding: 0 !important; }
html body section#s-onas .obz-biura { gap: 1rem !important; }
html body section#s-onas .obz-biura > div { border: 1px solid #D4D4D8; background: #FFFFFF; padding: 1.25rem 1.5rem 1.375rem; }
/* SIGMA Nasze biura (25.09): obok przycisku link „24 opinie na profilu Google" (jak w Opiniach, wersja na biale tlo) zamiast „Zadzwon: 91 431 57 29" */
html body #s-onas .obz-profil { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 15px; font-weight: 500; line-height: 1.4; color: #09090B; text-decoration: none; }
html body #s-onas .obz-profil .obz-g { display: block; flex: 0 0 auto; width: 18px; height: 18px; }
html body #s-onas .obz-profil-tekst { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: #76787C; transition: text-decoration-color 0.3s var(--pf-ease); }
html body #s-onas .obz-strzalka { display: block; flex: 0 0 auto; width: 16px; height: 16px; color: #09090B; transition: transform 0.3s var(--pf-ease); }
@media (hover: hover) and (pointer: fine) {
  html body #s-onas .obz-profil:hover .obz-profil-tekst { text-decoration-color: #BF1E28; }
  html body #s-onas .obz-profil:hover .obz-strzalka { transform: translate(2px, -2px); }
}
html body #s-onas .obz-profil:focus-visible { outline: 2px solid #BF1E28; outline-offset: 4px; }
/* SIGMA Nasze biura (25.09): animacja kafelkow biur jak w dawnym szarym bloku - po najechaniu czerwona kreska u gory wysuwa sie od lewej, kafelek lekko rosnie */
html body section#s-onas .obz-biura > div { position: relative; }
html body section#s-onas .obz-biura > div::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: #BF1E28; transform: scaleX(0); transform-origin: left center; transition: transform 0.45s var(--pf-ease-out); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  html body section#s-onas .obz-biura > div { transition: scale 0.35s var(--pf-ease-out); }
  html body section#s-onas .obz-biura > div:hover { scale: 1.02; }
  html body section#s-onas .obz-biura > div:hover::before { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  html body section#s-onas .obz-biura > div, html body section#s-onas .obz-biura > div::before { transition: none; }
  html body section#s-onas .obz-biura > div:hover { scale: none; }
}
/* SIGMA Opinie (25.09): cudzyslowy w kolorze gwiazdek (zloty #FBBC04, zmienna --op-zolty) */
html body section#pf-opinie-k .op-cudzyslow { color: var(--op-zolty, #FBBC04) !important; -webkit-text-fill-color: var(--op-zolty, #FBBC04) !important; }
/* SIGMA FAQ (25.09): lagodniejsza animacja - podczas zwijania tekst zostaje caly (bez skrotu), zeby wysokosc mogla plynnie zmalec; kolor tekstu przechodzi plynnie */
html:root body main > section#pf-pytania .f7-akord .f7-tekst.f7-zwija { display: block !important; -webkit-line-clamp: none !important; max-height: none !important; }
html:root body main > section#pf-pytania .f7-akord .f7-tekst { transition: color 0.35s ease; }

/* ===== SIGMA nadtytul O biurze jak reszta START ===== */
/* "O biurze" mial 11 px i odstep liter 0.24em; teraz jak pozostale nadtytuly: 14 px / 600 / 0.16em / 1.5, kreska 2 px 5,6 px pod napisem */
html body main section#obiuro-biuro#obiuro-biuro .panel span.panel-nadtytul { font-size: 14px !important; font-weight: 600 !important; line-height: 1.5 !important; letter-spacing: 0.16em !important; padding-bottom: 5.6px !important; }
html body main section#obiuro-biuro#obiuro-biuro .panel span.panel-nadtytul::after { right: 0.16em !important; }
/* ===== SIGMA nadtytul O biurze jak reszta END ===== */

/* ===== SIGMA POPUP (Popup 3) START ===== */
#sigma-popup .p-tlo { position: absolute; inset: 0; z-index: 5; background: rgba(9, 9, 11, 0.52); transition: opacity 0.35s ease; }
#sigma-popup.zamkniete .p-tlo { opacity: 0; pointer-events: none; }
#sigma-popup .p {
  position: absolute; z-index: 10; background: #FFFFFF; color: var(--tekst);
  box-shadow: 0 24px 70px -32px rgba(9, 9, 11, 0.45);
  transition: opacity 0.35s ease, transform 0.5s var(--ease), visibility 0s linear 0s;
}
#sigma-popup.zamkniete .p { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, transform 0.35s var(--ease), visibility 0s linear 0.35s; }
#sigma-popup .nad {
  display: block; position: relative; width: fit-content; max-width: 100%; margin: 0; padding-bottom: 0.35rem;
  font-size: 14px; font-weight: 600; line-height: 1.5; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--nad-kolor);
}
#sigma-popup .nad::after { content: ""; position: absolute; left: 0; right: 0.16em; bottom: 0; height: 2px; background: var(--akcent); }
#sigma-popup .p-tytul { margin: 16px 0 0; font-size: 22px; font-weight: 600; line-height: 1.18; letter-spacing: -0.02em; color: var(--tekst); text-wrap: balance; }
@container sp (min-width: 640px) {#sigma-popup .p-tytul { margin-top: 20px; font-size: 28px; }
 }
#sigma-popup .p-tekst { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--akapit); text-wrap: pretty; }
#sigma-popup .p-maly { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--akapit); text-wrap: pretty; }
#sigma-popup .p-podkr { text-decoration: underline; text-decoration-color: var(--linia); text-underline-offset: 3px; color: var(--tekst); }
#sigma-popup .p-uwaga { margin: 0; font-size: 14px; line-height: 1.6; color: var(--szary); }
#sigma-popup .p-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 18px;
  border: 1px solid var(--akcent); border-radius: 0; background: var(--akcent); color: var(--na-akcencie);
  font-family: var(--sg); font-size: 14px; font-weight: 600; line-height: 1; text-align: center; cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
#sigma-popup .p-btn:hover { background: color-mix(in srgb, var(--akcent) 86%, #000000); border-color: color-mix(in srgb, var(--akcent) 86%, #000000); }
#sigma-popup .p-btn--obrys { background: #FFFFFF; color: var(--akcent); }
#sigma-popup .p-btn--obrys:hover { background: var(--akcent); border-color: var(--akcent); color: var(--na-akcencie); }
#sigma-popup .p-btn--jasny { background: transparent; border-color: rgba(255, 255, 255, 0.55); color: #FFFFFF; }
#sigma-popup .p-btn--jasny:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--ciemny); }
#sigma-popup .p-btn--pelny { width: 100%; }
#sigma-popup .p-btn:focus-visible,
#sigma-popup .p-link:focus-visible { outline: 2px solid var(--tekst); outline-offset: 3px; }
#sigma-popup .p-link {
  padding: 6px 0; border: 0; background: none; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--tekst);
  text-decoration: underline; text-decoration-color: var(--linia); text-underline-offset: 4px;
  transition: text-decoration-color 0.25s;
}
#sigma-popup .p-link:hover { text-decoration-color: var(--akcent); }
#sigma-popup .p-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
#sigma-popup .p-form { display: grid; gap: 16px; margin-top: 24px; }
#sigma-popup .p-rzad { display: grid; gap: 16px; }
@container sp (min-width: 640px) {#sigma-popup .p-rzad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }
#sigma-popup .p-pole { display: grid; gap: 8px; }
#sigma-popup .p-etykieta { font-size: 14px; font-weight: 600; color: var(--tekst); }
#sigma-popup .p-input {
  width: 100%; height: 55px; margin: 0; padding: 14.4px 16px;
  border: 1px solid var(--linia); border-radius: 0; background: #FFFFFF; color: var(--tekst);
  font-family: var(--sg); font-size: 16px; -webkit-appearance: none; appearance: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}
#sigma-popup .p-input::placeholder { color: var(--szary); opacity: 1; }
#sigma-popup .p-input:focus { outline: none; border-color: var(--tekst); box-shadow: inset 0 -2px 0 var(--akcent); }
#sigma-popup .p-zgoda { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.6; color: var(--akapit); cursor: pointer; }
#sigma-popup .p-check {
  flex: none; width: 20px; height: 20px; margin: 2px 0 0; border: 1px solid var(--tekst); border-radius: 0;
  background: #FFFFFF; -webkit-appearance: none; appearance: none; cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
#sigma-popup .p-check:focus-visible,
#sigma-popup .p-switch:focus-visible { outline: 2px solid var(--tekst); outline-offset: 2px; }
#sigma-popup .p-switch {
  position: relative; flex: none; width: 44px; height: 24px; margin: 0; border: 1px solid var(--tekst); border-radius: 0;
  background: #FFFFFF; -webkit-appearance: none; appearance: none; cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s;
}
#sigma-popup .p-switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: var(--tekst); transition: transform 0.3s var(--ease), background-color 0.25s; }
#sigma-popup .p-switch:checked { background: var(--akcent); border-color: var(--akcent); }
#sigma-popup .p-switch:checked::before { transform: translateX(20px); background: #FFFFFF; }
#sigma-popup .p-switch:disabled { cursor: not-allowed; opacity: 0.55; }
#sigma-popup .p-x {
  position: absolute; top: 0; right: 0; z-index: 3; width: 44px; height: 44px;
  border: 0; border-radius: 0; background: var(--jasny); cursor: pointer; transition: background-color 0.25s;
}
@container sp (min-width: 640px) {#sigma-popup .p-x { width: 52px; height: 52px; }
 }
#sigma-popup .p-x::before,
#sigma-popup .p-x::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px;
  background: var(--tekst); transform: translate(-50%, -50%) rotate(45deg); transition: background-color 0.25s;
}
#sigma-popup .p-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
#sigma-popup .p-x:hover { background: var(--tekst); }
#sigma-popup .p-x:hover::before,
#sigma-popup .p-x:hover::after { background: #FFFFFF; }
#sigma-popup .p-x:focus-visible { outline: 2px solid var(--tekst); outline-offset: -4px; }
#sigma-popup .p-x--ciemny { background: rgba(255, 255, 255, 0.08); }
#sigma-popup .p-x--ciemny::before,
#sigma-popup .p-x--ciemny::after { background: #FFFFFF; }
#sigma-popup .p-x--ciemny:hover { background: #FFFFFF; }
#sigma-popup .p-x--ciemny:hover::before,
#sigma-popup .p-x--ciemny:hover::after { background: var(--ciemny); }
#sigma-popup .p-x--ciemny:focus-visible { outline-color: #FFFFFF; }
#sigma-popup .p-ikona { flex: none; display: grid; place-items: center; width: 44px; height: 44px; background: var(--jasny); color: var(--tekst); }
#sigma-popup .p3-form-rzad { display: grid; gap: 8px; }
@container sp (min-width: 640px) {#sigma-popup .p3-form-rzad { grid-template-columns: minmax(0, 1fr) auto; gap: 0; }
#sigma-popup .p3-form-rzad .p-btn { min-height: 55px; padding: 0 22px; }
}
@container sp (max-width: 759px) {#sigma-popup .p3-form-rzad { grid-template-columns: minmax(0, 1fr) auto; gap: 0; }
#sigma-popup .p3-form-rzad .p-btn { min-height: 55px; padding: 0 16px; }
}
#sigma-popup .pgb {
  left: 50%; top: 50%; display: grid; width: min(880px, calc(100% - 32px)); max-height: calc(100% - 24px); overflow: hidden;
  transform: translate(-50%, -50%); background: var(--ciemny); color: #FFFFFF;
}
#sigma-popup.zamkniete .pgb { transform: translate(-50%, calc(-50% + 16px)); }
@container sp (min-width: 760px) {#sigma-popup .pgb { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
 }
#sigma-popup .pgb-foto { position: relative; order: -1; min-height: 380px; overflow: hidden; }
#sigma-popup .pgb-tlo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 55%; }
#sigma-popup .pgb-foto::after { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(21, 17, 29, 0.95); }
@container sp (min-width: 760px) {#sigma-popup .pgb-tlo,
#sigma-popup .pgb-foto::after { display: none; }
 }
@container sp (min-width: 760px) {#sigma-popup .pgb-foto { order: 0; min-height: 0; }
 }
#sigma-popup .pgb-osoba { position: absolute; z-index: 1; top: 14px; left: 50%; width: auto; max-width: none; height: 600px; transform: translateX(-50%); }
@container sp (min-width: 760px) {#sigma-popup .pgb-osoba { top: 28px; height: 151.5%; }
 }
#sigma-popup .pgb-tresc { position: relative; z-index: 2; padding: 20px 20px 18px; }
@container sp (min-width: 760px) {#sigma-popup .pgb-tresc { padding: 48px 40px 40px 44px; }
 }
#sigma-popup .pgb .nad { color: #FFFFFF; }
#sigma-popup .pgb-rabat { display: flex; align-items: flex-end; gap: 14px; margin: 16px 0 0; font-weight: 600; }
@container sp (min-width: 760px) {#sigma-popup .pgb-rabat { margin-top: 22px; }
 }
#sigma-popup .pgb-proc { font-size: 2.4rem; line-height: 0.98; letter-spacing: -0.03em; color: #FFFFFF; font-variant-numeric: tabular-nums; }
@container sp (min-width: 760px) {#sigma-popup .pgb-proc { font-size: 3.75rem; }
 }
#sigma-popup .pgb-rabat-opis { padding-bottom: 3px; font-size: 16px; font-weight: 500; line-height: 1.3; color: rgba(255, 255, 255, 0.78); }
#sigma-popup .pgb-tekst { margin: 14px 0 0; max-width: 30rem; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); text-wrap: pretty; }
@container sp (max-width: 759px) {#sigma-popup .pgb-tekst { display: none; }
 }
#sigma-popup .pgb-form { display: grid; gap: 8px; margin-top: 18px; }
@container sp (min-width: 760px) {#sigma-popup .pgb-form { margin-top: 24px; }
 }
#sigma-popup .pgb .p-etykieta { color: #FFFFFF; }
#sigma-popup .pgb .p-input { border-color: #FFFFFF; }
#sigma-popup .pgb-dol { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin-top: 14px; }
#sigma-popup .pgb-od { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; line-height: 1.4; color: rgba(255, 255, 255, 0.72); }
#sigma-popup .pgb-od::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--akcent); }
#sigma-popup .pgb .p-link { color: #FFFFFF; text-decoration-color: rgba(255, 255, 255, 0.4); }
#sigma-popup .pgb .p-link:hover { text-decoration-color: var(--akcent); }
#sigma-popup .pgb .p-btn:focus-visible,
#sigma-popup .pgb .p-link:focus-visible { outline-color: #FFFFFF; }
#sigma-popup .p-zgoda { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 0; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--tekst); cursor: pointer; }
#sigma-popup .p-zgoda input {
  -webkit-appearance: none; appearance: none; flex: 0 0 auto; display: inline-grid; place-content: center;
  width: 16px; height: 16px; margin: 3px 0 0; border: 1px solid #D4D4D8; border-radius: 0; background: #FFFFFF; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
#sigma-popup .p-zgoda input::before { content: ""; width: 9px; height: 9px; background: #FFFFFF; transform: scale(0); transition: transform 0.12s ease-out; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
#sigma-popup .p-zgoda input:hover { border-color: #76787C; }
#sigma-popup .p-zgoda input:checked { background: var(--akcent); border-color: var(--akcent); }
#sigma-popup .p-zgoda input:checked::before { transform: scale(1); }
#sigma-popup .p-zgoda input:focus-visible { outline: 2px solid var(--tekst); outline-offset: 2px; }
#sigma-popup .p-zgoda a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
#sigma-popup .pgb .p-zgoda { color: rgba(255, 255, 255, 0.78); }
#sigma-popup .pgb .p-zgoda input { border-color: #FFFFFF; }
#sigma-popup .pgb .p-zgoda input:checked { border-color: var(--akcent); }
#sigma-popup .pgb .p-zgoda input:focus-visible { outline-color: #FFFFFF; }
@container sp (max-width: 759px) {#sigma-popup .pgb-tresc { padding-top: 18px; padding-bottom: 16px; }
#sigma-popup .pgb-rabat { margin-top: 12px; }
#sigma-popup .pgb-form { margin-top: 14px; }
#sigma-popup .pgb .p-zgoda { margin-top: 0; }
#sigma-popup .pgb-dol { margin-top: 10px; }
}
@keyframes wej-gora { from { opacity: 0; translate: 0 14px; } }
@keyframes wej-lewo { from { opacity: 0; translate: -16px 0; } }
@keyframes pojaw { from { opacity: 0; } }
@keyframes kreska-x { from { scale: 0 1; } }
@keyframes x-wej { from { opacity: 0; scale: 0.6; } }
@keyframes pgb-kurtyna { from { clip-path: inset(0 50% 0 50%); } 70% { clip-path: inset(0 0 0 0); } to { clip-path: inset(-120px); } }
@keyframes pgb-osoba-dol { from { opacity: 0; translate: 0 60px; } }
@keyframes pgb-osoba-bok { from { opacity: 0; translate: 80px 0; } }
@keyframes pgb-proc { from { opacity: 0; scale: 0.4; } 70% { opacity: 1; scale: 1.06; } }
@keyframes pgb-kwadrat { from { scale: 0; rotate: 135deg; } }
@media (prefers-reduced-motion: no-preference) {#sigma-popup.gra .p-x { animation: x-wej 0.45s var(--ease) 0.5s backwards; }
#sigma-popup.gra .pgb { animation: pgb-kurtyna 0.9s cubic-bezier(0.65, 0, 0.35, 1) backwards; }
#sigma-popup.gra .pgb-osoba { animation: pgb-osoba-dol 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards; }
  @container sp (min-width: 760px) {#sigma-popup.gra .pgb-osoba { animation-name: pgb-osoba-bok; }
 }
#sigma-popup.gra .pgb-tresc > .nad { animation: wej-gora 0.5s var(--ease) 0.3s backwards; }
#sigma-popup.gra .pgb-tresc > .nad::after { transform-origin: left center; animation: kreska-x 0.6s cubic-bezier(0.65, 0, 0.35, 1) 0.55s backwards; }
#sigma-popup.gra .pgb-proc { transform-origin: left bottom; animation: pgb-proc 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s backwards; }
#sigma-popup.gra .pgb-rabat-opis { animation: wej-lewo 0.6s var(--ease) 0.7s backwards; }
#sigma-popup.gra .pgb-tekst { animation: wej-gora 0.6s var(--ease) 0.62s backwards; }
#sigma-popup.gra .pgb-form { animation: wej-gora 0.6s var(--ease) 0.72s backwards; }
#sigma-popup.gra .pgb-dol { animation: pojaw 0.6s ease 0.85s backwards; }
#sigma-popup.gra .pgb-od::before { animation: pgb-kwadrat 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1s backwards; }
}

/* Sigma: kolory strony (czerwien #BF1E28, czern #09090B) i wlasciciel z hero Sigmy od glowy do skrzyzowanych rak
   (rece zajmuja 92 % szerokosci zdjecia, wiec okno nie moze go przycinac z bokow) */
#sigma-popup {
  --akcent: #BF1E28; --na-akcencie: #FFFFFF; --ciemny: #09090B; --karta: #1E1E22; --otwarte: #181A1F; --jasny: #F3F4F7;
  --tekst: #09090B; --akapit: #2B2C2E; --szary: #76787C; --linia: #D4D4D8; --nad-kolor: #09090B;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --sg: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  position: fixed; inset: 0; z-index: 1200; container: sp / inline-size; isolation: isolate;
  font-family: var(--sg); font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--tekst); text-align: left;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
#sigma-popup[hidden] { display: none !important; }
#sigma-popup *, #sigma-popup *::before, #sigma-popup *::after { box-sizing: border-box; }
#sigma-popup svg { display: block; flex: none; }
#sigma-popup h3, #sigma-popup p { margin-left: 0; margin-right: 0; }
#sigma-popup button, #sigma-popup input { font-family: var(--sg); }
#sigma-popup.natychmiast, #sigma-popup.natychmiast * { transition: none !important; }
html.sp-otwarty { overflow: hidden; }
#sigma-popup .sp-pulapka { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
#sigma-popup .pgb-foto::after { background: rgba(9, 9, 11, 0.95); }
#sigma-popup .pgb-osoba { top: 14px; height: 460px; }
@container sp (min-width: 760px) { #sigma-popup .pgb-osoba { top: 28px; height: 117%; } }
/* niskie telefony (np. 375 x 667): nizsze zdjecie, zeby cale okno z "Nie, dziekuje" miescilo sie bez przewijania;
   gdyby i tak bylo za wysokie, okno sie przewija zamiast ucinac dol (w Popupie 3 bylo overflow: hidden) */
#sigma-popup .pgb { overflow-y: auto; }
@media (max-height: 720px) and (max-width: 759px) {
  #sigma-popup .pgb-foto { min-height: 320px; }
  #sigma-popup .pgb-osoba { height: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  #sigma-popup *, #sigma-popup *::before, #sigma-popup *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
/* ===== SIGMA POPUP END ===== */

/* ===== przeniesione z <style> w index.html (walidator W3C) ===== */
@media (min-width: 1024px) { main #pf-uslugi .usl-h2 { font-size: clamp(2.75rem, 3.9vw, 3.125rem) !important; } }

/* ===== SIGMA Poradnik: jadaca kolumna START ===== */
/* 27.09.2026: Poradnik - kolumna "najnowsze wpisy" jedzie razem z przewijaniem listy (od 1024 px, gdy stoi obok listy).
   96 px od gory (pod przyklejonym naglowkiem 69 px); na niskim ekranie skrypt ustawia mniejszy odstep, zeby cala byla widoczna. */
@media (min-width: 1024px) {
  #poradnik .pr-bok { position: sticky; top: var(--pr-bok-top, 96px); align-self: start; }
}
/* ===== SIGMA Poradnik: jadaca kolumna END ===== */