/* czcionki z serwera strony (bez Google Fonts), 1:1 jak Google: osobny blok na grubosc, latin-ext + latin */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url(../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: 300; font-display: swap; src: url(../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: 400; font-display: swap; src: url(../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(../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(../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(../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(../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(../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(../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(../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(../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(../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(../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(../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(../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(../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(../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(../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; }
/* ===== 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: #172B4D; 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,.14); overflow: hidden; }
.pre-pasek-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; background-image: linear-gradient(115deg, #172B4D 0%, #172B4D 10%, #22406E 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: #22406E; color: #fff; }
.bg-brand { background-image: linear-gradient(115deg, #172B4D 0%, #172B4D 10%, #22406E 100%); }
.text-brand { background-image: linear-gradient(120deg, #172B4D 0%, #1c3d78 30%, #2153b5 65%, #22406E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ring-brand:focus-visible { outline: 2px solid #22406E; 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: #172B4D;
border-color: #172B4D;
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 #d4d4d8; }
.glossary-term {
position: relative;
display: inline;
border-bottom: 1px dotted #22406E;
color: #18181b;
cursor: help;
text-decoration: none;
}
.glossary-term:focus-visible {
outline: 2px solid #22406E;
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 #e4e4e7;
background: #ffffff;
color: #3f3f46;
box-shadow: 0 18px 40px -24px rgba(24, 24, 27, 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 #e4e4e7;
border-bottom: 1px solid #e4e4e7;
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: #18181b; }
.marquee-text i { font-style: normal; color: #22406E; 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, #172B4D 0%, #172B4D 10%, #22406E 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: #22406E;
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: #a1a1aa; }
.offer-row:not(.is-active) .offer-toggle:hover .toggle-pill { border-color: #18181b; }
/* Active state colors */
.offer-row.is-active .offer-toggle h3 {
background-image: linear-gradient(120deg, #172B4D 0%, #1c3d78 30%, #2153b5 65%, #22406E 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.offer-row.is-active .toggle-pill {
background-image: linear-gradient(115deg, #172B4D 0%, #172B4D 10%, #22406E 100%);
border-color: transparent; color: #fff;
}
/* Phone tab bar — aktywna vs nieaktywna */
.phone-tab .tab-icon { color: #a1a1aa; }
.phone-tab .tab-label { color: #a1a1aa; font-weight: 500; }
.phone-tab:hover .tab-icon { background-color: #f4f4f5; color: #52525b; }
.phone-tab.is-active .tab-icon {
background-image: linear-gradient(115deg, #172B4D 0%, #172B4D 10%, #22406E 100%);
color: #fff;
box-shadow: 0 10px 18px -10px rgba(251,54,64,0.9);
}
.phone-tab.is-active .tab-label { color: #18181b; font-weight: 600; }
/* ── Terminal blocks (light & dark) ── */
.dark-terminal { background: #172B4D; border: 1px solid #27272a; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); overflow: hidden; display: flex; flex-direction: column; }
.dark-terminal .terminal-bar { display: flex; align-items: center; gap: 7px; padding: 10px 16px; background: #18181b; border-bottom: 1px solid #27272a; }
.dark-terminal .terminal-dot { width: 11px; height: 11px; border-radius: 50%; }
.dark-terminal .terminal-dot--red { background: #ff5f56; }
.dark-terminal .terminal-dot--yellow { background: #ffbd2e; }
.dark-terminal .terminal-dot--green { background: #27c93f; }
.dark-terminal .terminal-body { padding: 20px 22px; font-family: 'Consolas', 'SF Mono', 'Fira Code', monospace; font-size: 13px; line-height: 1.75; color: #a1a1aa; background: #172B4D; flex: 1; }
.dark-terminal .terminal-prompt { color: #22c55e; font-weight: 600; }
.dark-terminal .terminal-path { color: #3b82f6; }
.dark-terminal .terminal-bling { color: #fbbf24; }
.dark-terminal .terminal-comment { color: #52525b; }
.dark-terminal .terminal-string { color: #38bdf8; }
.dark-terminal .terminal-keyword { color: #c084fc; font-weight: 600; }
.dark-terminal .terminal-fn { color: #60a5fa; }
.light-terminal { background: #ffffff; border: 1px solid #e4e4e7; border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 30px -12px rgba(0,0,0,0.08); overflow: hidden; display: flex; flex-direction: column; }
.light-terminal .terminal-bar { display: flex; align-items: center; gap: 7px; padding: 10px 16px; background: #fafafa; border-bottom: 1px solid #f4f4f5; }
.light-terminal .terminal-dot { width: 11px; height: 11px; border-radius: 50%; }
.light-terminal .terminal-dot--red { background: #ff5f56; }
.light-terminal .terminal-dot--yellow { background: #ffbd2e; }
.light-terminal .terminal-dot--green { background: #27c93f; }
.light-terminal .terminal-body { padding: 20px 22px; font-family: 'Consolas', 'SF Mono', 'Fira Code', monospace; font-size: 13px; line-height: 1.75; color: #3f3f46; background: #ffffff; flex: 1; overflow-x: auto; }
.light-terminal .terminal-prompt { color: #22406E; font-weight: 600; }
.light-terminal .terminal-path { color: #22406E; }
.light-terminal .terminal-bling { color: #172B4D; }
.light-terminal .terminal-comment { color: #a1a1aa; }
.light-terminal .terminal-string { color: #22406E; }
.light-terminal .terminal-keyword { color: #22406E; font-weight: 600; }
.light-terminal .terminal-fn { color: #22406E; }
.terminal-cursor { display: inline-block; width: 8px; height: 17px; background: #22406E; 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:#18181b;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 #e4e4e7;background:rgba(255,255,255,.96);box-shadow:0 24px 60px -30px rgba(24,24,27,.35);backdrop-filter:blur(18px);pointer-events:auto}
.cookie-consent-banner__title,.cookie-consent-modal__title{margin:0;color:#18181b;font-size:18px;font-weight:650;line-height:1.25}
.cookie-consent-banner__text,.cookie-consent-modal__text{margin:8px 0 0;color:#52525b;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 #18181b;border-radius:999px;padding:10px 18px;background:#fff;color:#18181b;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:#22406E;color:#22406E}
.cookie-consent-button:focus-visible,.cookie-consent-link:focus-visible,.cookie-consent-trigger:focus-visible{outline:2px solid #22406E;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,#172B4D 0%, #172B4D 10%, #22406E 100%);color:#fff;box-shadow:0 14px 24px -16px rgba(251,54,64,.8)}
.cookie-consent-button--primary:hover{border-color:transparent;background:linear-gradient(115deg,#172B4D 0%, #172B4D 10%, #22406E 100%);color:#fff;box-shadow:0 18px 30px -18px rgba(251,54,64,.95)}
.cookie-consent-button--neutral{border-color:#22406E;background:#fff;color:#22406E;box-shadow:inset 0 0 0 1px rgba(251,54,64,.28)}
.cookie-consent-button--neutral:hover{border-color:#22406E;background:#f4f4f5;color:#22406E}
.cookie-consent-button--ghost{border-color:#d4d4d8;color:#22406E}
.cookie-consent-button--ghost:hover{border-color:#172B4D;background:#f4f4f5;color:#22406E}
.cookie-consent-modal{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(24,24,27,.52)}
.cookie-consent-modal__dialog{width:min(100%,640px);max-height:calc(100vh - 48px);overflow:auto;border:1px solid #e4e4e7;background:#fff;box-shadow:0 24px 70px -32px rgba(0,0,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 #f4f4f5}
.cookie-consent-modal__close{display:inline-flex;width:38px;height:38px;flex:0 0 auto;align-items:center;justify-content:center;border:1px solid #e4e4e7;border-radius:999px;background:#fff;color:#52525b;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 #e4e4e7;background:#fafafa}
.cookie-consent-option input{width:20px;height:20px;margin-top:2px;accent-color:#22406E}
.cookie-consent-option__title{display:block;color:#18181b;font-size:15px;font-weight:650;line-height:1.3}
.cookie-consent-option__text{display:block;margin-top:4px;color:#52525b;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 #f4f4f5}
.cookie-consent-link{border:0;padding:0;background:transparent;color:inherit;font:inherit;text-decoration:none;cursor:pointer}
.cookie-consent-link:hover{color:#3f3f46}
.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 #e4e4e7;border-radius:999px;background:#fff;color:#22406E;box-shadow:0 16px 36px -22px rgba(24,24,27,.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: #18181b; }
/* ── "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:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--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:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--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 #e5e7eb;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:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;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:76.75rem}.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(230,0,61,.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(230,0,61,.05) var(--tw-gradient-from-position);--tw-gradient-to:rgba(230,0,61,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-\[\#e6003d\]\/10{--tw-gradient-to:rgba(230,0,61,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(230,0,61,.1) var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-\[\#e6003d\]\/20{--tw-gradient-to:rgba(230,0,61,.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(230,0,61,.1)}.text-\[\#e6003d\]\/20{color:rgba(230,0,61,.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(230,0,61,.8);--tw-shadow-colored:0 10px 18px -10px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_14px_24px_-14px_rgba\(230\2c 0\2c 61\2c 0\.7\)\]{--tw-shadow:0 14px 24px -14px rgba(230,0,61,.7);--tw-shadow-colored:0 14px 24px -14px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_14px_28px_-14px_rgba\(230\2c 0\2c 61\2c 0\.6\)\]{--tw-shadow:0 14px 28px -14px rgba(230,0,61,.6);--tw-shadow-colored:0 14px 28px -14px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_18px_30px_-14px_rgba\(230\2c 0\2c 61\2c 0\.6\)\]{--tw-shadow:0 18px 30px -14px rgba(230,0,61,.6);--tw-shadow-colored:0 18px 30px -14px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),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 #0000)}.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(230,0,61,.7);--tw-shadow-colored:0 22px 40px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),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: #172B4D !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: #e4e4e7 !important; }
.sekcja-ciemna .text-zinc-400 { color: #d4d4d8 !important; }
.sekcja-ciemna .text-zinc-300 { color: #d4d4d8 !important; }
.sekcja-ciemna .border-zinc-200,
.sekcja-ciemna .border-zinc-300,
.sekcja-ciemna .md\:border-zinc-200 { border-color: #27272a !important; }
.sekcja-ciemna .bg-zinc-200 { background-color: #27272a !important; }
.sekcja-ciemna .bg-white { background-color: #18181b !important; }
.sekcja-ciemna .ring-zinc-200\/50 { --tw-ring-color: #27272a !important; }
.sekcja-ciemna .group:hover .bg-white { background-color: #27272a !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: #ffffff !important; }
/* Hero: drugi przycisk biały z czarnym napisem (06.09.2026) */
#top .przycisk-bialy { background-color: #ffffff !important; border-color: #ffffff !important; color: #18181b !important; }
#top .przycisk-bialy:hover, #top .przycisk-bialy:focus-visible { background-color: #e4e4e7 !important; border-color: #e4e4e7 !important; color: #18181b !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: #22406E !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: #ffffff !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: #22406E; 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 #22406E !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,") 0 0 / 160px 160px repeat, linear-gradient(90deg, #22406E 0%, #22406E 25%, #4b5563 100%); color: #ffffff; }
#zyskujesz .kafle > div:nth-child(5) { background: #e4e4e7; color: #172B4D; }
#zyskujesz .kafle > div:nth-child(5) p { color: #3f3f46 !important; }
#zyskujesz .kafle > div:nth-child(4) > .flex > div { color: #ffffff !important; }
#zyskujesz .kafle > div:nth-child(4) p { color: rgba(255,255,255,0.86) !important; }
#zyskujesz .kafle > div { padding: 2rem 2rem 2.25rem !important; border: 0 !important; background: #ffffff; color: #172B4D; }
#zyskujesz .kafle > div:nth-child(2) { background: #172B4D; color: #ffffff; }
#zyskujesz .kafle > div:nth-child(3) { background: #22406E; 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: #22406E !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: #52525b !important; }
#zyskujesz .kafle > div:nth-child(2) p, #zyskujesz .kafle > div:nth-child(3) p { color: rgba(255,255,255,0.86) !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(23, 43, 77, 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: #f4f4f5 !important; }
#oferta-lista, #faq, #zyskujesz, footer .relative.overflow-hidden { background: #ffffff !important; }
#proces, #liczby { background: #172B4D !important; color: #ffffff !important; }
#proces .karta { background: #0f2354 !important; border: 0 !important; box-shadow: none !important; }
#proces .text-brand, #liczby .text-brand { background-image: linear-gradient(120deg, #172B4D 0%, #22406E 100%) !important; }
#liczby .duza, #liczby .podpis, #liczby h2 { color: #ffffff !important; } #liczby .opis p { color: rgba(255,255,255,0.8) !important; }
#opinie .ocena { border-color: #172B4D !important; }
#korzysci .karta:not(.karta--niebieska):not(.karta--granat) { background: #ffffff; }
#zyskujesz .kafle > div:first-child { border: 2px solid #22406E !important; }
#zyskujesz .kafle > div:nth-child(4) { background: linear-gradient(115deg, #172B4D 0%, #22406E 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: #22406E !important; -webkit-text-fill-color: #22406E !important; }
.bg-brand, .cta-roll.bg-brand { background-image: none !important; background-color: #22406E !important; }
.kreska-anim::after { background-image: none !important; background-color: #22406E !important; }
#etapy .text-brand { color: #7c9fe8 !important; -webkit-text-fill-color: #7c9fe8 !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: #172B4D; /* UWAGA: nazwa historyczna - to GRANAT marki, nie czern */
--pf-grafit: #22406E; /* jasniejszy granat */
--pf-grafit-2: #2A4C82;
--pf-czarny: #09090b; /* prawdziwa czern (sekcje czarne, stopka) */
--pf-akcent: #CC9A4E; /* koral - tylko w detalach */
--pf-akcent-h: #B3843C;
--pf-biel: #FFFFFF;
--pf-mgla: #F0F2F6;
--pf-linia: #E3E7EE;
--pf-linia-ciemna: rgba(255, 255, 255, 0.12);
--pf-tekst: #3D4654;
--pf-tekst-2: #6B7482;
--pf-naglowek: #09090b; /* naglowki na jasnym tle: czern; na ciemnym biel */
--pf-granat-93: rgba(23, 43, 77, 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: 76.75rem; 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 (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: rgba(255, 255, 255, 0.72); }
/* 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; }
}
/* Zasady wspolpracy w ukladzie "Nasze specjalizacje" z 2 One (reguly 1:1), kolory Uriosa */
#u-zasady {
--op-biel: #FFFFFF; --op-tekst: #3F3F46; --op-linia: #E4E4E7; --op-mgla: #F0F2F6;
--op-czerwien: #CC9A4E; /* akcent Uriosa (w 2 One czerwien): kreski przy kaflach, numery */
--op-czern: #09090B; /* tytuly kafli czarne jak naglowki Uriosa */
--op-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --op-ease-out: cubic-bezier(0.16, 0.84, 0.28, 1);
}
#u-zasady { --dla-wciecie: 1.5rem; position: relative; background: var(--op-biel); color: var(--op-tekst); overflow-x: clip; }
#u-zasady .dla-uklad { display: grid; grid-template-columns: minmax(0px, 1fr); row-gap: 2.75rem; }
#u-zasady .dla-glowa { min-width: 0px; }
#u-zasady .dla-h2 { margin-top: 1.25rem; }
#u-zasady .dla-prawa { min-width: 0px; }
#u-zasady .dla-argumenty { position: relative; min-width: 0px; margin: 0px; padding: 0px; list-style: none; }
#u-zasady .dla-argumenty::before { content: ""; position: absolute; left: 0px; top: 0px; bottom: 0px; width: 2px; background: var(--op-czerwien); transform: scaleY(0); transform-origin: center top; transition: transform 1.2s var(--op-ease-out) 0.15s; pointer-events: none; }
#u-zasady.op-widoczne .dla-argumenty::before { transform: scaleY(1); }
#u-zasady .dla-arg { display: grid; grid-template-columns: minmax(0px, 1fr); grid-template-areas: "nr" "tresc"; row-gap: 0.5rem; padding: 1.75rem 0 1.75rem var(--dla-wciecie); font-size: 16px !important; line-height: 1.65 !important; }
#u-zasady .dla-arg + .dla-arg { border-top: 1px solid var(--op-linia); }
#u-zasady .dla-arg:first-child { padding-top: 0px; }
#u-zasady .dla-arg:last-child { padding-bottom: 0px; }
#u-zasady .dla-nr { grid-area: nr; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2em; color: var(--op-czerwien); font-variant-numeric: tabular-nums; }
#u-zasady .dla-tresc { grid-area: tresc; min-width: 0px; }
#u-zasady .dla-arg .dla-naglowek { font-family: inherit; text-wrap: balance; margin: 0px !important; font-size: clamp(1.2rem, 1.7vw, 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; }
#u-zasady .dla-akapit { margin: 0.75rem 0px 0px; max-width: 32rem; color: var(--op-tekst); text-wrap: pretty; font-size: 16px !important; line-height: 1.65 !important; }
#u-zasady .dla-nz { white-space: nowrap; }
#u-zasady .dla-akcja { margin-top: 2rem; padding-left: var(--dla-wciecie); }
#u-zasady .dla-link { display: inline-flex; align-items: center; gap: 0.6rem; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--op-czern); text-decoration: none; }
#u-zasady .dla-link-tekst { text-decoration: 1px; text-underline-offset: 4px; }
#u-zasady .dla-link:hover .dla-link-tekst, #u-zasady .dla-link:focus-visible .dla-link-tekst { text-decoration: underline; }
#u-zasady .dla-strzalka { flex: 0 0 auto; color: var(--op-czerwien); transition: transform 0.25s; }
#u-zasady .dla-link:hover .dla-strzalka, #u-zasady .dla-link:focus-visible .dla-strzalka { transform: translateX(3px); }
@media (min-width: 768px) { #u-zasady .dla-uklad { row-gap: 3.25rem; } }
@media (min-width: 768px) { #u-zasady .dla-arg { grid-template-columns: 2.75rem minmax(0px, 1fr); grid-template-areas: "nr tresc"; align-items: baseline; gap: 0px; padding-top: 2.25rem; padding-bottom: 2.25rem; } }
@media (min-width: 768px) { #u-zasady .dla-akapit { margin-top: 0.875rem; } }
@media (min-width: 768px) { #u-zasady .dla-akcja { margin-top: 2.25rem; } }
@media (min-width: 1024px) { #u-zasady { --dla-wciecie: 1.75rem; } }
@media (min-width: 1024px) { #u-zasady .dla-uklad { grid-template-columns: minmax(0px, 5fr) minmax(0px, 6fr); gap: 0px 8.3333%; align-items: start; } }
@media (min-width: 1024px) { #u-zasady .dla-h2 { margin-top: 1.5rem; } }
@media (min-width: 1024px) { #u-zasady .dla-arg { padding-top: 2.5rem; padding-bottom: 2.5rem; } }
@media (min-width: 1024px) { #u-zasady .dla-akcja { margin-top: 2.5rem; } }
@media (prefers-reduced-motion: reduce) { #u-zasady .dla-argumenty::before { transform: scaleY(1); transition: none; } }
@media (prefers-reduced-motion: reduce) { #u-zasady .dla-strzalka { transition: none; } }
#u-zasady .dla-argumenty { display: grid; gap: 1rem; }
#u-zasady .dla-arg, #u-zasady .dla-arg:first-child, #u-zasady .dla-arg:last-child { background: var(--op-mgla); padding: 1.75rem 1.5rem 1.75rem 1.75rem; }
#u-zasady .dla-arg + .dla-arg { border-top: 0px; }
@media (min-width: 768px) { #u-zasady .dla-arg, #u-zasady .dla-arg:first-child, #u-zasady .dla-arg:last-child { padding: 2.25rem 2.25rem 2.25rem 2rem; } }
@media (min-width: 1024px) { #u-zasady .dla-arg, #u-zasady .dla-arg:first-child, #u-zasady .dla-arg:last-child { padding: 2.5rem 2.5rem 2.5rem 2.25rem; } }
#u-zasady .dla-argumenty::before { display: none; }
#u-zasady .dla-arg { position: relative; }
#u-zasady .dla-arg::before { content: ""; position: absolute; left: 0px; top: 0px; bottom: 0px; width: 2px; background: var(--op-czerwien); transform: scaleY(0); transform-origin: center top; transition: transform 0.6s ease-out; pointer-events: none; }
#u-zasady .dla-arg:nth-child(1)::before { transition-delay: 0.15s; }
#u-zasady .dla-arg:nth-child(2)::before { transition-delay: 0.6s; }
#u-zasady .dla-arg:nth-child(3)::before { transition-delay: 1.05s; }
#u-zasady.op-widoczne .dla-arg::before { transform: scaleY(1); }
#u-zasady .dla-arg { transition: opacity 0.7s var(--op-ease) calc(var(--op-i, 0) * 110ms),
transform 0.7s var(--op-ease) calc(var(--op-i, 0) * 110ms),
scale 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease; }
@media (hover: hover) and (pointer: fine) { #u-zasady .dla-arg:hover { scale: 1.02; z-index: 2; background: rgb(255, 255, 255); box-shadow: rgba(23, 43, 77, 0.35) 0px 30px 60px -30px; } }
@media (prefers-reduced-motion: reduce) { #u-zasady .dla-arg:hover, #op-korzysci .kor-punkt:hover { scale: none; } }
@media (prefers-reduced-motion: reduce) { #u-zasady .dla-arg::before, #op-opinie .opi-karta--ocena::before { transition: none; transform: none; } }
@media (min-width: 1024px) and (min-height: 560px) { #u-zasady.dla-jedzie .dla-glowa { position: sticky; top: calc(68px + 3rem); } }
#u-zasady .dla-arg:nth-child(4)::before { transition-delay: 1.5s; }
html body #u-zasady > div { padding-bottom: calc(var(--sekcja) / 2) !important; }
/* opis pod naglowkiem (tresc Uriosa, w 2 One go nie ma): odstep jak lead w Uriosie */
#u-zasady .dla-lead { margin-top: 1.75rem; }
/* odstep dolny jak w pozostalych sekcjach Uriosa (w 2 One polowa, bo tam dalej bylo biale "O nas") */
html body #u-zasady > div { padding-bottom: var(--sekcja) !important; }
/* ===== 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("../img/026de1d4ebd18e.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(8, 16, 31, 0.97) 0%,
rgba(10, 19, 36, 0.95) 35%,
rgba(13, 24, 44, 0.92) 55%,
rgba(19, 36, 64, 0.82) 70%,
rgba(23, 43, 77, 0.55) 85%,
rgba(23, 43, 77, 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: 76.75rem;
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: rgba(255, 255, 255, 0.72);
}
#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: rgba(255, 255, 255, 0.72);
}
#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: rgba(255, 255, 255, 0.45); }
#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(8, 16, 31, 0.97) 0%,
rgba(10, 19, 36, 0.965) 22%,
rgba(13, 24, 44, 0.955) 40%,
rgba(16, 30, 54, 0.94) 54%,
rgba(19, 36, 64, 0.90) 64%,
rgba(23, 43, 77, 0.81) 71%,
rgba(23, 43, 77, 0.64) 77%,
rgba(23, 43, 77, 0.42) 82%,
rgba(23, 43, 77, 0.21) 86%,
rgba(23, 43, 77, 0.07) 89%,
rgba(23, 43, 77, 0.00) 92%);
}
#pf-hero .hero-plansza { align-items: flex-end; }
/* tekst do lewej krawedzi kontenera strony (76.75rem + 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(8, 16, 31, 0.97) 0%,
rgba(13, 24, 44, 0.955) 40%,
rgba(19, 36, 64, 0.90) 70%,
rgba(23, 43, 77, 0.84) 82%,
rgba(23, 43, 77, 0.55) 90%,
rgba(23, 43, 77, 0.18) 96%,
rgba(23, 43, 77, 0.00) 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: rgba(255, 255, 255, 0.72);
}
#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: rgba(255, 255, 255, 0.72) !important;
-webkit-text-fill-color: rgba(255, 255, 255, 0.72) !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(23, 43, 77, 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: rgba(255, 255, 255, 0.78);
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: rgba(255, 255, 255, 0.25);
-webkit-text-fill-color: rgba(255, 255, 255, 0.25);
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: rgba(255, 255, 255, 0.78) !important;
-webkit-text-fill-color: rgba(255, 255, 255, 0.78) !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: rgba(255, 255, 255, 0.72) !important;
text-decoration: none;
white-space: nowrap;
}
#pf-kroki .kr-tel strong {
font-weight: 600;
color: #ffffff;
border-bottom: 1px solid rgba(255, 255, 255, 0.35);
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: rgba(255, 255, 255, 0.9); }
#pf-kroki .kr-kafel .kr-opis { color: rgba(255, 255, 255, 0.9) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important; }
#pf-kroki .kr-nr { color: rgba(255, 255, 255, 0.45); -webkit-text-fill-color: rgba(255, 255, 255, 0.45); }
}
/* --- 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: rgba(255, 255, 255, 0.8) !important;
-webkit-text-fill-color: rgba(255, 255, 255, 0.8) !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: rgba(255, 255, 255, 0.9) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !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: #2C3444 !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(23,43,77,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: rgba(255, 255, 255, 0.22);
--op-zolty: #CC9A4E;
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("../img/dce120aa3ce113.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(23, 43, 77, 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: rgba(255, 255, 255, 0.6);
}
#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: rgba(255, 255, 255, 0.4);
transition: text-decoration-color 0.3s var(--pf-ease);
}
#pf-opinie .op-strzalka {
display: block;
flex: 0 0 auto;
width: 16px;
height: 16px;
color: rgba(255, 255, 255, 0.7);
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 rgba(255, 255, 255, 0.14);
}
#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: rgba(255, 255, 255, 0.6);
}
#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 rgba(255, 255, 255, 0.14);
}
}
/* --- 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 rgba(255, 255, 255, 0.14);
}
}
@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: rgba(255, 255, 255, 0.84) !important;
-webkit-text-fill-color: rgba(255, 255, 255, 0.84) !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), #000 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 "Aktualności" + 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 #172B4D 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/).
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(23,43,77,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("../img/8236086470c0c9.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(23, 43, 77, 0.90);
}
/* 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: rgba(255, 255, 255, 0.78);
}
/* 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 #d4d4d8;
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: #a1a1aa; }
#pf-kontakt input:focus, #pf-kontakt textarea:focus {
outline: none;
border-color: var(--pf-czern);
box-shadow: 0 0 0 3px rgba(204, 154, 78, 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; }
}
/* URIOS UKLAD: naprzemienne tla (b = biale, n = granat #172B4D jak opinie) */
/* proces: wlasny gradient (wczesniej wspolny z korzysciami w bloku .u-duo) */
html body section#op-proces { background: linear-gradient(135deg, #0E1C35 0%, #16294A 26%, #1D3762 50%, #16294A 74%, #0E1C35 100%) !important; }
/* biuro: bez dodatkowego tla - zdjecie + granatowy panel juz robia sekcje niebieska (Mateusz) */
/* o nas: bez zmian (Mateusz: szaro-niebieska, nierowna - zostaje jak w Uriosie) */
/* korzysci: biale tlo, napisy ciemne */
/* ODSTEPY po zmianie kolejnosci (zasada dem: 112 px przy zmianie tla, 56 + 56 miedzy sekcjami o tym samym tle) */
html body main section#pf-zalety > :first-child { padding-bottom: calc(var(--sekcja) / 2) !important; } /* korzysci -> o nas (oba biale) */
html body main section#op-proces > :first-child { padding-bottom: var(--sekcja) !important; } /* proces (granat) -> FAQ (biale) */
html body main section#pf-pytania > :first-child { padding-bottom: var(--sekcja) !important; } /* FAQ (biale) -> opinie (granat) */
html body main section#pf-poradnik > :first-child { padding-top: var(--sekcja) !important; } /* opinie (granat) -> blog (biale) */
/* MENU 8 pozycji: odstep 24 px (bylo 36), bez lamania; pelne menu od 1200 px, ponizej hamburger (inaczej nie miesci sie obok logo, przycisku i znaczka) */
html body #menu-glowne ul { column-gap: 24px !important; }
html body #menu-glowne a { white-space: nowrap; }
html body #site-header > div:first-child > a:first-child { flex-shrink: 0; }
@media (max-width: 1199.98px) {
html body #menu-glowne, html body .naglowek-cta { display: none !important; }
html body #nav-toggle { display: inline-flex !important; }
html body #mobile-menu:not(.hidden) { display: block !important; }
}
@media (min-width: 1200px) { html body #mobile-menu { display: none !important; } }
html body section#pf-zalety.ux-biale { background: #ffffff !important; color: #3F3F46; }
html body section#pf-zalety.ux-biale .zl-nazwa { color: #09090B !important; -webkit-text-fill-color: #09090B !important; }
html body section#pf-zalety.ux-biale .zl-opis { color: #3F3F46 !important; -webkit-text-fill-color: #3F3F46 !important; }
html body section#pf-zalety.ux-biale .zl-poz::before { background: #E4E4E7 !important; } /* linie miedzy punktami jak w bialych sekcjach Uriosa */
/* korzysci: opisy maks. 2 linie - od 640 do 1199 px jedna kolumna na cala szerokosc (w dwoch kolumnach tekst lamal sie na 3 linie) */
@media (min-width: 640px) and (max-width: 1199.98px) { html body section#pf-zalety .zl-lista { grid-template-columns: minmax(0, 1fr) !important; } html body section#pf-zalety .zl-opis { max-width: none !important; } }
:root body main section#pf-pytania#pf-pytania .pf-nadtytul { margin-bottom: 1.75rem; }
/* TAX24: kolory TAX24 (granat + niebieski z logo #CC9A4E zamiast koralu Machaly) */
/* FAQ w stylu "Zasady wspolpracy" (lewa: naglowek + opis + przycisk, prawa: bialy kafel z cieniem, granatowe kwadraciki, ciemne kreski) */
:root body main section#pf-pytania#pf-pytania.fq-sekcja { background: #FFFFFF !important; }
#pf-pytania .fq-kontener { max-width: 76.75rem; margin-inline: auto; padding-inline: 1.5rem; box-sizing: border-box; }
#pf-pytania .fq-uklad { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
@media (min-width: 1024px) { #pf-pytania .fq-uklad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4.5rem; align-items: start; } #pf-pytania .fq-lewa { position: sticky; top: calc(68px + 2rem); } }
:root body main section#pf-pytania .fq-h2 { margin: 0 !important; font-family: "Space Grotesk", sans-serif; font-size: 2.6rem !important; line-height: 0.98 !important; letter-spacing: -0.05em !important; font-weight: 600 !important; color: #09090B !important; -webkit-text-fill-color: #09090B !important; text-wrap: balance; }
:root body main section#pf-pytania .fq-h2 span { display: block; color: inherit !important; -webkit-text-fill-color: inherit !important; }
@media (min-width: 640px) { :root body main section#pf-pytania .fq-h2 { font-size: 3.75rem !important; } }
:root body main section#pf-pytania .fq-lead { margin: 1.75rem 0 0 !important; max-width: 34rem; font-size: 17px !important; line-height: 1.65 !important; color: #52525B !important; }
#pf-pytania .fq-przycisk { display: inline-flex; align-items: center; min-height: 40px; margin-top: 2.25rem; padding: 9.5px 22px; box-sizing: border-box; background: #CC9A4E; color: #fff !important; font: 500 14px/21px "Space Grotesk", sans-serif; text-decoration: none; box-shadow: 0 18px 30px -16px rgba(204, 154, 78, 0.45); transition: background-color .25s; }
#pf-pytania .fq-przycisk:hover, #pf-pytania .fq-przycisk:focus-visible { background: #B3843C; }
#pf-pytania .fq-kafel { background: #fff; padding: 25px 2.5rem; /* gora i dol o ~5 mm nizsze niz 44 px (Mateusz 25.09: -3 mm, potem -2 mm) */ box-shadow: 0 40px 80px -40px rgba(23, 43, 77, 0.28), 0 2px 10px rgba(23, 43, 77, 0.05); }
#pf-pytania .fq-lista { list-style: none; margin: 0; padding: 0; }
:root body main section#pf-pytania .fq-poz { margin: 0; padding: 1.75rem 0; font-size: 16px !important; }
:root body main section#pf-pytania .fq-poz::before, :root body main section#pf-pytania .fq-poz::marker { content: none; }
#pf-pytania .fq-poz + .fq-poz { border-top: 1px solid #09090B; }
#pf-pytania .fq-poz:first-child { padding-top: 0; }
#pf-pytania .fq-poz:last-child { padding-bottom: 0; }
#pf-pytania .fq-nr { flex: 0 0 auto; display: inline-grid; place-items: center; width: 36px; height: 36px; background: #172B4D; color: #fff; font: 500 15px/1 "Space Grotesk", sans-serif; font-variant-numeric: tabular-nums; transition: background-color .3s; }
:root body main section#pf-pytania .fq-pyt { display: block; font-family: "Space Grotesk", sans-serif; font-size: clamp(1.2rem, 1.9vw, 1.55rem) !important; font-weight: 500 !important; line-height: 1.22 !important; letter-spacing: -0.015em; color: #09090B !important; -webkit-text-fill-color: #09090B !important; text-align: left; text-wrap: balance; }
:root body main section#pf-pytania .fq-odp { margin: 0.8rem 0 0 !important; font-size: 16px !important; line-height: 1.7 !important; color: #52525B !important; text-wrap: pretty; }
/* A */
#pf-pytania .fq-a { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 36px minmax(0, 1fr) 24px; column-gap: 1.25rem; align-items: start; width: 100%; }
#pf-pytania .fq-a .fq-pyt { padding-top: 3px; }
#pf-pytania .fq-plus { position: relative; width: 24px; height: 24px; margin-top: 6px; }
#pf-pytania .fq-plus::before, #pf-pytania .fq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: #172B4D; transform: translate(-50%, -50%); transition: opacity .3s; }
#pf-pytania .fq-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
#pf-pytania .fq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; padding-left: calc(36px + 1.25rem); }
#pf-pytania .fq-panel > div { overflow: hidden; }
#pf-pytania .fq-otw .fq-panel { grid-template-rows: 1fr; }
#pf-pytania .fq-otw .fq-nr { background: #CC9A4E; }
#pf-pytania .fq-otw .fq-plus::after { opacity: 0; }
/* B */
#pf-pytania .fq-b { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 36px minmax(0, 1fr) 20px; column-gap: 1.25rem; align-items: center; width: 100%; }
#pf-pytania .fq-war-B .fq-poz { padding: 1.35rem 0; }
#pf-pytania .fq-war-B .fq-poz:first-child { padding-top: 0; }
#pf-pytania .fq-strz { color: #172B4D; transition: transform .25s, color .25s; }
#pf-pytania .fq-war-B .fq-otw .fq-nr { background: #CC9A4E; }
#pf-pytania .fq-war-B .fq-otw .fq-strz { color: #CC9A4E; transform: translateX(4px); }
#pf-pytania .fq-bodp { margin-top: 2rem; background: #172B4D; padding: 1.75rem 2rem 2rem; }
#pf-pytania .fq-et { font: 600 12px/1.4 "Space Grotesk", sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,.62); }
#pf-pytania .fq-et b { color: #CC9A4E; font-weight: 600; }
:root body main section#pf-pytania .fq-bodp p { margin: 0.75rem 0 0 !important; font-size: 16px !important; line-height: 1.7 !important; color: rgba(255,255,255,.88) !important; min-height: 8.5em; }
/* C */
#pf-pytania .fq-c { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 1.25rem; align-items: start; }
#pf-pytania .fq-c .fq-pyt { padding-top: 3px; }
#pf-pytania .fq-reszta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
#pf-pytania .fq-reszta > span { overflow: hidden; }
#pf-pytania .fq-otw .fq-reszta { grid-template-rows: 1fr; }
#pf-pytania .fq-wiecej { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.85rem; font: 500 14px/1.4 "Space Grotesk", sans-serif; color: #172B4D; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
#pf-pytania .fq-wiecej:hover { color: #CC9A4E; }
#pf-pytania .fq-pm { display: inline-block; transition: transform .25s; }
#pf-pytania .fq-otw .fq-pm { transform: rotate(45deg); }
@media (max-width: 600px) { #pf-pytania .fq-kafel { padding: 14px 1.25rem; } }
/* telefon: numer i plus w wierszu nad pytaniem, pytanie na cala szerokosc kafla - dalej dwa wiersze, pismo dopasowane do ekranu */
@media (max-width: 639.98px) {
#pf-pytania .fq-w { display: block; white-space: nowrap; }
:root body main section#pf-pytania#pf-pytania .fq-pyt { font-size: min(17px, calc((100vw - 88px) / 16.5)) !important; padding-top: 0 !important; }
#pf-pytania .fq-a, #pf-pytania .fq-b { grid-template-columns: 36px minmax(0, 1fr) 24px; grid-template-areas: "nr . znak" "pyt pyt pyt"; row-gap: 0.85rem; }
#pf-pytania .fq-a .fq-nr, #pf-pytania .fq-b .fq-nr { grid-area: nr; }
#pf-pytania .fq-a .fq-pyt, #pf-pytania .fq-b .fq-pyt { grid-area: pyt; }
#pf-pytania .fq-plus, #pf-pytania .fq-strz { grid-area: znak; align-self: center; margin-top: 0; }
#pf-pytania .fq-panel { padding-left: 0; }
#pf-pytania .fq-c { grid-template-columns: minmax(0, 1fr); row-gap: 0.85rem; }
}
/* pytania zawsze w DWOCH wierszach (Mateusz 25.09): kazda polowa w jednym wierszu, pismo dobrane do szerokosci kolumny */
@media (min-width: 640px) { #pf-pytania .fq-w { display: block; white-space: nowrap; } :root body main section#pf-pytania#pf-pytania .fq-pyt { font-size: 20px !important; } }
@media (min-width: 1024px) and (max-width: 1279.98px) { :root body main section#pf-pytania#pf-pytania .fq-pyt { font-size: 18px !important; } #pf-pytania .fq-kafel { padding-inline: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { #pf-pytania * { transition: none !important; } }
.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, #22406E 0%, #22406E 5%, rgba(0,0,0,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: #f0f2f6 !important; }
/* ===== JASNY NIEBIESKI TYLKO PRZYCISKI: reszta schodzi na granat ===== */
.cta-roll.bg-brand, a.cta-roll { background-color: #22406E !important; }
span.bg-brand { background-color: #172B4D !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(../img/01bdfcb2165390.jpg) !important; background-position: 50% 62% !important; background-color: #93aae6 !important; background-blend-mode: multiply !important; filter: saturate(1.4) !important; }
#top::before { background: rgba(23,43,77,0.46) !important; }
#proces .karta-foto { background-image: none !important; background-position: 46% 62% !important; background-color: #93aae6 !important; background-blend-mode: multiply !important; filter: saturate(1.4) !important; }
#proces .karta-foto::before { background: rgba(23,43,77,0.44) !important; }
section#etapy { background-image: none !important; background-position: 50% 56% !important; background-color: #8199d8 !important; background-blend-mode: multiply !important; filter: saturate(1.4) !important; }
section#etapy::before { background: rgba(23,43,77,0.5) !important; }
section#kontakt-cta { background-image: url(../img/8ba767058773eb.jpg) !important; background-position: 50% 60% !important; background-color: #8199d8 !important; background-blend-mode: multiply !important; filter: saturate(1.4) !important; }
section#kontakt-cta::before { background: rgba(23,43,77,0.5) !important; }
#opinie .karta-kolor { background-image: url(../img/9226275cbb2cbc.jpg) !important; background-position: 55% 62% !important; background-color: #8ba4e2 !important; background-blend-mode: multiply !important; filter: saturate(1.4) !important; }
#opinie .karta-kolor::before { background: rgba(23,43,77,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: rgba(255,255,255,0.55) !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: #172B4D !important; }
#oferta-lista .linia span { background: #172B4D !important; }
.karta-info .panel--niebieski { background: #172B4D !important; }
#opinie .cudzyslow { color: #172B4D !important; }
#opinie .strzalka:hover { border-color: #172B4D !important; color: #172B4D !important; }
#komu .wiersz::before { background: #172B4D !important; }
section#etapy .etap .numer { border-color: rgba(255,255,255,0.45) !important; color: #ffffff !important; }
/* ===== NAGLOWKI: czarne na jasnym, biale na granatowej sekcji ===== */
main h2, footer h2 { color: #172B4D !important; -webkit-text-fill-color: #172B4D !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: #172B4D !important; -webkit-text-fill-color: #172B4D !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(23, 43, 77, 0.34), 0 8px 22px -10px rgba(23, 43, 77, 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(22,43,76)
przy bledzie 0.36/kanal, czyli prostokat #162b4c 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(23, 43, 77, 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(8, 16, 31, 0.97) 0%,
rgba(10, 19, 36, 0.965) 22%,
rgba(13, 24, 44, 0.955) 40%,
rgba(16, 30, 54, 0.94) 54%,
rgba(19, 36, 64, 0.90) 64%,
rgba(22, 41, 73, 0.81) 71%,
rgba(23, 43, 77, 0.64) 77%,
rgba(23, 43, 77, 0.42) 82%,
rgba(23, 43, 77, 0.21) 86%,
rgba(23, 43, 77, 0.07) 89%,
rgba(23, 43, 77, 0.00) 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(8, 16, 31, 0.97) 0%,
rgba(10, 19, 36, 0.95) 35%,
rgba(13, 24, 44, 0.92) 55%,
rgba(19, 36, 64, 0.82) 70%,
rgba(23, 43, 77, 0.55) 85%,
rgba(23, 43, 77, 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(8, 16, 31, 0.97) 0%,
rgba(13, 24, 44, 0.955) 40%,
rgba(19, 36, 64, 0.90) 70%,
rgba(22, 41, 73, 0.84) 82%,
rgba(23, 43, 77, 0.55) 90%,
rgba(23, 43, 77, 0.18) 96%,
rgba(23, 43, 77, 0.00) 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: #22406E !important;
}
#proces .karta-foto::before, #opinie .karta-kolor::before { background: transparent !important; }
#komu .wiersz::before { background: #172B4D !important; }
/* kwadraciki z fajkami: granat zamiast czerni, fajka biala */
#warunki .znak { background: #172B4D !important; color: #ffffff !important; }
#warunki .znak svg { color: #ffffff !important; stroke: #ffffff !important; }
/* ===== CZERWONY AKCENT #CC9A4E (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: #CC9A4E !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 #CC9A4E 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: #CC9A4E !important;
border-color: transparent !important;
color: #ffffff !important;
box-shadow: 0 18px 30px -14px rgba(204, 154, 78, 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: #CC9A4E !important;
box-shadow: 0 22px 40px -12px rgba(204, 154, 78, 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 #CC9A4E;
border-right: 1px solid #CC9A4E;
}
#etapy .etap .numer::after {
right: -1px; bottom: -1px;
border-bottom: 1px solid #CC9A4E;
border-left: 1px solid #CC9A4E;
}
#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: #CC9A4E !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: #22406E !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: #22406E !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: #172B4D !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: #22406E !important; }
/* ===== POZIOME KRESKI W "DLA KOGO" I W "ZASADACH": czern zamiast szarosci ===== */
#komu .lista { border-top: 1px solid #172B4D !important; }
#komu .wiersz { border-bottom: 1px solid #172B4D !important; }
#warunki .punkt { border-bottom-color: #172B4D !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(../img/1c38d9cc2d22d4.jpg);
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: #172B4D;
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 rgba(255, 255, 255, 0.55);
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: #ffffff !important;
color: #172B4D !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: #172B4D !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: #CC9A4E; }
#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: rgba(255, 255, 255, 0.82) !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: #CC9A4E;
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(../img/8ba767058773eb.jpg);
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(23, 43, 77, 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: #52525b !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: #172B4D; }
#formularz .dane a { color: inherit; text-decoration: none; }
#formularz .dane a:hover { color: #22406E; }
#formularz .ikona { display: inline-flex; color: #172B4D; 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: #172B4D; }
#formularz .wymagane { color: #CC9A4E; }
#formularz input[type="text"], #formularz input[type="email"], #formularz input[type="tel"], #formularz textarea {
width: 100%;
padding: 0.9rem 1rem;
border: 1px solid #d4d4d8;
background: #ffffff;
color: #172B4D;
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: #a1a1aa; }
#formularz input:focus, #formularz textarea:focus {
outline: none;
border-color: #22406E;
box-shadow: 0 0 0 3px rgba(204, 154, 78, 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: #22406E; flex: 0 0 auto; }
#formularz .zgoda label { margin: 0; font-size: 14px; font-weight: 400; color: #52525b; 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: #52525b !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: #22406E !important;
border-color: #22406E !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: #1d4ea8 !important;
border-color: #1d4ea8 !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: #CC9A4E !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: #CC9A4E !important;
color: #ffffff !important;
}
#obiuro-foto .obrys:hover, #obiuro-foto .obrys:focus-visible {
background-color: #B3843C !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: #172B4D !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 (#22406E). Kafel opinii zostaje
niebieski - zmiana dotyczy tylko tego jednego kafla. */
#proces .karta-foto { background-color: #22406E !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: #CC9A4E !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: #172B4D !important;
border-top-color: rgba(255, 255, 255, 0.1) !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 rgba(255, 255, 255, 0.65);
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 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 : wiersz liczy sie od stopnia pisma elementu blokowego,
a 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: rgba(255, 255, 255, 0.92);
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: rgba(255, 255, 255, 0.92);
}
/* 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 rgba(255, 255, 255, 0.28);
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 #CC9A4E na czerni daje kontrast 5,2:1, wiec to nadal czytelny tekst,
a nie sam ozdobnik. W wariancie koral palette podmienia to na #CC9A4E. */
footer#kontakt .stopka-osoba { margin: 12px 0 0; font-size: 16px; line-height: 1.15; color: #CC9A4E; }
/* 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: rgba(255, 255, 255, 0.45);
}
/* 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 rgba(255, 255, 255, 0.13);
}
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: rgba(255, 255, 255, 0.85);
}
@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: rgba(255, 255, 255, 0.5);
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 (#172B4D),
wiec z gory kadru do dolu idzie jedna plaszczyzna. */
#site-header.naglowek-czarny {
background-color: #172B4D !important;
border-bottom-color: rgba(255, 255, 255, 0.10) !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(../img/b33f682a0d2735.webp); }
.pr-obraz-b { background-image: url(../img/074ca7863a7797.webp); }
.pr-obraz-c { background-image: url(../img/ec0b60f91fe68c.webp); }
.pr-obraz-d { background-image: url(../img/2cea6ee81af202.webp); }
.pr-obraz-e { background-image: url(../img/04fcacfaa64135.webp); }
.pr-obraz-f { background-image: url(../img/6231c6a4bedfaa.webp); }
.pr-obraz-o { background-image: url(../img/e7568b6cf17332.webp); }
.pr-obraz-g { background-image: url(../img/fb860ff608d34f.webp); }
.pr-obraz-h { background-image: url(../img/202a9a1c6df986.webp); }
.pr-obraz-i { background-image: url(../img/d17e760742c915.webp); }
.pr-obraz-n { background-image: url(../img/679ec9523d5d31.webp); }
.pr-obraz-s { background-image: url(../img/ca67669bac58a2.webp); }
.pr-obraz-p { background-image: url(../img/d8a0aaecd31527.webp); }
.pr-obraz-k { background-image: url(../img/f3949911139034.webp); }
.pr-obraz-j { background-image: url(../img/494ccc3af148b5.webp); }
#poradnik { background: #ffffff; color: #27272a; }
.pr-kontener { max-width: 76.75rem; 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: #e4e4e7; }
.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(23, 43, 77, 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: #172B4D; text-wrap: balance; transition: color 0.25s ease; }
.pr-karta-link:hover .pr-karta-tytul { color: #172B4D; }
/* 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: #5b6070; }
.pr-karta-link:focus-visible, .pr-najnowsze a:focus-visible { outline: 2px solid #CC9A4E; 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: #172B4D; text-decoration: none; }
.pr-miniatura { display: block; width: 100px; height: 100px; background-size: cover; background-position: center; background-color: #e4e4e7; }
.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: #172B4D; }
/* 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: #172B4D; text-wrap: balance; }
.pr-hero { margin-top: 2.5rem; aspect-ratio: 900 / 520; background-size: cover; background-position: center; background-color: #e4e4e7; }
.pr-tresc { margin-top: 3rem; font-size: 16px; line-height: 26px; color: #5b6070; }
.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: #172B4D; 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: #CC9A4E; }
.pr-tresc strong { color: #172B4D; font-weight: 600; }
.pr-podstawa { font-size: 13px; line-height: 1.6; color: #71717a; }
.pr-podstawa span { font-weight: 600; color: #52525b; }
.pr-zastrzezenie { font-size: 12.5px; line-height: 1.6; color: #a1a1aa; }
.pr-szkic { color: #71717a; }
@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 , 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: #172B4D !important; -webkit-text-fill-color: #172B4D !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: #F0F2F6; }
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 #E4E7EC; box-shadow: inset 4px 0 0 #172B4D; 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 #CC9A4E; }
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: #172B4D; transition: color 0.35s var(--pf-ease); }
html body #pf-onas.on-stos .ob-karta.ob-aktywna .ob-nr { color: #CC9A4E; }
html body #pf-onas.on-stos .ob-linia { flex: 1 1 auto; height: 1px; background: #E4E7EC; }
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: #6B7482; }
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 - 76.75rem) / 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: #172B4D; --op-czerwien: #CC9A4E; --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: #E4E4E7; --op-tekst: #3F3F46; }
#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: #172B4D;
--op-grafit: #22406E;
--op-grafit-2: #2A4C82;
--op-czerwien: #CC9A4E;
--op-czerwien-h: #B3843C;
--op-biel: #FFFFFF;
--op-mgla: #F0F2F6;
--op-linia: #E4E4E7;
--op-linia-ciemna: rgba(255, 255, 255, 0.12);
--op-tekst: #3F3F46;
--op-tekst-2: #71717A;
--op-szary: #8A93A6;
--op-szary-ciemne: #97A1B4;
--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: 76.75rem; 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: rgba(255, 255, 255, 0.82); }
.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: rgba(255, 255, 255, 0.72); }
.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("../img/ec27fd66d7eb24.jpg") 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(23, 43, 77, 0.55) 0, rgba(23, 43, 77, 0) 140px),
linear-gradient(180deg,
rgba(23, 43, 77, 0) 18%,
rgba(23, 43, 77, 0.72) 62%,
rgba(23, 43, 77, 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 rgba(255, 255, 255, 0.35);
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: rgba(255, 255, 255, 0.75);
}
#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 rgba(255, 255, 255, 0.14);
}
#op-hero .hero-ocena {
margin: 0;
font-size: 14px !important;
line-height: 1.5 !important;
color: rgba(255, 255, 255, 0.75);
}
#op-hero .hero-ocena-nr { font-weight: 600; color: #ffffff; }
#op-hero .hero-sep { color: rgba(255, 255, 255, 0.4); }
#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: rgba(255, 255, 255, 0.9); }
#op-hero .hero-cecha { border-color: rgba(255, 255, 255, 0.6); }
}
@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: rgba(255, 255, 255, 0.72);
}
#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 #ffffff;
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: rgba(255, 255, 255, 0.72);
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: rgba(255, 255, 255, 0.88); }
#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: #172B4D !important; -webkit-text-fill-color: #172B4D !important; }
#etapy .text-brand { color: #c8cdd8 !important; -webkit-text-fill-color: #c8cdd8 !important; }
#etapy > div { padding-top: var(--sekcja) !important; padding-bottom: var(--sekcja) !important; }
#etapy { position: relative; background: url(../img/ec27fd66d7eb24.jpg) 82% center / cover no-repeat !important; color: #ffffff; }
#etapy::before { content: ""; position: absolute; inset: 0; background: rgba(23,43,77,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: rgba(255,255,255,0.78) !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 rgba(255,255,255,0.38); border-radius: 0 !important; font-size: 14px; font-weight: 500; color: #c8cdd8; }
#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: rgba(255,255,255,0.78) !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: rgba(255,255,255,0.78) !important; }
#etapy .zamkniecie .przycisk { margin-top: 2.25rem; }
section#etapy { background-image: none !important; background-position: 50% 56% !important; background-color: #8199d8 !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: rgba(255,255,255,0.55) !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: rgba(255,255,255,0.45) !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(23, 43, 77, 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: #CC9A4E !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 #CC9A4E;
border-right: 1px solid #CC9A4E;
}
#etapy .etap .numer::after {
right: -1px; bottom: -1px;
border-bottom: 1px solid #CC9A4E;
border-left: 1px solid #CC9A4E;
}
#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(../img/1c38d9cc2d22d4.jpg);
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: #172B4D;
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 rgba(255, 255, 255, 0.55);
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: #ffffff !important;
color: #172B4D !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: rgba(255, 255, 255, 0.82); }
#obiuro-foto .panel-nadtytul::after { content: ""; position: absolute; left: 0; right: 0.24em; bottom: 0; height: 2px; background: #CC9A4E; 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 rgba(255, 255, 255, 0.16); }
#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: rgba(255, 255, 255, 0.78) !important; }
#obiuro-foto .panel .panel-kolumny p::before { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 2px; background: #CC9A4E; }
#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: rgba(255, 255, 255, 0.7); }
@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: #CC9A4E !important;
color: #ffffff !important;
}
#obiuro-foto .obrys:hover, #obiuro-foto .obrys:focus-visible {
background-color: #C93B40 !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: #22406E !important; }
#obiuro-foto .obrys {
background-color: #CC9A4E !important;
border: 0 !important;
color: #ffffff !important;
}
#obiuro-foto .obrys:hover, #obiuro-foto .obrys:focus-visible {
background-color: #B3843C !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: 76.75rem !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: #172B4D !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(23, 43, 77, 0.92) 0%, rgba(23, 43, 77, 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: #22406E; }
html body section#etapy .etap-gora::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: #CC9A4E; 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: #22406E; 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: #CC9A4E !important; -webkit-text-fill-color: #CC9A4E !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: rgba(255, 255, 255, 0.78) !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: #2A4C82; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 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: #2C3444 !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: #172B4D; --pf-grafit: #22406E; --pf-akcent: #CC9A4E; --pf-mgla: #F0F2F6; --pf-linia: #E3E7EE; --pf-tekst: #3D4654; --pf-tekst-2: #6B7482; --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: 76.75rem; 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: rgba(255, 255, 255, 0.8) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.8) !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: rgba(255, 255, 255, 0.9) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !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: #172B4D !important; -webkit-text-fill-color: #172B4D !important; }
html body #oferta-uslugi > div { padding-top: calc(var(--sekcja) / 2) !important; }
html body #oferta-uslugi { background: #f0f2f6; }
html body #oferta-uslugi .tytul span { display: block; }
html body #oferta-uslugi .lista { margin-top: 3.5rem; border-top: 2px solid #d4d4d8; }
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 #d4d4d8; 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: #172B4D; 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: #52525b !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: #172B4D; 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: rgba(255,255,255,0.9) !important; }
@media (prefers-reduced-motion: reduce) { html body #oferta-uslugi .wiersz::before { transition: none; } }
html body #oferta-uslugi .wiersz::before { background: #172B4D !important; }
html body #oferta-uslugi h2 .text-brand { color: #172B4D !important; -webkit-text-fill-color: #172B4D !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: #172B4D !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: #172B4D !important; }
html body #oferta-uslugi .kreska-anim::after { background-image: none !important; background-color: #172B4D !important; }
html body #oferta-uslugi .kreska-anim::after { background-color: #172B4D !important; }
html body #oferta-uslugi .kreska-anim::after { background-image: none !important; background-color: #CC9A4E !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: #22406E; }
html body section#pf-opinie-k.op-ruch .op-lista .op-el.op-aktywne { background-color: #2A4C82; }
html body #pf-opinie-k { --op-linia: rgba(255, 255, 255, 0.22); --op-zolty: #CC9A4E; 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(23, 43, 77, 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: rgba(255, 255, 255, 0.6); }
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: rgba(255, 255, 255, 0.4); 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: rgba(255, 255, 255, 0.7); 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 rgba(255, 255, 255, 0.14); }
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: rgba(255, 255, 255, 0.6); }
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 rgba(255, 255, 255, 0.14); }
}
@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 rgba(255, 255, 255, 0.14); }
}
@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: rgba(255, 255, 255, 0.35); 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: #172B4D !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: #22406E !important; transform: translateY(-10px); box-shadow: 0 34px 60px -30px rgba(0, 0, 0, 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: #172B4D !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 URIOS - 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 - 76.75rem) / 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 #CC9A4E; 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 rgba(255, 255, 255, 0.18); }
/* hero i CTA: zdjecie pod plaskim granatem, bez gradientow */
html body section#op-hero { background: url(../img/ec27fd66d7eb24.jpg) center center / cover no-repeat #172B4D !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(12, 23, 42, 0.53) 0%, rgba(12, 23, 42, 0.26) 38%, rgba(12, 23, 42, 0) 62%), rgba(23, 43, 77, 0.70) !important; }
html body section#pf-cta { background: url(../img/8a9c77646753ed.jpg) center center / cover no-repeat #172B4D !important; }
html body section#pf-cta::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; background: rgba(23, 43, 77, 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: #172B4D !important; }
html body #obiuro-foto .foto {
position: relative; overflow: hidden;
background-color: #172B4D !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(12, 23, 42, 0.44) 0%, rgba(12, 23, 42, 0.20) 38%, rgba(12, 23, 42, 0) 62%),
linear-gradient(rgba(23, 43, 77, 0.56), rgba(23, 43, 77, 0.56)),
url(../img/ec27fd66d7eb24.jpg) !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(23, 43, 77, 0) 56%, rgba(6, 12, 24, 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(../img/2aebee10de401c.webp) 50% calc(100% + 42px) / auto 622px 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: #22406E !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 #CC9A4E;
}
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(../img/1c38d9cc2d22d4.jpg);
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: #172B4D;
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 rgba(255, 255, 255, 0.55);
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: #ffffff !important;
color: #172B4D !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: #CC9A4E !important;
color: #ffffff !important;
}
#obiuro-biuro .obrys:hover, #obiuro-biuro .obrys:focus-visible {
background-color: #B3843C !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(../img/1c38d9cc2d22d4.jpg);
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: #172B4D;
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 rgba(255, 255, 255, 0.55);
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: #ffffff !important;
color: #172B4D !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: rgba(255, 255, 255, 0.82); }
#obiuro-biuro .panel-nadtytul::after { content: ""; position: absolute; left: 0; right: 0.24em; bottom: 0; height: 2px; background: #CC9A4E; 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 rgba(255, 255, 255, 0.16); }
#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: rgba(255, 255, 255, 0.78) !important; }
#obiuro-biuro .panel .panel-kolumny p::before { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 2px; background: #CC9A4E; }
#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: rgba(255, 255, 255, 0.7); }
@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: #CC9A4E !important;
color: #ffffff !important;
}
#obiuro-biuro .obrys:hover, #obiuro-biuro .obrys:focus-visible {
background-color: #C93B40 !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: #22406E !important; }
#obiuro-biuro .obrys {
background-color: #CC9A4E !important;
border: 0 !important;
color: #ffffff !important;
}
#obiuro-biuro .obrys:hover, #obiuro-biuro .obrys:focus-visible {
background-color: #B3843C !important;
border: 0 !important;
color: #ffffff !important;
}
html body #obiuro-biuro .blok-foto { background: #172B4D !important; }
html body #obiuro-biuro .foto {
background-image: url(../img/8a9c77646753ed.jpg) !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: #172B4D !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, 76.75rem)) / 2 + 1.5rem + 0.45 * (min(100vw, 76.75rem) - 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: 76.75rem; 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(23, 43, 77, 0) 58%, rgba(6, 12, 24, 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: #F0F2F6 !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 (#172B4D) i ich numery (#6B7482) - 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: #52525B !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: #CC9A4E; 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: rgba(23, 43, 77, 0.16) !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, 76.75rem) - 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, 76.75rem)) / 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: #E9EBF0; border-radius: 999px; object-fit: contain !important;
}
/* kolko przy "Biuro Rachunkowe URIOS": granatowe kolko, bialy znak, wysrodkowany */
html body #pf-wstep .wst-kolo { background: #F0F2F6 !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: #F4F4F5 !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: #CC9A4E;
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(23, 43, 77, 0.93) !important; } /* taka sama powloka jak na stronach 1-5 */
/* STRONA 7: jasniejszy granat #22406E z machala 1 */
html body #obiuro-biuro .panel { background: #22406E !important; }
html body #obiuro-biuro .blok-foto { background: #22406E !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: #22406E !important; }
html body #pf-pytania .pt-poz.pt-otwarte { background: #22406E !important; }
/* do obejrzenia: Aleksandra na tym samym tle co sekcja 2, czyli plaski jasniejszy granat */
html body #obiuro-foto .foto { background-color: #22406E !important; background-image: none !important; }
html body #obiuro-foto .foto::before { background: linear-gradient(to bottom, rgba(34, 64, 110, 0) 56%, rgba(9, 18, 35, 0.34) 100%) !important; }
/* oferta: podswietlony wiersz tez w jasniejszym granacie */
html body #oferta-uslugi .wiersz::before { background: #22406E !important; }
html body #oferta-uslugi .wiersz { border-bottom-color: #22406E !important; }
/* plusy w FAQ tez na jasniejszym granacie */
html body #pf-pytania .pt-znak { border-color: #22406E !important; }
html body #pf-pytania .pt-znak::before, html body #pf-pytania .pt-znak::after { background: #22406E !important; }
html body #pf-pytania .pt-poz:not(.pt-otwarte) .pt-przycisk:hover .pt-znak { background: #22406E !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: #CC9A4E !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, #0E1C35 0%, #16294A 26%, #1D3762 50%, #16294A 74%, #0E1C35 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: #22406E !important; }
html body section#pf-opinie-k.op-ruch .op-lista .op-el.op-aktywne { background-color: #22406E !important; }
/* cztery panie w kolkach (kod z URIOS, kolko w kolorze korala) */
#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 #CC9A4E; background: #d9dce3; }
#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: #6b7280; }
#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: rgba(255, 255, 255, 0.7); }
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; } }
/* 27.09.2026: hero na telefonie i tablecie (do 1023 px) - Dagmara Stoj widoczna 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); transform: none; }
}
/* "O biurze" i "O nas": ta sama czcionka co pozostale nadtytuly strony (Oferta, Korzysci, Krok po kroku...):
Space Grotesk 14 px / 600, odstep liter 0.16em, interlinia 1.5; kreska 2 px w tej samej odleglosci od napisu (27.09.2026, jak w TAX24) */
html body section#obiuro-biuro#obiuro-biuro .panel span.panel-nadtytul,
html body section#obiuro-foto#obiuro-foto .panel span.panel-nadtytul {
font-family: 'Space Grotesk', system-ui, sans-serif !important;
font-size: 14px !important; font-weight: 600 !important; line-height: 1.5 !important;
letter-spacing: 0.16em !important; text-transform: uppercase !important;
padding-bottom: 0.35rem !important;
}
html body section#obiuro-biuro#obiuro-biuro .panel span.panel-nadtytul::after,
html body section#obiuro-foto#obiuro-foto .panel span.panel-nadtytul::after { right: 0.16em !important; }
/* 27.09.2026: Aktualności - 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; }
}
/* podpis opimedia w dolnym pasku stopki (28.09.2026): 1:1 jak na Sigmie - napis + logo, od 900 px w prawym dolnym rogu, kreska pod napisem w kolorze strony */
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; }
html body footer .realizacja-opimedia span { position: relative; color: #FFFFFF !important; font-weight: 400; 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; }
html body footer#kontakt .stopka-pasek-linia { padding-bottom: max(130px, 12vh); }
}
html body footer .realizacja-opimedia span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 0.5px; background: #CC9A4E; 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; } }
@media (max-width: 899px) { html body footer .realizacja-opimedia span { white-space: normal; text-align: center; } } /* telefon: dlugi podpis lamie sie zamiast wychodzic poza ekran (28.09.2026) */
/* ===== BLOG tylko kreska pod zdjeciem (28.09.2026) START ===== */
/* zdjecia wpisow: po najechaniu bez przyblizania, rozjasniania, przyciemniania, cienia i podnoszenia */
html body .pr-karta-link .pr-obraz, html body #poradnik .pr-karta-link .pr-obraz,
html body .pr-najnowsze a .pr-miniatura, html body #poradnik .pr-najnowsze a .pr-miniatura,
html body .pr-najnowsze a .pr-miniatura::before, html body #poradnik .pr-najnowsze a .pr-miniatura::before,
html body .wpis .obraz, html body #tx-blog .wpis .obraz, html body #blog .wpis .obraz,
html body #pf-poradnik .bl-wyrozniony .bl-zdjecie, html body #s-blog .por-wiersz .por-mini { transform: none !important; filter: none !important; }
html body .pr-karta-link .pr-okno, html body #poradnik .pr-karta-link .pr-okno,
html body .pr-najnowsze a .pr-miniatura, html body #poradnik .pr-najnowsze a .pr-miniatura,
html body .wpis .okno, html body #tx-blog .wpis .okno, html body #blog .wpis .okno { box-shadow: none !important; }
html body .pr-okno::after, html body #poradnik .pr-okno::after { content: none !important; }
/* blog na stronie glownej (TAX24 #tx-blog, Machala #blog): regula od najechania ("transition: transform 0.7s") kasowala
przejscie wjazdu kafli - kafle wskakiwaly bez zanikania i wszystkie naraz; wjazd jak w .reveal (1,6 s) i po kolei,
kafel nie podnosi sie po najechaniu (tylko kreska) */
html body #blog .wpis.reveal, html body #tx-blog .wpis.reveal { 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); }
html body #blog .wpis.reveal.delay-100, html body #tx-blog .wpis.reveal.delay-100 { transition-delay: 0.1s, 0.1s; }
html body #blog .wpis.reveal.delay-200, html body #tx-blog .wpis.reveal.delay-200 { transition-delay: 0.2s, 0.2s; }
html body #blog#blog .wpis:hover, html body #blog#blog .wpis:focus-visible, html body #tx-blog#tx-blog .wpis:hover, html body #tx-blog#tx-blog .wpis:focus-visible { transform: none !important; }
/* kreska 2 px w kolorze strony przy GORNEJ krawedzi zdjecia (28.09.2026 jego: "kreska powinna byc jednak na gorze zdjecia"), wysuwa sie od lewej */
html body .pr-najnowsze a .pr-miniatura, html body #s-blog .por-wiersz .por-mini { position: relative; }
html body .wpis .okno::after, html body #blog .wpis .okno::after, html body #tx-blog .wpis .okno::after { top: 0 !important; bottom: auto !important; } /* blog na stronie glownej TAX24/Machala: istniejaca kreska na gore */
html body .pr-okno::before, html body #poradnik .pr-okno::before,
html body .pr-najnowsze a .pr-miniatura::after, html body #poradnik .pr-najnowsze a .pr-miniatura::after,
html body #pf-poradnik .bl-foto::after, html body #s-blog .por-wiersz .por-mini::after {
content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: auto !important;
z-index: 3 !important; height: 2px !important; background: #CC9A4E !important; opacity: 1 !important; pointer-events: none;
transform: scaleX(0); transform-origin: left center; transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) !important; }
html body .pr-karta-link:hover .pr-okno::before, html body .pr-karta-link:focus-visible .pr-okno::before,
html body #poradnik .pr-karta-link:hover .pr-okno::before, html body #poradnik .pr-karta-link:focus-visible .pr-okno::before,
html body .pr-najnowsze a:hover .pr-miniatura::after, html body .pr-najnowsze a:focus-visible .pr-miniatura::after,
html body #poradnik .pr-najnowsze a:hover .pr-miniatura::after, html body #poradnik .pr-najnowsze a:focus-visible .pr-miniatura::after,
html body #pf-poradnik .bl-wyrozniony:hover .bl-foto::after, html body #pf-poradnik .bl-wyrozniony:focus-visible .bl-foto::after,
html body #s-blog .por-wiersz:hover .por-mini::after, html body #s-blog .por-wiersz:focus-visible .por-mini::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
html body .pr-okno::before, html body .pr-najnowsze a .pr-miniatura::after, html body #pf-poradnik .bl-foto::after, html body #s-blog .por-wiersz .por-mini::after { transition: none !important; }
}
/* ===== BLOG tylko kreska pod zdjeciem END ===== */
#urios-popup .p-tlo { position: absolute; inset: 0; z-index: 5; background: rgba(9, 9, 11, 0.52); transition: opacity 0.35s ease; }
#urios-popup.zamkniete .p-tlo { opacity: 0; pointer-events: none; }
#urios-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;
}
#urios-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; }
#urios-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);
}
#urios-popup .nad::after { content: ""; position: absolute; left: 0; right: 0.16em; bottom: 0; height: 2px; background: var(--akcent); }
#urios-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 up (min-width: 640px) {#urios-popup .p-tytul { margin-top: 20px; font-size: 28px; }
}
#urios-popup .p-tekst { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--akapit); text-wrap: pretty; }
#urios-popup .p-maly { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--akapit); text-wrap: pretty; }
#urios-popup .p-podkr { text-decoration: underline; text-decoration-color: var(--linia); text-underline-offset: 3px; color: var(--tekst); }
#urios-popup .p-uwaga { margin: 0; font-size: 14px; line-height: 1.6; color: var(--szary); }
#urios-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;
}
#urios-popup .p-btn:hover { background: color-mix(in srgb, var(--akcent) 86%, #000000); border-color: color-mix(in srgb, var(--akcent) 86%, #000000); }
#urios-popup .p-btn--obrys { background: #FFFFFF; color: var(--akcent); }
#urios-popup .p-btn--obrys:hover { background: var(--akcent); border-color: var(--akcent); color: var(--na-akcencie); }
#urios-popup .p-btn--jasny { background: transparent; border-color: rgba(255, 255, 255, 0.55); color: #FFFFFF; }
#urios-popup .p-btn--jasny:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--ciemny); }
#urios-popup .p-btn--pelny { width: 100%; }
#urios-popup .p-btn:focus-visible,
#urios-popup .p-link:focus-visible { outline: 2px solid var(--tekst); outline-offset: 3px; }
#urios-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;
}
#urios-popup .p-link:hover { text-decoration-color: var(--akcent); }
#urios-popup .p-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
#urios-popup .p-form { display: grid; gap: 16px; margin-top: 24px; }
#urios-popup .p-rzad { display: grid; gap: 16px; }
@container up (min-width: 640px) {#urios-popup .p-rzad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#urios-popup .p-pole { display: grid; gap: 8px; }
#urios-popup .p-etykieta { font-size: 14px; font-weight: 600; color: var(--tekst); }
#urios-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;
}
#urios-popup .p-input::placeholder { color: var(--szary); opacity: 1; }
#urios-popup .p-input:focus { outline: none; border-color: var(--tekst); box-shadow: inset 0 -2px 0 var(--akcent); }
#urios-popup .p-zgoda { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.6; color: var(--akapit); cursor: pointer; }
#urios-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;
}
#urios-popup .p-check:focus-visible,
#urios-popup .p-switch:focus-visible { outline: 2px solid var(--tekst); outline-offset: 2px; }
#urios-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;
}
#urios-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; }
#urios-popup .p-switch:checked { background: var(--akcent); border-color: var(--akcent); }
#urios-popup .p-switch:checked::before { transform: translateX(20px); background: #FFFFFF; }
#urios-popup .p-switch:disabled { cursor: not-allowed; opacity: 0.55; }
#urios-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 up (min-width: 640px) {#urios-popup .p-x { width: 52px; height: 52px; }
}
#urios-popup .p-x::before,
#urios-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;
}
#urios-popup .p-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
#urios-popup .p-x:hover { background: var(--tekst); }
#urios-popup .p-x:hover::before,
#urios-popup .p-x:hover::after { background: #FFFFFF; }
#urios-popup .p-x:focus-visible { outline: 2px solid var(--tekst); outline-offset: -4px; }
#urios-popup .p-x--ciemny { background: rgba(255, 255, 255, 0.08); }
#urios-popup .p-x--ciemny::before,
#urios-popup .p-x--ciemny::after { background: #FFFFFF; }
#urios-popup .p-x--ciemny:hover { background: #FFFFFF; }
#urios-popup .p-x--ciemny:hover::before,
#urios-popup .p-x--ciemny:hover::after { background: var(--ciemny); }
#urios-popup .p-x--ciemny:focus-visible { outline-color: #FFFFFF; }
#urios-popup .p-ikona { flex: none; display: grid; place-items: center; width: 44px; height: 44px; background: var(--jasny); color: var(--tekst); }
#urios-popup .p3-form-rzad { display: grid; gap: 8px; }
@container up (min-width: 640px) {#urios-popup .p3-form-rzad { grid-template-columns: minmax(0, 1fr) auto; gap: 0; }
#urios-popup .p3-form-rzad .p-btn { min-height: 55px; padding: 0 22px; }
}
@container up (max-width: 759px) {#urios-popup .p3-form-rzad { grid-template-columns: minmax(0, 1fr) auto; gap: 0; }
#urios-popup .p3-form-rzad .p-btn { min-height: 55px; padding: 0 16px; }
}
#urios-popup .pu { --wystaje: 84px; left: 50%; top: 50%; width: min(580px, calc(100% - 32px)); transform: translate(-50%, calc(-50% + var(--wystaje) / 2)); }
#urios-popup.zamkniete .pu { transform: translate(-50%, calc(-50% + var(--wystaje) / 2 + 16px)); }
@container up (min-width: 640px) {#urios-popup .pu { --wystaje: 124px; }
}
#urios-popup .pu-gora { position: relative; height: 176px; background: var(--ciemny); }
@container up (min-width: 640px) {#urios-popup .pu-gora { height: 196px; }
}
#urios-popup .pu-osoba {
position: absolute; left: 8px; bottom: 0; z-index: 1; width: auto; max-width: none;
height: calc(176px + var(--wystaje)); filter: drop-shadow(0 12px 22px rgba(9, 9, 11, 0.35));
}
@container up (min-width: 640px) {#urios-popup .pu-osoba { left: 24px; height: calc(196px + var(--wystaje)); }
}
#urios-popup .pu-staty { position: absolute; right: 16px; top: 50%; z-index: 2; display: grid; gap: 16px; width: 38%; transform: translateY(-50%); }
@container up (min-width: 640px) {#urios-popup .pu-staty { right: 32px; width: 36%; gap: 18px; }
}
#urios-popup .pu-stat { display: grid; gap: 2px; padding-left: 12px; border-left: 2px solid var(--akcent); }
#urios-popup .pu-liczba { font-size: 22px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: #FFFFFF; }
@container up (min-width: 640px) {#urios-popup .pu-liczba { font-size: 28px; }
}
#urios-popup .pu-opis { font-size: 14px; line-height: 1.35; color: rgba(255, 255, 255, 0.78); }
#urios-popup .pu-tresc { padding: 22px 20px 18px; }
@container up (min-width: 640px) {#urios-popup .pu-tresc { padding: 28px 32px 26px; }
}
#urios-popup .pu-form { display: grid; gap: 8px; margin-top: 18px; }
#urios-popup .pu-nie { display: block; margin: 14px 0 0; }
@container up (max-width: 639px) {#urios-popup .pu:not(.pu--srodek) { --wystaje: 110px; }
#urios-popup .pu:not(.pu--srodek) .pu-staty { display: none; }
#urios-popup .pu:not(.pu--srodek) .pu-gora { height: 186px; clip-path: inset(-400px 0 0 0); }
#urios-popup .pu:not(.pu--srodek) .pu-osoba { top: calc(-1 * var(--wystaje)); bottom: auto; left: 50%; height: 400px; transform: translateX(-54%); }
}
#urios-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; }
#urios-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;
}
#urios-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%); }
#urios-popup .p-zgoda input:hover { border-color: #76787C; }
#urios-popup .p-zgoda input:checked { background: var(--akcent); border-color: var(--akcent); }
#urios-popup .p-zgoda input:checked::before { transform: scale(1); }
#urios-popup .p-zgoda input:focus-visible { outline: 2px solid var(--tekst); outline-offset: 2px; }
#urios-popup .p-zgoda a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@keyframes wej-gora { from { opacity: 0; translate: 0 14px; } }
@keyframes wej-prawo { from { opacity: 0; translate: 24px 0; } }
@keyframes pojaw { from { opacity: 0; } }
@keyframes kreska-x { from { scale: 0 1; } }
@keyframes x-wej { from { opacity: 0; scale: 0.6; } }
@keyframes pu-wej { from { opacity: 0; transform: translate(-50%, calc(-50% + var(--wystaje) / 2 + 40px)) scale(0.97); } }
@keyframes pu-osoba { from { translate: 0 100%; } }
@keyframes pu-pas { 0%, 80% { clip-path: inset(-400px 0 0 0); } to { clip-path: inset(-400px -80px -80px -80px); } }
@media (prefers-reduced-motion: no-preference) {#urios-popup.gra .p-x { animation: x-wej 0.45s var(--ease) 0.5s backwards; }
#urios-popup.gra .pu { animation: pu-wej 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
#urios-popup.gra .pu-osoba { animation: pu-osoba 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards; }
@container up (min-width: 640px) {#urios-popup.gra .pu-gora { animation: pu-pas 1.5s linear backwards; }
}
#urios-popup.gra .pu-stat { animation: wej-prawo 0.55s var(--ease) 0.6s backwards; }
#urios-popup.gra .pu-stat + .pu-stat { animation-delay: 0.72s; }
#urios-popup.gra .pu-tresc > .nad { animation: wej-gora 0.5s var(--ease) 0.35s backwards; }
#urios-popup.gra .pu-tresc > .nad::after { transform-origin: left center; animation: kreska-x 0.6s cubic-bezier(0.65, 0, 0.35, 1) 0.6s backwards; }
#urios-popup.gra .pu-tresc > .p-tytul { animation: wej-gora 0.6s var(--ease) 0.43s backwards; }
#urios-popup.gra .pu-tresc > .p-tekst { animation: wej-gora 0.6s var(--ease) 0.52s backwards; }
#urios-popup.gra .pu-form { animation: wej-gora 0.6s var(--ease) 0.62s backwards; }
#urios-popup.gra .pu-nie { animation: pojaw 0.6s ease 0.8s backwards; }
}
/* ===== POPUP 2 dla Urios (27.09.2026) =====
Kopia Popupu 2 (Dema/popupy-wybrane/popup-2.html): uklad, wielkosci, kolory i animacje bez zmian.
Otwiera sie sam, gdy ktos zjedzie z "Krok po kroku" na FAQ (gora sekcji Pytania w polowie ekranu przez 0,5 s) -
raz na karte przegladarki; nigdy na okienko cookies. */
#urios-popup {
--akcent: #CC9A4E; --na-akcencie: #FFFFFF; --ciemny: #172B4D; --karta: #22406E; --otwarte: #22406E; --jasny: #F0F2F6;
--tekst: #172B4D; --akapit: #3D4654; --szary: #6B7482; --linia: #E3E7EE; --nad-kolor: #172B4D;
--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: up / 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;
}
#urios-popup[hidden] { display: none !important; }
#urios-popup *, #urios-popup *::before, #urios-popup *::after { box-sizing: border-box; }
#urios-popup svg { display: block; flex: none; }
#urios-popup h3, #urios-popup p { margin-left: 0; margin-right: 0; }
#urios-popup button, #urios-popup input { font-family: var(--sg); }
#urios-popup.natychmiast, #urios-popup.natychmiast * { transition: none !important; }
html.up-otwarty { overflow: hidden; }
/* Na stronie okno stoi w warstwie .up-miejsce: gdy sie miesci, blok "glowa Dagmary + okno" jest na srodku ekranu
dokladnie jak w Popupie 2; gdy ekran jest za niski, nic nie jest ucinane, tylko calosc da sie przewinac
(w Popupie 2 okno bylo ustawiane transformem na srodku sceny 760 px, na niskim ekranie glowa i dol wychodzily poza ekran). */
#urios-popup .up-miejsce {
--wystaje: 110px;
position: absolute; inset: 0; z-index: 10; display: grid; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
padding: calc(var(--wystaje) + 16px) 16px 16px;
}
@container up (min-width: 640px) { #urios-popup .up-miejsce { --wystaje: 124px; } }
#urios-popup.zamkniete .up-miejsce { pointer-events: none; }
#urios-popup .up-miejsce .pu { position: relative; left: auto; top: auto; margin: auto; width: min(580px, 100%); transform: none; }
#urios-popup.zamkniete .up-miejsce .pu { transform: translateY(16px); }
@keyframes up-wej { from { opacity: 0; transform: translateY(40px) scale(0.97); } }
@media (prefers-reduced-motion: no-preference) {
#urios-popup.gra .up-miejsce .pu { animation-name: up-wej; }
}
/* niskie ekrany: najpierw znika akapit pod tytulem (tylko gdy okno z glowa i marginesami 16 px sie nie miesci: telefon do 732 px wysokosci, komputer do 763 px),
przy jeszcze nizszych Dagmara i granatowy pas sa troche mniejsze (ciecie dalej tuz pod skrzyzowanymi rekami) */
@media (max-height: 732.98px) {
@container up (max-width: 639px) { #urios-popup .pu-tresc > .p-tekst { display: none; } }
}
@media (max-height: 644px) {
@container up (max-width: 639px) {
#urios-popup .up-miejsce { --wystaje: 84px; }
#urios-popup .pu:not(.pu--srodek) { --wystaje: 84px; }
#urios-popup .pu:not(.pu--srodek) .pu-gora { height: 153px; }
#urios-popup .pu:not(.pu--srodek) .pu-osoba { height: 320px; }
}
}
@media (max-height: 763.98px) {
@container up (min-width: 640px) { #urios-popup .pu-tresc > .p-tekst { display: none; } }
}
@media (max-height: 700.98px) {
@container up (min-width: 640px) {
#urios-popup .up-miejsce { --wystaje: 100px; }
#urios-popup .pu { --wystaje: 100px; }
#urios-popup .pu-gora { height: 160px; }
#urios-popup .pu-osoba { height: calc(160px + var(--wystaje)); }
}
}
@media (prefers-reduced-motion: reduce) {
#urios-popup *, #urios-popup *::before, #urios-popup *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
html body label[for="kon-zgoda"] a { text-decoration: underline !important; text-underline-offset: 3px; color: inherit; }
html body #poradnik .pr-karta-tytul, html body #poradnik .pr-karta-link:hover .pr-karta-tytul, html body #poradnik .pr-najnowsze-tytul, html body #poradnik .pr-wpis-tytul, html body #poradnik .pr-tresc h2, html body #poradnik .pr-tresc h3 { color: #09090B !important; -webkit-text-fill-color: #09090B !important; }
/* 3.10.2026 (Urios): O nas - duże zdjęcie to budynek z zewnątrz (było: Aleksandra na granacie z cieniem przy podłodze) */
html body section#obiuro-foto .foto { background: url(../img/4c7661ab435665.jpg) 28% 40% / cover no-repeat #172B4D !important; }
@media (max-width: 767.98px) { html body section#obiuro-foto .foto { background-position: 23% 40% !important; } }
/* 5.10 budynek z ulicy: 28% = drzwi na środku kafla na komputerze (1280-1920: 47-48%, 1024: 54%), na telefonie 23% (390: 50%);
pionowo 40% liczy się tylko na tablecie (cały budynek, drzwi na 36%). Wcześniej zdjęcie szeroko 37% 45%, */ /* 5.10 zdjęcie szeroko: 37% stawia oś fasady na środku kafla (1024-1440 i telefon), 45% pionowo - na tablecie szczyt i drzwi. Wcześniej z bliska 44% 40%: przy węższym kaflu (1024 px) oś fasady (drzwi i łukowe okno, x ok. 48,6% zdjęcia) na środku kafla; pionowo 40%, żeby na telefonie nie ucinało szczytu, na tablecie (szeroki kafel) środkiem łukowe okno. Wcześniej 3.png: 47.5% 50% (4.10 „źle wycentrowane”) */
html body section#obiuro-foto .foto::before, html body section#obiuro-foto .foto::after { content: none !important; display: none !important; }
/* hero (3.10, para większa): od 1024 px prawa krawędź pań wchodzi w margines strony (do 48 px, min. 24 px od krawędzi ekranu),
a wysokość to min(dawna wysokość Dagmary U, tyle, ile mieści się obok nagłówka): miejsce = od prawej krawędzi obrazka
do prawej krawędzi nagłówka (lewa treści + 40rem) minus 40 px; najbliższy nagłówkowi punkt pań leży ok. 0,78 wysokości od prawej krawędzi (gotowe zdjęcie pary od niego, 4.10; min. 45 px od tekstu) */
@media (min-width: 1024px) {
/* 5.10 jego: „nie mieszczą się w marginesie i lekko za małe są” (było: 43.2rem, x 1.08, / 0.78), potem „na hero dalej się nie
mieszczą w marginesie”: prawa krawędź pań = linia treści (tekst hero, przycisk „Umów rozmowę”), czyli kontener + 1.5rem
paddingu; M = margines treści = max(1.5rem, (100vw - kontener) / 2 + 1.5rem), miejsce obok nagłówka = 100vw - 2M - 40rem - 40px */
html body section#op-hero .u-hero-osoba { right: max(1.5rem, (100vw - 76.75rem) / 2 + 1.5rem) !important; }
html body section#op-hero .u-hero-osoba img { height: min(calc((100svh - 138px) * 1.14), 47.5rem,
calc((100vw - 2 * max(1.5rem, (100vw - 76.75rem) / 2 + 1.5rem) - 40rem - 40px) / 0.68)) !important; }
}
/* 5.10 jego: podpis pod blokiem O nas („Stałe miejsce, jasne zasady…”) za mały - ta sama wielkość co opis w O nas (.panel-lead: 18px / 1.6), było 13px / 1.45 */
html body section#obiuro-foto .u-podpis p { font-size: 18px !important; line-height: 1.6 !important; }
/* 5.10: w okienku para z hero - nigdy szersza niż okienko (wąski telefon), bez rozciągania, przyklejona do dołu pasa */
html body #urios-popup .pu-osoba { max-width: 100% !important; object-fit: contain; object-position: 50% 100%; }
/* telefon i tablet: para na całą szerokość treści, nie szersza niż ekran */
@media (max-width: 1023.98px) {
html body section#op-hero .u-hero-osoba img { height: auto !important; width: min(100%, 26rem) !important; max-width: 100% !important; }
}
/* FAQ jak na Sigmie (6.10.2026), nad starym FAQ */
html body main section#pf-faq { position: relative; background: #FFFFFF !important; color: var(--pf-tekst); }
/* nowe FAQ (białe) -> stare FAQ (białe): po pół odstępu */
html body main section#pf-faq > :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; }
/* odstęp nadtytuł - nagłówek jak na Sigmie (.pt-h2): 20 px, od 768 px 24 px */
html body main section#pf-faq .pf-h2 { margin: 1.25rem 0 0; }
@media (min-width: 768px) { html body main section#pf-faq .pf-h2 { margin-top: 1.5rem; } }
html:root body main > section#pf-faq .f7-akord { margin-top: 48px !important; border-top: 1px solid #D4D4D8 !important; }
@media (min-width: 640px) { html:root body main > section#pf-faq .f7-akord { margin-top: 64px !important; } }
html:root body main > section#pf-faq .f7-akord .f7-poz { position: relative !important; border-bottom: 1px solid #D4D4D8 !important; background: transparent !important; }
html:root body main > section#pf-faq .f7-akord .f7-h { margin: 0 !important; padding: 0 !important; font: inherit !important; }
html:root body main > section#pf-faq .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-faq .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-faq .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-faq .f7-akord .f7-btn:focus-visible { outline: 2px solid #09090B !important; outline-offset: -2px !important; }
html:root body main > section#pf-faq .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-faq .f7-akord .f7-nr { font-size: 14px !important; } }
html:root body main > section#pf-faq .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-faq .f7-akord .f7-pyt { font-size: 20px !important; } }
@media (min-width: 1024px) { html:root body main > section#pf-faq .f7-akord .f7-pyt { font-size: 22px !important; } }
html:root body main > section#pf-faq .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-faq .f7-akord .f7-znak { width: 52px !important; height: 52px !important; top: 34px !important; } }
@media (min-width: 1024px) { html:root body main > section#pf-faq .f7-akord .f7-znak { width: 56px !important; height: 56px !important; top: 33px !important; } }
html:root body main > section#pf-faq .f7-akord .f7-znak::before, html:root body main > section#pf-faq .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-faq .f7-akord .f7-znak::after { transform: translate(-50%, -50%) rotate(90deg); }
html:root body main > section#pf-faq .f7-akord .f7-otwarte .f7-znak { background: #CC9A4E !important; border-color: #CC9A4E !important; }
html:root body main > section#pf-faq .f7-akord .f7-otwarte .f7-znak::before, html:root body main > section#pf-faq .f7-akord .f7-otwarte .f7-znak::after { background: #FFFFFF !important; }
html:root body main > section#pf-faq .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-faq .f7-akord .f7-poz:not(.f7-otwarte) .f7-btn:hover .f7-znak { background: #09090B !important; }
html:root body main > section#pf-faq .f7-akord .f7-poz:not(.f7-otwarte) .f7-btn:hover .f7-znak::before, html:root body main > section#pf-faq .f7-akord .f7-poz:not(.f7-otwarte) .f7-btn:hover .f7-znak::after { background: #FFFFFF !important; }
}
html:root body main > section#pf-faq .f7-akord .f7-odp { display: block !important; visibility: visible !important; }
html:root body main > section#pf-faq .f7-akord .f7-odp-w { padding: 0 60px 24px 3.5rem !important; }
@media (min-width: 640px) { html:root body main > section#pf-faq .f7-akord .f7-odp-w { padding: 0 76px 28px 4.5rem !important; } }
@media (min-width: 1024px) { html:root body main > section#pf-faq .f7-akord .f7-odp-w { padding: 0 88px 28px 5.75rem !important; } }
html:root body main > section#pf-faq .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-faq .f7-akord .f7-tekst { font-size: 16px !important; } }
html:root body main > section#pf-faq .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-faq .f7-akord .f7-otwarte .f7-nr { color: #CC9A4E !important; }
html:root body main > section#pf-faq .f7-akord .f7-tekst.f7-zwija { display: block !important; -webkit-line-clamp: none !important; max-height: none !important; }
html:root body main > section#pf-faq .f7-akord .f7-tekst { transition: color 0.35s ease; }
/* 6.10: w dawnym FAQ certyfikat zamiast kafla z pytaniami - ten sam cień co kafel */
#pf-pytania .fq-certyfikat { margin: 0; background: #FFFFFF; box-shadow: 0 40px 80px -40px rgba(23, 43, 77, 0.28), 0 2px 10px rgba(23, 43, 77, 0.05); }
#pf-pytania .fq-certyfikat img { display: block; width: 100%; height: auto; }
/* 7.10: dwa akapity opisu - między nimi 1rem, nie 1.75rem jak pod nagłówkiem */
:root body main section#pf-pytania .fq-lead + .fq-lead { margin-top: 1rem !important; }
/* 1024-1099 px: słowo „przedsiębiorczość” (ok. 479 px przy 60 px) szersze niż lewa kolumna (452 px przy 1024) - nagłówek 3.35rem */
@media (min-width: 1024px) and (max-width: 1099.98px) { :root body main section#pf-pytania .fq-h2 { font-size: 3.35rem !important; } }
/* Szybki kontakt: okragly przycisk z telefonem w prawym dolnym rogu rozsuwa telefon i formularz (z TAX24 7.10, kolory jak tam) */
.pk-sk{--sk-glowny:60px;--sk-opcja:48px;--sk-odstep:14px;--sk-gap:12px;--sk-cien:0 8px 20px -6px rgba(0,0,0,.3);position:fixed;right:24px;bottom:24px;z-index:60;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:var(--sk-odstep);pointer-events:none;font-family:'Space Grotesk',system-ui,sans-serif}
html body .pk-sk .pk-sk-przycisk{border-radius:50%!important}
.pk-sk-przycisk{position:relative;z-index:1;display:grid;place-items:center;width:var(--sk-glowny);height:var(--sk-glowny);padding:0;border:0;background:var(--pf-akcent);color:#fff;cursor:pointer;pointer-events:auto;box-shadow:var(--sk-cien);transition:transform .25s ease,filter .25s ease}
.pk-sk-przycisk:hover{transform:scale(1.05);filter:brightness(1.04)}
.pk-sk-przycisk svg{position:absolute;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .2s ease}
.pk-sk-x{opacity:0;transform:rotate(-90deg) scale(.5)}
.pk-sk--otwarte .pk-sk-tel{opacity:0;transform:rotate(90deg) scale(.5)}
.pk-sk--otwarte .pk-sk-x{opacity:1;transform:none}
.pk-sk-lista{display:flex;flex-direction:column-reverse;align-items:flex-end;gap:var(--sk-gap);margin:0;padding:0 calc((var(--sk-glowny) - var(--sk-opcja))/2) 0 0;list-style:none;visibility:hidden;transition:visibility 0s linear .4s}
.pk-sk--otwarte .pk-sk-lista{visibility:visible;transition-delay:0s}
.pk-sk-lista li{--i:0;--sk-droga:calc(var(--sk-glowny)/2 + var(--sk-odstep) + var(--sk-opcja)/2 + (var(--sk-opcja) + var(--sk-gap))*var(--i));opacity:0;translate:0 var(--sk-droga);scale:.5;transform-origin:calc(100% - var(--sk-opcja)/2) 50%;transition:opacity .2s ease calc((2 - var(--i))*50ms),scale .2s ease calc((2 - var(--i))*50ms),translate 0s linear .4s}
.pk-sk-lista li:nth-child(2){--i:1}
.pk-sk-lista li:nth-child(3){--i:2}
.pk-sk--otwarte .pk-sk-lista li{opacity:1;translate:0 0;scale:1;transition:translate .45s cubic-bezier(.2,.8,.2,1) calc(var(--i)*50ms),scale .45s cubic-bezier(.2,.8,.2,1) calc(var(--i)*50ms),opacity .3s ease calc(var(--i)*50ms)}
.pk-sk-lista a{display:flex;align-items:center;gap:12px;color:#09090B;text-decoration:none;pointer-events:auto}
.pk-sk-etykieta{display:flex;align-items:center;height:38px;padding:0 16px;box-sizing:border-box;border-radius:999px;background:#fff;box-shadow:var(--sk-cien);font-size:14px;font-weight:500;line-height:1.2;white-space:nowrap;opacity:0;transform:translateX(8px);transition:opacity .12s ease,transform .12s ease}
.pk-sk-etykieta b{margin-left:.35em;font-weight:600}
.pk-sk--otwarte .pk-sk-etykieta{opacity:1;transform:none;transition:opacity .3s ease calc(120ms + var(--i)*50ms),transform .3s ease calc(120ms + var(--i)*50ms)}
.pk-sk-ikona{display:grid;place-items:center;flex:none;width:var(--sk-opcja);height:var(--sk-opcja);border-radius:50%;background:var(--pf-czern);color:#fff;box-shadow:var(--sk-cien);transition:transform .2s ease,filter .2s ease}
.pk-sk-telefon .pk-sk-ikona{background:#16A34A} /* telefon zielony (jak w TAX24) */
.pk-sk-mail .pk-sk-ikona{background:#2563EB} /* druga opcja niebieska (jego 7.10: bursztyn za podobny do złotego przycisku) */
.pk-sk-lista a:hover .pk-sk-ikona,.pk-sk-lista a:focus-visible .pk-sk-ikona{transform:scale(1.08);filter:brightness(1.05)}
.pk-sk-dymek{position:absolute;right:calc(var(--sk-glowny) + 14px);bottom:calc(var(--sk-glowny)/2);padding:10px 16px;border-radius:18px;background:#fff;color:#09090B;box-shadow:var(--sk-cien);font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap;text-decoration:none;pointer-events:none;opacity:0;translate:10px 50%;scale:.85;transform-origin:100% 50%;transition:opacity .25s ease,translate .35s cubic-bezier(.2,.8,.2,1),scale .35s cubic-bezier(.2,.8,.2,1)}
.pk-sk-dymek::after{content:'';position:absolute;top:50%;right:-5px;width:12px;height:12px;border-radius:0 3px 0 0;background:#fff;translate:0 -50%;rotate:45deg}
.pk-sk-dymek--widoczny{opacity:1;translate:0 50%;scale:1;pointer-events:auto}
.pk-sk--otwarte .pk-sk-dymek{opacity:0;pointer-events:none}
@keyframes pk-sk-dzwoni{0%,34%,100%{transform:none}4%{transform:translateX(-3px) rotate(-14deg) scale(1.08)}8%{transform:translateX(3px) rotate(12deg) scale(1.08)}12%{transform:translateX(-3px) rotate(-12deg) scale(1.08)}16%{transform:translateX(3px) rotate(10deg) scale(1.08)}20%{transform:translateX(-2px) rotate(-8deg) scale(1.06)}24%{transform:translateX(2px) rotate(6deg) scale(1.04)}28%{transform:translateX(-1px) rotate(-3deg) scale(1.02)}}
.pk-sk--dzwoni .pk-sk-przycisk{animation:pk-sk-dzwoni 2s ease-in-out .35s infinite}
.pk-sk--otwarte .pk-sk-przycisk{animation:none}
.pk-sk-przycisk:focus-visible,.pk-sk-lista a:focus-visible{outline:2px solid var(--pf-akcent);outline-offset:3px}
@media(max-width:767px){.pk-sk{--sk-glowny:56px;right:16px;bottom:max(16px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.pk-sk *{transition-duration:.01ms!important;transition-delay:0s!important}.pk-sk--dzwoni .pk-sk-przycisk{animation:none}}
@media print{.pk-sk{display:none}}
/* produkcja urios.pl: pola-pulapki na boty, komunikaty formularza, podstrony prawne */
html body #pf-kontakt .kon-pulapka, #urios-popup .up-pulapka { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
#pf-kontakt .kon-notka.kon-blad { color: #B42318; }
main .prawne { max-width: 46rem; margin-top: 2.25rem; }
main .prawne h2 { margin: 2.25rem 0 0.75rem !important; font-size: 1.375rem !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: -0.01em !important; text-transform: none !important; color: #09090B !important; -webkit-text-fill-color: #09090B !important; }
main .prawne p, main .prawne li { font-size: 16px !important; line-height: 1.65 !important; color: #3F3F46; }
main .prawne p { margin: 0 0 1rem; }
main .prawne ol, main .prawne ul { margin: 0 0 1rem; padding-left: 1.4rem; }
main .prawne ol { list-style: decimal; }
main .prawne ul { list-style: disc; }
main .prawne li { margin: 0 0 0.5rem; padding-left: 0.2rem; }
main .prawne strong { font-weight: 600; color: #09090B; }
main .prawne a { color: #172B4D; text-decoration: underline; text-underline-offset: 3px; }
main .prawne .prawne-data { margin-top: 2.5rem; font-size: 14px !important; color: #71717A; }