/* 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: #09090b; opacity: 1; visibility: visible; transition: opacity .45s ease, visibility 0s linear .45s; }
#preloader.pre-ukryty { opacity: 0; visibility: hidden; }
html.preloader-trwa { overflow: hidden; }
.pre-logo { width: 240px; height: auto; overflow: visible; }
/* Logo po prostu sie pisze: sygnet (o + kropka) jako pierwszy, potem p-i-m-e-d-i-a, kazdy element od lewej (clip-path). */
.pre-litera { clip-path: inset(0 100% 0 0); animation: pre-pisz .22s ease-out forwards; animation-delay: calc(.15s + var(--i) * .1s); }
@keyframes pre-pisz { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.pre-pasek { position: relative; width: 220px; height: 2px; background: rgba(255,255,255,.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%, #172B4D 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: #172B4D; color: #fff; }
.bg-brand { background-image: linear-gradient(115deg, #172B4D 0%, #172B4D 10%, #172B4D 100%); }
.text-brand { background-image: linear-gradient(120deg, #172B4D 0%, #1a3050 30%, #1f3a5e 65%, #172B4D 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ring-brand:focus-visible { outline: 2px solid #172B4D; outline-offset: 2px; }
.cta-roll { --cta-roll-ease: cubic-bezier(0.2, 0.7, 0.2, 1); }
.cta-roll:not(.bg-brand):hover,
.cta-roll:not(.bg-brand):focus-visible {
background-color: #09090b;
border-color: #09090b;
color: #ffffff;
}
.cta-roll__text {
position: relative;
display: block;
overflow: hidden;
height: 1.45em;
line-height: 1.45em;
}
.cta-roll__text span {
display: block;
white-space: nowrap;
transition: transform 0.4s var(--cta-roll-ease);
}
.cta-roll__clone {
position: absolute;
left: 0;
top: 0;
transform: translateY(100%);
}
.cta-roll:hover .cta-roll__orig,
.cta-roll:focus-visible .cta-roll__orig {
transform: translateY(-100%);
}
.cta-roll:hover .cta-roll__clone,
.cta-roll:focus-visible .cta-roll__clone {
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.cta-roll__text span { transition: none; }
.cta-roll__clone { display: none; }
.cta-roll:hover .cta-roll__orig,
.cta-roll:focus-visible .cta-roll__orig,
.cta-roll:hover .cta-roll__clone,
.cta-roll:focus-visible .cta-roll__clone {
transform: none;
}
}
.text-outline { color: transparent; -webkit-text-stroke: 1px #d4d4d8; }
.glossary-term {
position: relative;
display: inline;
border-bottom: 1px dotted #172B4D;
color: #18181b;
cursor: help;
text-decoration: none;
}
.glossary-term:focus-visible {
outline: 2px solid #172B4D;
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: #172B4D; 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%, #172B4D 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: #172B4D;
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%, #1a3050 30%, #1f3a5e 65%, #172B4D 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%, #172B4D 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%, #172B4D 100%);
color: #fff;
box-shadow: 0 10px 18px -10px rgba(23,43,77,0.9);
}
.phone-tab.is-active .tab-label { color: #18181b; font-weight: 600; }
/* ── Terminal blocks (light & dark) ── */
.dark-terminal { background: #09090b; 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: #09090b; 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: #172B4D; font-weight: 600; }
.light-terminal .terminal-path { color: #172B4D; }
.light-terminal .terminal-bling { color: #09090b; }
.light-terminal .terminal-comment { color: #a1a1aa; }
.light-terminal .terminal-string { color: #172B4D; }
.light-terminal .terminal-keyword { color: #172B4D; font-weight: 600; }
.light-terminal .terminal-fn { color: #172B4D; }
.terminal-cursor { display: inline-block; width: 8px; height: 17px; background: #172B4D; 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:#172B4D;color:#172B4D}
.cookie-consent-button:focus-visible,.cookie-consent-link:focus-visible,.cookie-consent-trigger:focus-visible{outline:2px solid #172B4D;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%, #172B4D 100%);color:#fff;box-shadow:0 14px 24px -16px rgba(23,43,77,.8)}
.cookie-consent-button--primary:hover{border-color:transparent;background:linear-gradient(115deg,#172B4D 0%, #172B4D 10%, #172B4D 100%);color:#fff;box-shadow:0 18px 30px -18px rgba(23,43,77,.95)}
.cookie-consent-button--neutral{border-color:#172B4D;background:#fff;color:#172B4D;box-shadow:inset 0 0 0 1px rgba(23,43,77,.28)}
.cookie-consent-button--neutral:hover{border-color:#172B4D;background:#f4f4f5;color:#172B4D}
.cookie-consent-button--ghost{border-color:#d4d4d8;color:#172B4D}
.cookie-consent-button--ghost:hover{border-color:#09090b;background:#f4f4f5;color:#172B4D}
.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:#172B4D}
.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:#172B4D;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(255,242,0,.05)}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/80{background-color:hsla(0,0%,100%,.8)}.bg-zinc-100\/60{background-color:hsla(240,5%,96%,.6)}.bg-zinc-200{--tw-bg-opacity:1;background-color:rgb(228 228 231/var(--tw-bg-opacity,1))}.bg-zinc-50{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.from-\[\#e6003d\]\/5{--tw-gradient-from:rgba(255,242,0,.05) var(--tw-gradient-from-position);--tw-gradient-to:rgba(255,242,0,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-\[\#e6003d\]\/10{--tw-gradient-to:rgba(255,242,0,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(255,242,0,.1) var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-\[\#e6003d\]\/20{--tw-gradient-to:rgba(255,242,0,.2) var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.object-top{-o-object-position:top;object-position:top}.p-8{padding:2rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-7{padding-left:1.75rem;padding-right:1.75rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-10{padding-bottom:2.5rem;padding-top:2.5rem}.py-16{padding-bottom:4rem;padding-top:4rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-2\.5{padding-bottom:.625rem;padding-top:.625rem}.py-28{padding-bottom:7rem;padding-top:7rem}.py-3\.5{padding-bottom:.875rem;padding-top:.875rem}.py-4{padding-bottom:1rem;padding-top:1rem}.py-5{padding-bottom:1.25rem;padding-top:1.25rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.py-7{padding-bottom:1.75rem;padding-top:1.75rem}.pb-12{padding-bottom:3rem}.pb-16{padding-bottom:4rem}.pb-2{padding-bottom:.5rem}.pb-20{padding-bottom:5rem}.pb-24{padding-bottom:6rem}.pb-3{padding-bottom:.75rem}.pb-8{padding-bottom:2rem}.pb-9{padding-bottom:2.25rem}.pl-5{padding-left:1.25rem}.pr-6{padding-right:1.5rem}.pt-10{padding-top:2.5rem}.pt-12{padding-top:3rem}.pt-20{padding-top:5rem}.pt-24{padding-top:6rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-display{font-family:Space Grotesk,Inter,sans-serif}.font-mono{font-family:Consolas,SF Mono,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-5xl{font-size:3rem;line-height:1}.text-\[1\.25rem\]{font-size:1.25rem}.text-\[1\.35rem\]{font-size:1.35rem}.text-\[1\.5rem\]{font-size:1.5rem}.text-\[1\.85rem\]{font-size:1.85rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[12vw\]{font-size:12vw}.text-\[13\.5px\]{font-size:13.5px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.text-\[15vw\]{font-size:15vw}.text-\[16px\]{font-size:16px}.text-\[17px\]{font-size:17px}.text-\[18px\]{font-size:18px}.text-\[2\.2rem\]{font-size:2.2rem}.text-\[2\.4rem\]{font-size:2.4rem}.text-\[2\.5rem\]{font-size:2.5rem}.text-\[2\.6rem\]{font-size:2.6rem}.text-\[2\.8rem\]{font-size:2.8rem}.text-\[2\.9rem\]{font-size:2.9rem}.text-\[26vw\]{font-size:26vw}.text-\[2rem\]{font-size:2rem}.text-\[3\.4rem\]{font-size:3.4rem}.text-\[3\.5rem\]{font-size:3.5rem}.text-\[32vw\]{font-size:32vw}.text-\[3rem\]{font-size:3rem}.text-\[6rem\]{font-size:6rem}.text-\[7rem\]{font-size:7rem}.text-\[8rem\]{font-size:8rem}.text-\[9vw\]{font-size:9vw}.font-bold{font-weight:700}.font-light{font-weight:300}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-7{line-height:1.75rem}.leading-8{line-height:2rem}.leading-\[0\.88\]{line-height:.88}.leading-\[0\.92\]{line-height:.92}.leading-\[0\.95\]{line-height:.95}.leading-\[0\.98\]{line-height:.98}.leading-\[1\.04\]{line-height:1.04}.leading-\[1\.05\]{line-height:1.05}.leading-\[1\.06\]{line-height:1.06}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-\[0\.16em\]{letter-spacing:.16em}.tracking-\[0\.22em\]{letter-spacing:.22em}.tracking-\[0\.24em\]{letter-spacing:.24em}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-\[0\.3em\]{letter-spacing:.3em}.tracking-tight{letter-spacing:-.025em}.tracking-tighter{letter-spacing:-.05em}.text-\[\#e6003d\]\/10{color:rgba(255,242,0,.1)}.text-\[\#e6003d\]\/20{color:rgba(255,242,0,.2)}.text-transparent{color:transparent}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-zinc-100\/70{color:hsla(240,5%,96%,.7)}.text-zinc-100\/80{color:hsla(240,5%,96%,.8)}.text-zinc-200{--tw-text-opacity:1;color:rgb(228 228 231/var(--tw-text-opacity,1))}.text-zinc-300{--tw-text-opacity:1;color:rgb(212 212 216/var(--tw-text-opacity,1))}.text-zinc-400{--tw-text-opacity:1;color:rgb(161 161 170/var(--tw-text-opacity,1))}.text-zinc-500{--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity,1))}.text-zinc-600{--tw-text-opacity:1;color:rgb(82 82 91/var(--tw-text-opacity,1))}.text-zinc-700{--tw-text-opacity:1;color:rgb(63 63 70/var(--tw-text-opacity,1))}.text-zinc-900{--tw-text-opacity:1;color:rgb(24 24 27/var(--tw-text-opacity,1))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.shadow-\[0_10px_18px_-10px_rgba\(230\2c 0\2c 61\2c 0\.8\)\]{--tw-shadow:0 10px 18px -10px rgba(255,242,0,.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(255,242,0,.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(255,242,0,.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(255,242,0,.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(255 242 0/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(255 242 0/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(255,242,0,.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(255 242 0/var(--tw-text-opacity,1))}.group.is-active .group-\[\.is-active\]\:rotate-180{--tw-rotate:180deg}.group.is-active .group-\[\.is-active\]\:rotate-180,.group.is-active .group-\[\.is-active\]\:scale-y-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group.is-active .group-\[\.is-active\]\:scale-y-0{--tw-scale-y:0}.group.is-active .group-\[\.is-active\]\:opacity-0{opacity:0}@media (min-width:640px){.sm\:flex{display:flex}.sm\:w-\[350px\]{width:350px}.sm\:w-\[375px\]{width:375px}.sm\:w-\[423px\]{width:423px}.sm\:w-fit{width:-moz-fit-content;width:fit-content}.sm\:max-w-\[280px\]{max-width:280px}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-\[120px_1fr\]{grid-template-columns:120px 1fr}.sm\:grid-cols-\[96px_1fr\]{grid-template-columns:96px 1fr}.sm\:flex-row{flex-direction:row}.sm\:gap-6{gap:1.5rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-6xl{font-size:3.75rem;line-height:1}.sm\:text-7xl{font-size:4.5rem;line-height:1}.sm\:text-\[3\.1rem\]{font-size:3.1rem}}@media (min-width:768px){.md\:col-span-4{grid-column:span 4/span 4}.md\:col-span-5{grid-column:span 5/span 5}.md\:col-span-7{grid-column:span 7/span 7}.md\:col-span-8{grid-column:span 8/span 8}.md\:my-32{margin-bottom:8rem;margin-top:8rem}.md\:mb-20{margin-bottom:5rem}.md\:mt-24{margin-top:6rem}.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:max-w-\[320px\]{max-width:320px}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-\[1\.1fr_1fr\]{grid-template-columns:1.1fr 1fr}.md\:grid-cols-\[1\.3fr_1fr\]{grid-template-columns:1.3fr 1fr}.md\:grid-cols-\[1\.5fr_1fr_1fr_1\.1fr\]{grid-template-columns:1.5fr 1fr 1fr 1.1fr}.md\:grid-cols-\[1fr_1\.12fr\]{grid-template-columns:1fr 1.12fr}.md\:items-end{align-items:flex-end}.md\:items-center{align-items:center}.md\:gap-10{gap:2.5rem}.md\:gap-16{gap:4rem}.md\:justify-self-end{justify-self:end}.md\:border-b-0{border-bottom-width:0}.md\:border-r{border-right-width:1px}.md\:border-zinc-200{--tw-border-opacity:1;border-color:rgb(228 228 231/var(--tw-border-opacity,1))}.md\:p-10{padding:2.5rem}.md\:px-10{padding-left:2.5rem;padding-right:2.5rem}.md\:px-8{padding-left:2rem;padding-right:2rem}.md\:py-10{padding-bottom:2.5rem;padding-top:2.5rem}.md\:py-12{padding-bottom:3rem;padding-top:3rem}.md\:py-20{padding-bottom:5rem;padding-top:5rem}.md\:py-24{padding-bottom:6rem;padding-top:6rem}.md\:py-36{padding-bottom:9rem;padding-top:9rem}.md\:py-40{padding-bottom:10rem;padding-top:10rem}.md\:py-9{padding-bottom:2.25rem;padding-top:2.25rem}.md\:pb-2{padding-bottom:.5rem}.md\:pb-24{padding-bottom:6rem}.md\:pb-28{padding-bottom:7rem}.md\:pb-32{padding-bottom:8rem}.md\:pl-8{padding-left:2rem}.md\:pl-\[calc\(13px\+2\.5rem\)\]{padding-left:calc(13px + 2.5rem)}.md\:pr-8{padding-right:2rem}.md\:pt-1{padding-top:.25rem}.md\:pt-24{padding-top:6rem}.md\:pt-28{padding-top:7rem}.md\:pt-32{padding-top:8rem}.md\:text-right{text-align:right}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-7xl{font-size:4.5rem;line-height:1}.md\:text-\[10vw\]{font-size:10vw}.md\:text-\[12rem\]{font-size:12rem}.md\:text-\[15px\]{font-size:15px}.md\:text-\[18vw\]{font-size:18vw}.md\:text-\[2\.8rem\]{font-size:2.8rem}.md\:text-\[26vw\]{font-size:26vw}.md\:text-\[3\.5rem\]{font-size:3.5rem}.md\:text-\[5vw\]{font-size:5vw}.md\:text-\[8rem\]{font-size:8rem}.md\:text-\[9rem\]{font-size:9rem}}@media (min-width:1024px){.lg\:order-1{order:1}.lg\:order-2{order:2}.lg\:col-span-1{grid-column:span 1/span 1}.lg\:col-span-4{grid-column:span 4/span 4}.lg\:col-span-7{grid-column:span 7/span 7}.lg\:flex{display:flex}.lg\:w-\[406px\]{width:406px}.lg\:w-\[440px\]{width:440px}.lg\:w-\[499px\]{width:499px}.lg\:max-w-\[360px\]{max-width:360px}.lg\:-translate-x-8{--tw-translate-x:-2rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-\[1\.15fr_0\.85fr\]{grid-template-columns:1.15fr .85fr}.lg\:grid-cols-\[1\.2fr_0\.8fr\]{grid-template-columns:1.2fr .8fr}.lg\:justify-end{justify-content:flex-end}.lg\:justify-center{justify-content:center}.lg\:gap-0{gap:0}.lg\:gap-10{gap:2.5rem}.lg\:gap-20{gap:5rem}.lg\:pb-16{padding-bottom:4rem}.lg\:pl-4{padding-left:1rem}.lg\:pr-12{padding-right:3rem}.lg\:text-\[3\.3rem\]{font-size:3.3rem}}@media (min-width:1280px){.xl\:text-\[16rem\]{font-size:16rem}.xl\:text-\[22rem\]{font-size:22rem}.xl\:text-\[24rem\]{font-size:24rem}}
.sekcja-ciemna { background-color: #09090b !important; color: #ffffff; }
.sekcja-ciemna .text-zinc-900 { color: #ffffff !important; }
/* W hero (z animacja w tle) naglowek caly bialy; w pozostalych czarnych sekcjach gradient w naglowkach zostaje */
#top h1 .text-brand { background-image: none; -webkit-background-clip: initial; background-clip: initial; color: #ffffff !important; -webkit-text-fill-color: #ffffff; }
.sekcja-ciemna .text-zinc-700,
.sekcja-ciemna .text-zinc-600,
.sekcja-ciemna .text-zinc-500 { color: #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: #172B4D !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: #172B4D; 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 #172B4D !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, #172B4D 0%, #172B4D 25%, #4b5563 100%); color: #ffffff; }
#zyskujesz .kafle > div:nth-child(5) { background: #e4e4e7; color: #09090b; }
#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: #09090b; }
#zyskujesz .kafle > div:nth-child(2) { background: #172B4D; color: #ffffff; }
#zyskujesz .kafle > div:nth-child(3) { background: #172B4D; 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: #172B4D !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, #09090b 0%, #172B4D 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 #172B4D !important; }
#zyskujesz .kafle > div:nth-child(4) { background: linear-gradient(115deg, #172B4D 0%, #172B4D 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: #172B4D !important; -webkit-text-fill-color: #172B4D !important; }
.bg-brand, .cta-roll.bg-brand { background-image: none !important; background-color: #172B4D !important; }
.kreska-anim::after { background-image: none !important; background-color: #172B4D !important; }
#etapy .text-brand { color: #c8cdd8 !important; -webkit-text-fill-color: #c8cdd8 !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; }
body{background:#ffffff;color:#18181b;margin:0}
@keyframes subtle-float {
0%, 100% { transform: translate(-50%, 0px); }
50% { transform: translate(-50%, -6px); }
}
.animate-subtle-float {
animation: subtle-float 3s ease-in-out infinite;
}
:root { --karta-nachodzi: 3.75rem; }
/* hero ze zdjeciem w tle: zdjecie zaczyna sie pod paskiem menu (pasek u gory przezroczysty), konczy 60 px pod zgieciem ekranu */
#top { margin-top: -68px; padding-top: 68px; padding-bottom: var(--karta-nachodzi); min-height: calc(100vh + var(--karta-nachodzi)); min-height: calc(100svh + var(--karta-nachodzi)); display: flex; align-items: center; background: #09090b url(../assets/images/img-ec27fd66d7.jpg) center center / cover no-repeat; }
#site-header.sekcja-ciemna { background-color: transparent !important; }
/* nieruchome poswiaty w rogach: lewy gorny mocniejszy (jak u Boosta), prawy gorny lzejszy; bez animacji */
#top { overflow: hidden; }
#top::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at top left, #172B4D 0%, #172B4D 5%, rgba(0,0,0,0) 48%); }
/* prawy dolny rog: lzejsza poswiata, ktora bardzo powoli dryfuje (16 s tam i z powrotem) */
#top::after { content: ""; position: absolute; right: -10%; bottom: -10%; width: 70%; height: 90%; z-index: 0; pointer-events: none; background: radial-gradient(circle at 80% 85%, rgba(14, 65, 148,0.8) 0%, rgba(14, 65, 148,0.35) 14%, rgba(0,0,0,0) 42%); transform-origin: 80% 85%; animation: hero-dryf 16s ease-in-out infinite alternate; }
@keyframes hero-dryf { from { transform: translate(0, 0) scale(1); } to { transform: translate(-6%, -5%) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { #top::after { animation: none; } }
#top > * { position: relative; z-index: 1; }
#top > div { width: 100%; }
#top .hero-wyrownanie { display: none !important; }
.pasek-info { position: relative; z-index: 2; margin-top: calc(-1 * var(--karta-nachodzi)); }
.cta-roll, .przycisk-bialy { padding: 0.7rem 1.4rem !important; font-size: 14px !important; }
#korzysci .karta a { padding: 1.1rem 2rem; }
.karta-info { display: grid; box-shadow: 0 30px 60px -30px rgba(9, 9, 11, 0.45); }
@media (min-width: 768px) { .karta-info { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.karta-info .panel { display: flex; flex-direction: column; justify-content: center; gap: 0.35rem; padding: 1.5rem 2rem; }
.karta-info .panel--bialy { background: #ffffff; color: #09090b; }
.karta-info .panel--niebieski { background: #172B4D; color: #ffffff; }
.karta-info .panel--granat { background: #172B4D; color: #ffffff; }
.karta-info .etykieta { font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.7; }
.karta-info .wartosc { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.karta-info .opis { font-size: 15px; opacity: 0.8; }
.karta-info .opis a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.karta-info .gwiazdki { display: inline-flex; gap: 2px; margin-left: 0.5rem; vertical-align: 2px; color: #fbbc04; }
.karta-info .wiersz { display: flex; flex-wrap: wrap; gap: 0.25rem 2rem; }
#oferta-lista .lista { margin-top: 2.5rem; }
/* kreska: 2 px, rysuje sie od lewej do prawej; kolejne z opoznieniem (--i), gdy sekcja wjedzie na ekran */
#oferta-lista .linia { height: 2px; background: transparent; overflow: hidden; }
#oferta-lista .linia span { display: block; height: 100%; width: 0; background: #172B4D; transition: width 1.6s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i) * 0.4s); }
#oferta-lista.is-visible .linia span { width: 100%; }
@media (prefers-reduced-motion: reduce) { #oferta-lista .linia span { width: 100%; transition: none; } }
#oferta-lista .pozycja { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 2rem; padding: 1.75rem 0; }
#oferta-lista .pozycja h3 { font-size: 1.9rem; line-height: 1.02; letter-spacing: -0.03em; font-weight: 600; color: #09090b; }
#oferta-lista .pozycja p { margin-top: 0.75rem; font-size: 14px; line-height: 1.5; color: #18181b; max-width: 62ch; }
#oferta-lista .numer { font-size: 3.25rem; font-weight: 400; line-height: 1; letter-spacing: -0.02em; color: #09090b; }
@media (min-width: 640px) {
#oferta-lista .pozycja { padding: 2.25rem 0; }
#oferta-lista .pozycja h3 { font-size: 2.5rem; }
#oferta-lista .numer { font-size: 4.5rem; }
}
@media (min-width: 1024px) {
#oferta-lista .pozycja h3 { font-size: 3rem; }
#oferta-lista .numer { font-size: 5.5rem; }
}
/* wieksze odstepy miedzy sekcjami na calej stronie */
:root { --sekcja: 3.5rem; }
@media (min-width: 640px) { :root { --sekcja: 5rem; } }
@media (min-width: 1024px) { :root { --sekcja: 7rem; } }
#oferta-lista, #proces.sekcja-proces { background: #f0f2f6 !important; }
#etapy > div { padding-top: var(--sekcja) !important; padding-bottom: var(--sekcja) !important; }
#proces > div { padding-bottom: var(--sekcja) !important; }
#liczby > div { padding-top: var(--sekcja) !important; }
#proces .tytul span { display: block; }
#proces .karty { display: grid; gap: 1.75rem; margin-top: 3rem; }
@media (min-width: 1024px) { #proces .karty { grid-template-columns: 1097fr 774fr; gap: 1.9rem; margin-top: 4rem; } }
#proces .karta-foto, #proces .karta-biala { border-radius: 0 !important; overflow: hidden; }
/* lewa: zdjecie zalane kolorem marki, tekst wysrodkowany w pionie */
#proces .karta-foto { position: relative; display: flex; align-items: flex-start; min-height: 24rem; padding: 3rem 2rem; background: url(../assets/images/img-ec27fd66d7.jpg) 18% center / cover no-repeat; }
#proces .karta-foto::before { content: ""; position: absolute; inset: 0; background: rgba(14, 65, 148,0.88); }
#proces .karta-foto .tresc { position: relative; max-width: 40rem; }
#proces .karta-foto h3 { margin: 0; font-size: 1.6rem !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: -0.01em; color: #ffffff !important; }
#proces .karta-foto p { margin-top: 1.5rem; color: rgba(255,255,255,0.92) !important; }
@media (min-width: 1024px) { #proces .karty { align-items: stretch; } #proces .karta-foto { min-height: 24rem; padding: 3rem 4rem; } #proces .karta-foto h3 { font-size: 2rem !important; } }
/* prawa: biala karta, tekst wysrodkowany + przycisk-pigulka */
#proces .karta-biala { display: flex; align-items: flex-start; padding: 3rem 2rem; background: #ffffff; }
@media (min-width: 1024px) { #proces .karta-biala { padding: 3rem 3.25rem; } }
#proces .karta-biala h3 { margin: 0; font-size: 1.6rem !important; font-weight: 400 !important; line-height: 1.2 !important; color: #172B4D !important; }
@media (min-width: 1024px) { #proces .karta-biala h3 { font-size: 1.85rem !important; } }
#proces .karta-biala p { margin-top: 1.5rem; color: #3f3f46 !important; }
/* ===== JAK ROZPOCZAC WSPOLPRACE (demo 1) = zachowanie 1:1 z demo 4 03-jak.html (#pf-jak) =====
Kolejnosc regul, liczby i media queries jak w demo 4; nazwy jk-/pf- -> zs-, zmienne demo 4 zamienione
na kolory demo 1. Selektory z id sekcji i !important tam, gdzie silnik demo 1 ma globalne reguly
na h2, h3, p i li. .zs-wjazd = .pf-wjazd z demo 4, .zs-widoczne = .pf-widoczne (daje skrypt ponizej). */
#proces.sekcja-zasady {
--zs-gora: 7.5rem; /* top przyklejonego panelu (pasek menu ma 68 px) */
--zs-gora-kart: calc(var(--zs-gora) + 4px);
--zs-krok: 1.25rem; /* o tyle nizej przykleja sie kazda kolejna karta */
--zs-odstep: 1.25rem; /* odstep miedzy kartami w ukladzie */
--zs-ile: 3;
--zs-h: 0px; /* ustawia skrypt: wysokosc najwyzszej karty */
--zs-zapas-kart: 0px; /* ustawia skrypt (zawsze 0, jak w demo 4) */
--zs-zapas-panelu: 0px; /* ustawia skrypt (zawsze 0, jak w demo 4) */
position: relative; /* jak #pf-jak w demo 4 */
}
/* --- wjazd (jak "[data-pf-reveal] .pf-wjazd" z _baza.css demo 4): od dolu o 18 px, kolejnosc przez --zs-i;
opoznienie dziala tez przy chowaniu --- */
#proces .zs-wjazd {
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);
transition-delay: calc(var(--zs-i, 0) * 110ms);
}
#proces.zs-js .zs-wjazd { opacity: 0; transform: translateY(18px); }
/* --- uklad: telefon i tablet - jedna kolumna --- */
#proces .zs-uklad { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2.25rem; }
#proces .zs-panel { display: flex; flex-direction: column; align-items: flex-start; }
/* naglowek jak "main .pf-h2" + ".jk-h2" z demo 4: jeden clamp na wszystkich szerokosciach */
#proces .zs-panel h2.tytul {
width: 100%;
margin: 1.25rem 0 0 !important;
font-size: clamp(2.4rem, 4.6vw, 3.75rem) !important;
font-weight: 600 !important;
line-height: 0.98 !important;
letter-spacing: -0.03em !important;
text-wrap: balance;
}
#proces .zs-panel p.zs-lead {
max-width: 27rem;
margin: 1.75rem 0 0 !important;
font-family: 'Inter', system-ui, sans-serif;
font-size: 17px !important;
line-height: 1.65 !important;
color: #52525b !important;
}
#proces .zs-licznik { display: none; }
/* --- karty --- */
#proces .zs-karty {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-auto-rows: 1fr; /* rowne karty (jak w demo 4 na kazdej szerokosci) */
gap: var(--zs-odstep);
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* silnik: "section li:not(.gbp li)" z !important */
#proces .zs-karty > li.zs-karta {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
box-sizing: border-box;
margin: 0 !important;
padding: 24px 20px 26px !important;
list-style: none !important;
background: #ffffff;
border: 1px solid #e4e4e7;
border-left: 3px solid #172B4D;
border-radius: 0 !important;
color: #3f3f46;
font-size: 16px !important;
line-height: 1.6 !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), border-left-color 0.25s ease;
transition-delay: calc(var(--zs-i, 0) * 110ms), calc(var(--zs-i, 0) * 110ms), 0s;
}
#proces .zs-karty > li.zs-karta::before,
#proces .zs-karty > li.zs-karta::marker { content: none; }
#proces .zs-gora { display: flex; align-items: center; gap: 14px; }
#proces .zs-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: #172B4D;
transition: color 0.25s ease;
}
#proces .zs-kreska { flex: 1 1 auto; min-width: 1.5rem; height: 1px; background: #e4e4e7; }
#proces .zs-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: #71717a;
}
/* silnik: "section h3:not(.gbp h3):not(#oferta-lista h3)" z !important */
#proces .zs-karta h3.zs-nazwa {
margin: 0 !important;
font-family: 'Space Grotesk', system-ui, sans-serif !important;
font-size: 22px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
letter-spacing: -0.015em !important;
text-transform: none !important;
color: #18181b !important;
-webkit-text-fill-color: #18181b !important;
}
/* silnik: "main p" i "section p:not(.gbp p)" z !important */
#proces .zs-karta p.zs-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: #3f3f46 !important;
-webkit-text-fill-color: #3f3f46 !important;
text-wrap: pretty;
}
/* aktywna karta: kreska i numer w koralu */
#proces .zs-karty > li.zs-karta.zs-akt { border-left-color: #FFF200; }
#proces .zs-karta.zs-akt .zs-nr { color: #FFF200; }
/* --- licznik (tylko przy przyklejonym panelu) --- */
#proces .zs-licznik { align-items: center; gap: 16px; padding-top: 8px; }
#proces .zs-tor { position: relative; flex: none; width: 3px; height: 120px; background: #e4e4e7; }
#proces .zs-wypelnienie {
position: absolute;
inset: 0;
background: #FFF200;
transform: scaleY(var(--zs-postep, 0));
transform-origin: 50% 0;
}
#proces .zs-licznik-tekst { display: flex; flex-direction: column; gap: 4px; }
#proces .zs-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: #172B4D;
}
#proces .zs-biezacy { display: inline-block; }
#proces .zs-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: #71717a;
}
/* --- od 640 px: wymiary kart jak w demo 4 --- */
@media (min-width: 640px) {
#proces .zs-uklad { row-gap: 3rem; }
#proces .zs-karty > li.zs-karta { gap: 14px; padding: 30px 34px 34px !important; }
#proces .zs-nr { font-size: 40px; }
#proces .zs-karta h3.zs-nazwa { font-size: 26px !important; }
}
/* --- od 1024 px: dwie rowne kolumny z odstepem 60 px --- */
@media (min-width: 1024px) {
#proces .zs-uklad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 60px; row-gap: 0; align-items: stretch; }
#proces .zs-karty { align-self: start; padding-top: 4px !important; }
}
/* --- przyklejony panel i licznik: od 1024 px, gdy okno ma co najmniej 40 rem wysokosci --- */
@media (min-width: 1024px) and (min-height: 40rem) {
#proces .zs-panel { position: sticky; top: var(--zs-gora); margin-bottom: var(--zs-zapas-panelu); }
#proces .zs-licznik { display: flex; }
}
/* --- karty nakladaja sie przy przewijaniu (tylko ze skryptem, ktory wyrownuje ich wysokosc) --- */
@media (min-width: 1024px) and (min-height: 40rem) and (prefers-reduced-motion: no-preference) {
#proces.zs-js .zs-karty { display: flex; flex-direction: column; gap: 0; }
#proces.zs-js .zs-karty > li.zs-karta {
position: sticky;
top: calc(var(--zs-gora-kart) + var(--zs-n, 0) * var(--zs-krok));
min-height: var(--zs-h);
margin-bottom: 0 !important;
}
#proces.zs-js .zs-karty > li.zs-karta + li.zs-karta { margin-top: var(--zs-odstep) !important; }
}
/* pomiar naturalnej wysokosci kart (skrypt dodaje klase na chwile) */
#proces.zs-mierzy .zs-karty { grid-auto-rows: auto !important; align-items: start !important; }
#proces.zs-mierzy .zs-karty > li.zs-karta { min-height: 0 !important; }
/* --- odslanianie: stan poczatkowy .zs-wjazd tylko ze skryptem sekcji; gdy obserwator nie ruszy
(.zs-awaryjnie) wszystko widoczne, kreska malego naglowka narysowana --- */
#proces.zs-js.zs-widoczne .zs-wjazd,
#proces.zs-js.zs-awaryjnie .zs-wjazd { opacity: 1; transform: none; }
/* bez skryptu sekcji kreska malego naglowka narysowana (jak "#pf-jak:not(.jk-js) .pf-nadtytul::after" w demo 4) */
#proces:not(.zs-js) .zs-nad .kreska-anim::after { width: 100%; }
/* kreska malego naglowka (span.kreska-anim demo 1, 0,7 s ease-out 0,15 s): rysuje sie i zwija razem
z .zs-widoczne jak kreska w demo 4, a nie raz na zawsze z globalnego obserwatora kresek */
@media (prefers-reduced-motion: no-preference) {
#proces.zs-js .zs-nad .kreska-anim::after { width: 0; }
#proces.zs-js.zs-widoczne .zs-nad .kreska-anim::after,
#proces.zs-js.zs-awaryjnie .zs-nad .kreska-anim::after { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
#proces .zs-wjazd { opacity: 1 !important; transform: none !important; }
#proces .zs-wjazd,
#proces .zs-karty > li.zs-karta,
#proces .zs-nr { transition: none !important; }
}
/* system naglowkow jak w demo 4 (15.09.2026): maly naglowek - naglowek 20 px, od 768 px 24 px;
naglowek - lead 28 px; lead - licznik 26 px. Div malego naglowka ma pb-8 (musi zostac dla
koral_wariant.rb), wiec jego dolny odstep zdejmuje regula przez otoczke .zs-nad. */
#proces .zs-panel { gap: 0; }
#proces .zs-nad > div { padding-bottom: 0 !important; }
#proces .zs-panel .zs-licznik { margin-top: 26px; }
@media (min-width: 768px) {
#proces .zs-panel h2.tytul { margin-top: 1.5rem !important; }
}
/* ===== CENNIK (15.09.2026): biale tlo jak cala strona; uklad pierwszej wersji (pelna lista w kartach), ok. 3/4 jej wysokosci ===== */
html body section#cennik { background: #ffffff !important; }
/* dwie biale sekcje obok siebie: po polowie odstepu (system strony); pod spodem granat - pelny odstep */
html body #proces > div { padding-bottom: calc(var(--sekcja) / 2) !important; }
html body section#cennik > div { padding-top: calc(var(--sekcja) / 2) !important; padding-bottom: var(--sekcja) !important; }
#cennik .tytul span { display: block; }
html body #cennik .kreska-anim::after { background: #FFF200 !important; background-color: #FFF200 !important; }
#cennik .cn-siatka { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 1024px) { #cennik .cn-siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; margin-top: 2.5rem; } }
#cennik .cn-karta { position: relative; display: flex; flex-direction: column; padding: 1.5rem 1.75rem; background: #ffffff; color: #172B4D; border: 1px solid #e4e4e7; border-radius: 0 !important; box-shadow: 0 30px 60px -44px rgba(23, 43, 77, 0.4); }
#cennik .cn-karta--polecany { background: #172B4D; color: #ffffff; border-color: #172B4D; }
@media (min-width: 1024px) { #cennik .cn-karta--polecany { padding: 2.25rem 1.75rem; } }
html body #cennik .cn-karta .cn-etykieta { margin: 0 0 0.4rem !important; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 11px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0.16em; text-transform: uppercase; color: #FFF200 !important; }
html body #cennik .cn-karta .cn-nazwa { margin: 0 !important; font-family: 'Space Grotesk', system-ui, sans-serif !important; font-size: 20px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; text-transform: none !important; color: inherit !important; -webkit-text-fill-color: currentColor !important; }
html body #cennik .cn-karta .cn-cena { margin: 0.6rem 0 0 !important; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 40px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: -0.03em; color: inherit !important; font-variant-numeric: tabular-nums; }
html body #cennik .cn-karta .cn-cena small { margin-left: 0.3rem; font-size: 18px; font-weight: 500; letter-spacing: 0; }
html body #cennik .cn-karta .cn-jednostka { margin: 0.3rem 0 0 !important; font-size: 13px !important; line-height: 1.4 !important; color: #71717a !important; }
html body #cennik .cn-karta--polecany .cn-jednostka { color: rgba(255, 255, 255, 0.7) !important; }
html body #cennik .cn-lista { display: grid; gap: 0.45rem; margin: 1rem 0 0 !important; padding: 1rem 0 0 !important; border-top: 1px solid #e4e4e7; list-style: none !important; }
html body #cennik .cn-karta--polecany .cn-lista { border-top-color: rgba(255, 255, 255, 0.16); }
html body #cennik .cn-lista li { position: relative; margin: 0 !important; padding: 0 0 0 1.6rem !important; list-style: none !important; font-size: 14px !important; line-height: 1.4 !important; color: #3f3f46 !important; }
html body #cennik .cn-karta--polecany .cn-lista li { color: rgba(255, 255, 255, 0.88) !important; }
html body #cennik .cn-lista li.cn-glowny { font-weight: 600 !important; color: #0E4194 !important; }
html body #cennik .cn-karta--polecany .cn-lista li.cn-glowny { color: #ffffff !important; }
html body #cennik .cn-lista li::before { content: "" !important; position: absolute; left: 0; top: 0.15em; width: 1rem; height: 1rem; background: #0E4194; }
html body #cennik .cn-lista li::after { content: "" !important; position: absolute; left: 0.35rem; top: 0.33em; width: 0.28rem; height: 0.5rem; border: solid #ffffff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
html body #cennik .cn-karta--polecany .cn-lista li::before { background: #FFF200; }
html body #cennik .cn-karta--polecany .cn-lista li::after { border-color: #172B4D; }
#cennik .cn-akcja { margin-top: auto; padding-top: 1.25rem; }
#cennik .cn-akcja .cta-roll { display: flex !important; width: 100%; }
#cennik .cn-przycisk { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 40px; padding: 0 1rem; border: 1px solid #172B4D; color: #172B4D; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 15px; font-weight: 500; text-decoration: none; transition: background-color 0.25s ease, color 0.25s ease; }
#cennik .cn-przycisk:hover, #cennik .cn-przycisk:focus-visible { background: #172B4D; color: #ffffff; }
html body #cennik .cn-nota { margin: 1rem 0 0 !important; font-size: 12.5px !important; line-height: 1.5 !important; color: #71717a !important; text-align: center; }
/* 15.09.2026 (Mateusz): przyciski bocznych kart niebieskie */ #cennik .cn-przycisk { background: #0E4194 !important; border-color: #0E4194 !important; color: #ffffff !important; } #cennik .cn-przycisk:hover, #cennik .cn-przycisk:focus-visible { background: #172B4D !important; border-color: #172B4D !important; color: #ffffff !important; } /* 1024-1279 px: wezsze karty - mniejszy boczny margines w karcie, zeby kazdy punkt byl w jednym wierszu */ @media (min-width: 1024px) and (max-width: 1279px) { #cennik .cn-karta, #cennik .cn-karta--polecany { padding-left: 1.25rem; padding-right: 1.25rem; } } /* 15.09.2026 (Mateusz): "ciut powieksz" - wieksze karty, cena, nazwa i punkty */
#cennik .cn-siatka { gap: 1.5rem; }
#cennik .cn-karta { padding: 2rem 1.75rem 1.75rem; }
@media (min-width: 1024px) { #cennik .cn-karta--polecany { padding: 2.75rem 1.75rem 2.5rem; } }
@media (min-width: 1024px) and (max-width: 1279px) { #cennik .cn-karta, #cennik .cn-karta--polecany { padding-left: 1.25rem; padding-right: 1.25rem; } }
html body #cennik .cn-karta .cn-nazwa { font-size: 22px !important; }
html body #cennik .cn-karta .cn-cena { margin-top: 0.75rem !important; font-size: 48px !important; }
html body #cennik .cn-karta .cn-cena small { font-size: 21px; }
html body #cennik .cn-karta .cn-jednostka { margin-top: 0.4rem !important; font-size: 14px !important; }
html body #cennik .cn-lista { gap: 0.6rem; margin-top: 1.25rem !important; padding-top: 1.25rem !important; }
html body #cennik .cn-lista li { padding-left: 1.75rem !important; font-size: 15px !important; line-height: 1.45 !important; }
html body #cennik .cn-lista li::before { width: 1.1rem; height: 1.1rem; top: 0.17em; }
html body #cennik .cn-lista li::after { left: 0.39rem; top: 0.36em; width: 0.3rem; height: 0.56rem; }
#cennik .cn-akcja { padding-top: 1.5rem; }
#cennik .cn-przycisk { min-height: 44px; font-size: 15.5px; }
#cennik .cn-akcja .cta-roll { min-height: 44px; }
@media (min-width: 1024px) and (max-width: 1099px) { html body #cennik .cn-lista li { font-size: 14px !important; } } /* 15.09.2026 (Mateusz): przyciski bocznych kart z powrotem biale z granatowa obwodka; po najechaniu granat wjezdza od lewej,
napis bieleje, strzalka przesuwa sie w prawo; srodkowy pakiet w gradiencie od niebieskiego do granatu */
#cennik .cn-przycisk { position: relative; overflow: hidden; isolation: isolate; background: #ffffff !important; border-color: #172B4D !important; color: #172B4D !important; transition: color 0.35s ease !important; }
#cennik .cn-przycisk::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #172B4D; transform: scaleX(0); transform-origin: left center; transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
#cennik .cn-przycisk svg { transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); }
#cennik .cn-przycisk:hover, #cennik .cn-przycisk:focus-visible { background: #ffffff !important; border-color: #172B4D !important; color: #ffffff !important; }
#cennik .cn-przycisk:hover::before, #cennik .cn-przycisk:focus-visible::before { transform: scaleX(1); }
#cennik .cn-przycisk:hover svg, #cennik .cn-przycisk:focus-visible svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { #cennik .cn-przycisk, #cennik .cn-przycisk::before, #cennik .cn-przycisk svg { transition: none !important; } }
#cennik .cn-karta.cn-karta--polecany { background: linear-gradient(145deg, #0E4194 0%, #172B4D 100%) !important; border-color: transparent !important; }
/* 15.09.2026 (Mateusz): po najechaniu boki przycisku podswietlaja sie jeden po drugim jak waz ze Snake'a, szybko
(gora od lewej, prawy bok w dol, dol od prawej, lewy bok w gore); przycisk zostaje bialy, bez wypelnienia */
#cennik .cn-przycisk:hover, #cennik .cn-przycisk:focus-visible { background: #ffffff !important; color: #172B4D !important; }
#cennik .cn-przycisk::before {
z-index: 1; inset: -1px; transform: none !important; transition: none !important; pointer-events: none;
background:
linear-gradient(#0E4194, #0E4194) left top / 0 3px no-repeat,
linear-gradient(#0E4194, #0E4194) right top / 3px 0 no-repeat,
linear-gradient(#0E4194, #0E4194) right bottom / 0 3px no-repeat,
linear-gradient(#0E4194, #0E4194) left bottom / 3px 0 no-repeat;
}
#cennik .cn-przycisk:hover::before, #cennik .cn-przycisk:focus-visible::before { animation: cn-waz 0.44s linear forwards; }
@keyframes cn-waz {
0% { background-size: 0 3px, 3px 0, 0 3px, 3px 0; }
25% { background-size: 100% 3px, 3px 0, 0 3px, 3px 0; }
50% { background-size: 100% 3px, 3px 100%, 0 3px, 3px 0; }
75% { background-size: 100% 3px, 3px 100%, 100% 3px, 3px 0; }
100% { background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%; }
}
@media (prefers-reduced-motion: reduce) { #cennik .cn-przycisk:hover::before, #cennik .cn-przycisk:focus-visible::before { animation: none; background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%; } }
/* waz wyrazniej (Mateusz: "nie ma animacji" - niebieska kreska byla przycieta pod granatowa obwodka i prawie niewidoczna):
kreska 3 px na zewnatrz obwodki, bez przycinania, obieg 0,5 s */
#cennik .cn-przycisk { overflow: visible !important; }
#cennik .cn-przycisk::before { inset: -4px !important; z-index: 0 !important; }
#cennik .cn-przycisk:hover::before, #cennik .cn-przycisk:focus-visible::before { animation: cn-waz 0.5s linear forwards !important; }
/* 15.09.2026 (Mateusz, doprecyzowanie): przycisk przed najechaniem bialy, po najechaniu niebieski;
animacja weza (cieniutka linia 1 px) biegnie po obwodzie CALEJ KARTY po najechaniu na karte - na bialych kartach niebieska, na srodkowej zolta */
#cennik .cn-przycisk { overflow: hidden !important; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important; }
#cennik .cn-przycisk::before { content: none !important; animation: none !important; }
#cennik .cn-przycisk:hover, #cennik .cn-przycisk:focus-visible { background: #0E4194 !important; border-color: #0E4194 !important; color: #ffffff !important; }
#cennik .cn-karta { --waz: #0E4194; }
#cennik .cn-karta.cn-karta--polecany { --waz: #FFF200; }
#cennik .cn-karta::after {
content: ""; position: absolute; inset: -1px; z-index: 2; pointer-events: none;
background:
linear-gradient(var(--waz), var(--waz)) left top / 0 1px no-repeat,
linear-gradient(var(--waz), var(--waz)) right top / 1px 0 no-repeat,
linear-gradient(var(--waz), var(--waz)) right bottom / 0 1px no-repeat,
linear-gradient(var(--waz), var(--waz)) left bottom / 1px 0 no-repeat;
}
#cennik .cn-karta:hover::after, #cennik .cn-karta:focus-within::after { animation: cn-waz-karta 0.6s linear forwards; }
@keyframes cn-waz-karta {
0% { background-size: 0 1px, 1px 0, 0 1px, 1px 0; }
25% { background-size: 100% 1px, 1px 0, 0 1px, 1px 0; }
50% { background-size: 100% 1px, 1px 100%, 0 1px, 1px 0; }
75% { background-size: 100% 1px, 1px 100%, 100% 1px, 1px 0; }
100% { background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%; }
}
@media (prefers-reduced-motion: reduce) { #cennik .cn-karta:hover::after, #cennik .cn-karta:focus-within::after { animation: none; background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%; } }
/* 15.09.2026 (Mateusz): zamiast weza dookola - tylko gorna kreska 3 px rysowana od lewej do prawej po najechaniu na karte
(niebieska na bialych kartach, zolta na srodkowej) */
#cennik .cn-karta::after {
inset: -1px -1px auto -1px !important; height: 3px;
background: linear-gradient(var(--waz), var(--waz)) left top / 0 100% no-repeat !important;
transition: background-size 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
#cennik .cn-karta:hover::after, #cennik .cn-karta:focus-within::after { animation: none !important; background-size: 100% 100% !important; }
@media (prefers-reduced-motion: reduce) { #cennik .cn-karta::after { transition: none; } }
/* 15.09.2026 (Mateusz): najechany kafelek lekko sie podnosi (translate, zeby nie gryzlo sie z animacja wjazdu na transform) */
#cennik .cn-karta { transition: translate 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease; }
@media (hover: hover) and (pointer: fine) {
#cennik .cn-karta:hover { translate: 0 -8px; box-shadow: 0 46px 70px -40px rgba(23, 43, 77, 0.5); }
}
@media (prefers-reduced-motion: reduce) { #cennik .cn-karta { transition: none; } }
/* Karta Profilu Firmy w Google — czysty HTML, żeby dało się edytować tekst i podmienić zdjęcia */
.gbp { background:#ffffff; border-radius:14px; padding:10px 10px 14px; color:#202124; font-family:Roboto, "Helvetica Neue", Arial, sans-serif; box-shadow:0 24px 40px -24px rgba(0,0,0,.8); }
.gbp-photos { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:4px; height:190px; border-radius:8px; overflow:hidden; }
.gbp-tile { position:relative; overflow:hidden; background:#d6d9de; }
.gbp-tile img { width:100%; height:100%; object-fit:cover; display:block; }
.gbp-tile--big { grid-row:1 / span 2; background:linear-gradient(160deg,#9aa4ad,#5f6a74); }
.gbp-tile--map { background:#e8efe5; background-image:linear-gradient(#ffffff 1.5px, transparent 1.5px), linear-gradient(90deg,#ffffff 1.5px, transparent 1.5px); background-size:34px 34px; }
.gbp-tile--front { background:linear-gradient(160deg,#c5ccd3,#8d969f); }
.gbp-pin { position:absolute; left:50%; top:50%; transform:translate(-50%,-90%); width:20px; height:28px; }
.gbp-tile-label { position:absolute; left:8px; bottom:8px; padding:5px 9px; border-radius:6px; background:rgba(32,33,36,.72); color:#fff; font-size:12px; font-weight:500; line-height:1; white-space:nowrap; }
.gbp-tile-label--right { left:auto; right:8px; }
.gbp-name { margin:14px 6px 0; font-size:17px; font-weight:600; line-height:1.25; letter-spacing:-.01em; }
.gbp-rating { display:flex; align-items:center; gap:6px; margin:8px 6px 0; font-size:13px; }
.gbp-stars { display:inline-flex; gap:1px; color:#fbbc04; }
.gbp-stars svg { width:13px; height:13px; }
.gbp-reviews { color:#1a73e8; }
.gbp-info { width:13px; height:13px; color:#5f6368; }
.gbp-cat { margin:6px 6px 0; font-size:13px; color:#5f6368; }
.gbp-actions { display:flex; flex-wrap:wrap; column-gap:8px; row-gap:0; margin:12px 6px 0; }
.gbp-actions-break { flex-basis:100%; height:0; margin-bottom:8px; }
.gbp-actions span:not(.gbp-actions-break) { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border:1px solid #dadce0; border-radius:999px; font-size:13px; color:#3c4043; white-space:nowrap; }
.gbp-actions svg { width:15px; height:15px; color:#1a73e8; flex:none; }
/* Wyniki: 3 liczby w rzędzie, oddzielone pionową linią */
.wynik { display:flex; justify-content:space-between; align-items:stretch; gap:12px; }
.wynik > div { flex:0 0 auto; }
.wynik-linia { flex:0 0 1px; width:1px; background:#27272a; align-self:stretch; }
.wynik-liczba { display:flex; align-items:center; gap:6px; }
.wynik-liczba svg { width:14px; height:14px; color:#172B4D; flex:none; }
/* Linie i kropki nagłówków 01/02/03 na czarnym tle */
#realizacje .realizacja-linia { background:#3f3f46; }
#realizacje .realizacja-kropka, #dlaczego-my .realizacja-kropka { width:8px; height:8px; flex:none; }
/* Jak zadbamy: kropka przy 01 czerwona, przy 02 czarna */
#dlaczego-my .mt-12.flex > .realizacja-kropka { background-image: none; background-color: #18181b; }
@media (min-width:768px) {
#realizacje article { padding-top:0; padding-bottom:0; }
/* Wyrównanie wierszy między kolumnami: numer, nazwa, karta, wyniki, opis */
#realizacje .realizacje-grid { grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-rows: repeat(5, auto); }
#realizacje article { display:grid; grid-template-rows: subgrid; grid-row: span 5; align-content:start; }
}
#etapy { position: relative; background: url(../assets/images/img-ec27fd66d7.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; }
/* wysrodkowany blok kontaktowy pod etapami, na tym samym gradiencie */
#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; }
#opinie.sekcja-opinie { background: #f0f2f6 !important; }
#opinie .tytul span { display: block; }
#opinie .karty { display: grid; gap: 1.75rem; margin-top: 3rem; }
@media (min-width: 1024px) { #opinie .karty { grid-template-columns: 1097fr 774fr; gap: 1.9rem; margin-top: 4rem; align-items: stretch; } }
#opinie .karta-biala, #opinie .karta-kolor { border-radius: 0 !important; overflow: hidden; }
/* lewa: biala karta z opinia */
#opinie .karta-biala { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 24rem; padding: 3rem 2rem; background: #ffffff; }
@media (min-width: 1024px) { #opinie .karta-biala { padding: 3rem 4rem; } }
#opinie .cudzyslow { display: block; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 5rem; font-weight: 700; line-height: 0.7; color: #172B4D; }
/* wszystkie opinie w tej samej komorce siatki: wysokosc karty = najdluzsza opinia, nie zmienia sie przy przelaczaniu */
#opinie .stos { display: grid; margin-top: 1.75rem; }
#opinie .opinia { grid-area: 1 / 1; margin: 0; visibility: hidden; opacity: 0; transition: opacity 0.35s ease; }
#opinie .opinia.aktywna { visibility: visible; opacity: 1; }
#opinie .opinia p { font-size: 1.0625rem !important; line-height: 1.65 !important; color: #27272a !important; }
@media (min-width: 1024px) { #opinie .opinia p { font-size: 1.1875rem !important; } }
#opinie .autor { margin-top: 1.75rem; }
#opinie .autor .imie { display: block; font-weight: 600; color: #172B4D; }
#opinie .autor .rola { display: block; margin-top: 0.15rem; font-size: 15px; color: #71717a; }
#opinie .nawigacja { display: flex; gap: 0.75rem; margin-top: 2rem; }
#opinie .strzalka { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #d4d4d8; border-radius: 0 !important; background: #ffffff; color: #172B4D; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; }
#opinie .strzalka:hover { border-color: #172B4D; color: #172B4D; }
/* prawa: karta w kolorze marki, bez zdjecia */
#opinie .karta-kolor { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 3rem 2rem; background: url(../assets/images/img-a9652030bf.jpg) center 35% / cover no-repeat; color: #ffffff; }
#opinie .karta-kolor::before { content: ""; position: absolute; inset: 0; background: rgba(14, 65, 148,0.9); }
#opinie .karta-kolor > * { position: relative; }
@media (min-width: 1024px) { #opinie .karta-kolor { padding: 3rem 3.25rem; } }
#opinie .ocena { border: 0 !important; display: flex; align-items: baseline; gap: 0.35rem; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 4.5rem; font-weight: 600; line-height: 1; letter-spacing: -0.04em; }
#opinie .ocena small { font-size: 1.5rem; font-weight: 400; letter-spacing: 0; color: rgba(255,255,255,0.7); }
#opinie .gwiazdki { display: flex; gap: 3px; margin-top: 1.25rem; }
#opinie .karta-kolor .kreska { height: 2px; margin: 2rem 0 1.5rem; background: rgba(255,255,255,0.35); }
#opinie .dol { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
#opinie .dol strong { display: block; font-size: 1.25rem; font-weight: 500; }
#opinie .dol span { display: block; margin-top: 0.15rem; font-size: 15px; color: rgba(255,255,255,0.75); }
#komu { background: #f0f2f6; }
#komu .tytul span { display: block; }
#komu .lista { margin-top: 3.5rem; border-top: 2px solid #d4d4d8; }
#komu .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) { #komu .wiersz { grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1.1fr); gap: 2.5rem; padding: 2rem 1.75rem; } }
#komu .ikona { color: #172B4D; transition: color 0.3s ease; }
#komu .wiersz h3 { margin: 0; font-size: 1.35rem !important; font-weight: 400 !important; color: #09090b !important; transition: color 0.3s ease; }
#komu .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) { #komu .wiersz p { text-align: right; } }
/* zalanie kolorem marki po najechaniu */
/* niebieski podnosi sie z pozycji lezacej do pionu, jak klapa obracana wokol dolnej krawedzi */
#komu .wiersz { position: relative; }
#komu .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); }
#komu .wiersz:hover::before { transform: scaleY(1); }
#komu .wiersz > * { position: relative; z-index: 1; }
#komu .wiersz:hover .ikona, #komu .wiersz:hover h3 { color: #ffffff !important; }
#komu .wiersz:hover p { color: rgba(255,255,255,0.9) !important; }
@media (prefers-reduced-motion: reduce) { #komu .wiersz::before { transition: none; } }
#kontakt-cta { position: relative; background: url(../assets/images/img-ec27fd66d7.jpg) 82% center / cover no-repeat; color: #ffffff; }
#kontakt-cta::before { content: ""; position: absolute; inset: 0; background: rgba(23,43,77,0.93); }
#kontakt-cta > div { position: relative; }
#kontakt-cta .srodek { max-width: 46rem; margin: 0 auto; text-align: center; }
#kontakt-cta h2 { color: #ffffff !important; }
#kontakt-cta p { margin-top: 1.5rem; color: rgba(255,255,255,0.8) !important; }
#kontakt-cta .przycisk { margin-top: 2.25rem; }
#warunki { background: #f0f2f6; }
#warunki .uklad { display: grid; gap: 3rem; }
@media (min-width: 1024px) { #warunki .uklad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: center; } }
#warunki .karta { padding: 2.5rem 2rem; background: #ffffff; }
@media (min-width: 1024px) { #warunki .karta { padding: 3rem 2.75rem; } }
#warunki .lista { list-style: none; margin: 0; padding: 0; }
#warunki .punkt { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.1rem; padding: 1.5rem 0; border-bottom: 2px solid #e4e4e7; }
#warunki .punkt:first-child { padding-top: 0; }
#warunki .punkt:last-child { padding-bottom: 0; border-bottom: 0; }
#warunki .znak { display: grid; place-items: center; width: 30px; height: 30px; margin-top: 2px; background: #172B4D; color: #ffffff; }
#warunki .punkt h3 { margin: 0; color: #09090b !important; }
#warunki .punkt p { margin-top: 0.4rem; color: #52525b !important; }
#warunki .lewa p { margin-top: 1.5rem; color: #52525b !important; }
#warunki .lewa .przycisk { margin-top: 2.25rem; }
/* ===== PYTANIA (FAQ) - wg zrzutu od Mateusza ===== */
/* odstepy: #warunki nad nami tez na bieli - po polowie; pod spodem granat - pelny odstep */
section#warunki > div { padding-bottom: calc(var(--sekcja) / 2) !important; }
section#pytania { position: relative; background: #ffffff !important; }
section#pytania > div { padding-top: calc(var(--sekcja) / 2) !important; padding-bottom: var(--sekcja) !important; }
#pytania .tytul span { display: block; }
#pytania h2.tytul { margin: 0 !important; }
#pytania .pyt-lista { margin-top: 3rem; border-top: 1px solid #e4e4e7; }
#pytania .pyt-poz {
position: relative;
border-bottom: 1px solid #e4e4e7;
/* zamkniete pytanie zawsze szare jak zamkniety kafel (Mateusz 15.09.2026) */
background: #f4f4f5;
transition: background-color 0.35s ease;
}
#pytania .pyt-naglowek { margin: 0 !important; padding: 0 !important; font-size: inherit !important; line-height: inherit !important; }
#pytania .pyt-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 16px !important;
background: none;
border: 0;
border-radius: 0;
text-align: left;
cursor: pointer;
box-shadow: inset 0 0 0 0 transparent;
transition: box-shadow 0.3s ease;
}
#pytania .pyt-przycisk:focus-visible { outline: 2px solid #172B4D; outline-offset: -2px; }
#pytania .pyt-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: #71717a;
transition: color 0.3s ease;
}
#pytania .pyt-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: #172B4D;
transition: color 0.3s ease;
}
/* przycisk: kwadrat z plusem; otwarty - koralowy romb z krzyzykiem */
#pytania .pyt-znak {
position: relative;
flex: none;
width: 44px;
height: 44px;
border: 1px solid #172B4D;
background: transparent;
transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.3s ease, border-color 0.3s ease;
}
#pytania .pyt-znak::before,
#pytania .pyt-znak::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 14px;
height: 1.5px;
background: #172B4D;
transform: translate(-50%, -50%);
transition: background-color 0.3s ease;
}
#pytania .pyt-znak::after { transform: translate(-50%, -50%) rotate(90deg); }
@media (hover: hover) and (pointer: fine) {
#pytania .pyt-poz:not(.pyt-otwarte) .pyt-przycisk:hover .pyt-znak { background: #172B4D; }
#pytania .pyt-poz:not(.pyt-otwarte) .pyt-przycisk:hover .pyt-znak::before,
#pytania .pyt-poz:not(.pyt-otwarte) .pyt-przycisk:hover .pyt-znak::after { background: #ffffff; }
}
/* odpowiedz: rozwijanie przez wysokosc wiersza siatki */
#pytania .pyt-odp {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
#pytania .pyt-odp-in { min-height: 0; overflow: hidden; }
#pytania .pyt-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 */
#pytania .pyt-poz.pyt-otwarte { background: #172B4D; border-bottom-color: #172B4D; box-shadow: inset 3px 0 0 #FFF200; }
/* bez koralowej ramki wokol wiersza pytania (Mateusz: pozioma czerwona kreska niepotrzebna) - zostaje kreska z lewej */
/* najechanie na zamkniete pytanie: szare tlo */
@media (hover: hover) and (pointer: fine) {
#pytania .pyt-poz:not(.pyt-otwarte):hover { background: #eaeaed; }
}
#pytania .pyt-otwarte .pyt-nr { color: #FFF200; }
#pytania .pyt-otwarte .pyt-tekst { color: #ffffff; }
#pytania .pyt-otwarte .pyt-znak { background: #FFF200; border-color: #FFF200; transform: rotate(45deg); }
#pytania .pyt-otwarte .pyt-znak::before,
#pytania .pyt-otwarte .pyt-znak::after { background: #ffffff; }
#pytania .pyt-otwarte .pyt-odp { grid-template-rows: 1fr; }
/* linia nad otwarta pozycja znika pod ramka */
#pytania .pyt-poz:has(+ .pyt-otwarte) { border-bottom-color: transparent; }
/* --- od 640 px --- */
@media (min-width: 640px) {
#pytania .pyt-lista { margin-top: 4rem; }
#pytania .pyt-przycisk { grid-template-columns: 4.5rem minmax(0, 1fr) auto; column-gap: 0; min-height: 100px; padding: 20px 24px !important; }
#pytania .pyt-nr { font-size: 14px; }
#pytania .pyt-tekst { padding-right: 2rem; font-size: 20px; }
#pytania .pyt-znak { width: 52px; height: 52px; }
#pytania .pyt-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: wymiary ze zrzutu --- */
@media (min-width: 1024px) {
#pytania .pyt-przycisk { grid-template-columns: 5.75rem minmax(0, 1fr) auto; min-height: 112px; padding: 20px 32px !important; }
#pytania .pyt-tekst { font-size: 22px; }
#pytania .pyt-znak { width: 56px; height: 56px; }
#pytania .pyt-odp p { max-width: calc(5.75rem + 32px + 34rem); padding: 16px 32px 44px calc(32px + 5.75rem) !important; }
}
@media (prefers-reduced-motion: reduce) {
#pytania .pyt-poz, #pytania .pyt-przycisk, #pytania .pyt-nr, #pytania .pyt-tekst,
#pytania .pyt-znak, #pytania .pyt-znak::before, #pytania .pyt-znak::after, #pytania .pyt-odp { transition: none !important; }
}
#rozmowa { position: relative; overflow: hidden; background: #f0f2f6; }
#rozmowa .znak-wodny { position: absolute; inset-inline: 0; top: 50%; transform: translateY(-50%); text-align: center; pointer-events: none; user-select: none; z-index: 0; }
#rozmowa .uklad { position: relative; z-index: 1; display: grid; gap: 2.5rem; align-items: end; }
@media (min-width: 768px) { #rozmowa .uklad { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; } }
#rozmowa .prawa { text-align: left; }
@media (min-width: 768px) { #rozmowa .prawa { text-align: right; } }
#rozmowa .prawa p { margin-top: 1.25rem; color: #52525b !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, #172B4D 0%, #172B4D 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: #172B4D !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(../assets/images/img-01bdfcb216.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(9,9,11,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(9,9,11,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(9,9,11,0.5) !important; }
section#kontakt-cta { background-image: url(../assets/images/img-8ba7670587.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(9,9,11,0.5) !important; }
#opinie .karta-kolor { background-image: url(../assets/images/img-9226275cbb.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(9,9,11,0.48) !important; }
/* ===== PELNA BIEL NA CIEMNYM: zadnej bieli z kryciem, bo wychodzi szaro ===== */
section#etapy, section#etapy p, section#etapy h2, section#etapy h3, section#etapy span, section#etapy div,
section#kontakt-cta, section#kontakt-cta p, section#kontakt-cta h2, section#kontakt-cta span,
#proces .karta-foto, #proces .karta-foto p, #proces .karta-foto h3,
#opinie .karta-kolor, #opinie .karta-kolor p, #opinie .karta-kolor span, #opinie .karta-kolor strong, #opinie .karta-kolor small, #opinie .karta-kolor div,
#top .text-zinc-500, #top h1
{ color: #ffffff !important; }
section#etapy .etap .numer { border-color: 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: #09090b !important; -webkit-text-fill-color: #09090b !important; background-image: none !important; }
main h2 .text-brand, footer h2 .text-brand,
#oferta-lista h2 .text-brand, #proces h2 .text-brand, #opinie h2 .text-brand, #komu h2 .text-brand
{ color: #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(9, 9, 11, 0.34), 0 8px 22px -10px rgba(9, 9, 11, 0.18) !important;
}
/* ===== PRZYCIEMNIENIA (10.09.2026 v4): metoda z Canvy, odczytana ze zrzutu klienta.
Regresja wyniku wzgledem oryginalnego zdjecia dala krycie 0.929 i kolor rgb(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: #172B4D !important;
}
#proces .karta-foto::before, #opinie .karta-kolor::before { background: transparent !important; }
#komu .wiersz::before { background: #09090b !important; }
/* kwadraciki z fajkami: granat zamiast czerni, fajka biala */
#warunki .znak { background: #172B4D !important; color: #ffffff !important; }
#warunki .znak svg { color: #ffffff !important; stroke: #ffffff !important; }
/* ===== CZERWONY AKCENT #FFF200 (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: #FFF200 !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 #FFF200 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: #FFF200 !important;
border-color: transparent !important;
color: #ffffff !important;
box-shadow: 0 18px 30px -14px rgba(255, 242, 0, 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: #FFF200 !important;
box-shadow: 0 22px 40px -12px rgba(255, 242, 0, 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 #FFF200;
border-right: 1px solid #FFF200;
}
#etapy .etap .numer::after {
right: -1px; bottom: -1px;
border-bottom: 1px solid #FFF200;
border-left: 1px solid #FFF200;
}
#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: #FFF200 !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: #172B4D !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: #172B4D !important; }
/* Podpisy nad wartosciami: czarny na bialym kaflu, bialy na niebieskim i na granacie.
Czerwien schodzi z paska - na niebieskim i granatowym kaflu miala 1,2-2,2:1,
czyli czytala sie gorzej niz tresc pod nia. Teraz 19,6:1 / 5,1:1 / 14:1. */
.karta-info .panel--bialy .etykieta { color: #09090b !important; opacity: 1 !important; }
.karta-info .panel--niebieski .etykieta,
.karta-info .panel--granat .etykieta { color: #ffffff !important; opacity: 1 !important; }
/* ===== DLUGIE KRESKI W OFERCIE: niebieskie, bez konca =====
Czerwony kwadracik na koncu zdjety - zostaje sama kreska. */
#oferta-lista .linia span { background: #172B4D !important; }
/* ===== POZIOME KRESKI W "DLA KOGO" I W "ZASADACH": czern zamiast szarosci ===== */
#komu .lista { border-top: 1px solid #09090b !important; }
#komu .wiersz { border-bottom: 1px solid #09090b !important; }
#warunki .punkt { border-bottom-color: #09090b !important; border-bottom-width: 1px !important; }
/* ===== ODSTEP MIEDZY "ZASADAMI" A "POROZMAWIAJMY" =====
Ta para dostawala polowkowy odstep z reguly "sekcje na tym samym tle stoja blizej".
W wariancie bialym cala strona jest biala, wiec ta regula scisnela tu za mocno.
Wracamy do pelnego odstepu tylko dla tej jednej pary. */
/* pod "Zasadami" idzie ciemne zakonczenie, czyli zmiana koloru: pelny odstep */
#warunki > div { padding-bottom: var(--sekcja) !important; }
#rozmowa > div { padding-top: var(--sekcja) !important; }
/* ===== SEKCJA ZE ZDJECIEM (druga na stronie): zdjecie po lewej, granatowy panel po prawej =====
Rozciagnieta od lewej do prawej krawedzi okna - blok nie siedzi w kontenerze max-w-6xl,
wiec nie ma marginesow bocznych ani cienia (cien na pelnej szerokosci i tak by sie obcial).
Obie polowy zawsze tej samej wysokosci. Na telefonie schodza jedno pod drugie. */
#obiuro-foto { background: #ffffff !important; }
#obiuro-foto > .opakowanie {
padding-top: calc(var(--sekcja) / 2) !important;
padding-bottom: calc(var(--sekcja) / 2) !important;
}
#obiuro-foto .blok-foto {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
}
#obiuro-foto .foto {
background-image: url(../assets/images/img-f8efb0d117.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; }
}
/* ===== PANEL "O BIURZE" (Mateusz 14.09.2026: "układ po prawej nijaki - zrób coś ciekawego, nagłówek większy") =====
Nadtytul z kreska w koralu, duzy naglowek w dwoch wierszach, pierwszy akapit jako lead,
dwa pozostale akapity obok siebie pod cienka linia, kazdy z krotka kreska w koralu,
na dole przycisk i podpis z okraglym sygnetem. Tresc akapitow bez zmian. */
#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: #FFF200; 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: #FFF200; }
#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); }
}
/* ===== 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: #FFF200; }
#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: #FFF200;
transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
#blog .wpis:hover .dalej::after, #blog .wpis:focus-visible .dalej::after { width: 100%; }
@media (min-width: 768px) { #blog .wpisy { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; } }
@media (min-width: 1024px) { #blog .wpisy { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; } }
@media (prefers-reduced-motion: reduce) {
#blog .obraz, #blog .dalej::after, #blog .wszystkie { transition: none; }
}
/* ===== POLACZONE ZAKONCZENIE: granat ze zdjeciem + uklad "Porozmawiajmy" =====
Sekcja "Umow konsultacje" znika, bo mowila to samo co ta i byla trzecim wezwaniem
do kontaktu w tej okolicy strony. Zostaje jedno, ciezsze zamkniecie:
zdjecie pod spodem, na nim granat 93 procent, na tym obrys nazwiska i tresc. */
#rozmowa {
--foto-zakonczenie: url(../assets/images/img-8ba7670587.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: #09090b; }
#formularz .dane a { color: inherit; text-decoration: none; }
#formularz .dane a:hover { color: #172B4D; }
#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: #09090b; }
#formularz .wymagane { color: #FFF200; }
#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: #09090b;
font-family: inherit;
font-size: 16px;
line-height: 1.5;
transition: border-color 0.2s, box-shadow 0.2s;
}
#formularz textarea { resize: vertical; min-height: 9rem; }
#formularz input::placeholder, #formularz textarea::placeholder { color: #a1a1aa; }
#formularz input:focus, #formularz textarea:focus {
outline: none;
border-color: #172B4D;
box-shadow: 0 0 0 3px rgba(23, 43, 77, 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: #172B4D; 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: #172B4D !important;
border-color: #172B4D !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: #E6D800 !important;
border-color: #E6D800 !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: #FFF200 !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: #FFF200 !important;
color: #ffffff !important;
}
#obiuro-foto .obrys:hover, #obiuro-foto .obrys:focus-visible {
background-color: #C93B40 !important;
border: 0 !important;
color: #ffffff !important;
}
/* ===== SZESC KORZYSCI: naglowki w jednej linii bazowej =====
Naglowki maja rozna dlugosc, wiec czesc lamie sie na dwa wiersze, a czesc na jeden -
i teksty pod nimi startowaly na roznych wysokosciach. Rezerwujemy miejsce na dwa
wiersze, wiec wszystkie akapity zaczynaja sie rowno, niezaleznie od zawijania. */
/* Bylo tu min-height na dwa wiersze - z czasow, gdy naglowki byly dwuwyrazowe
i trzeba bylo wyrownac start akapitow. Teraz kazdy naglowek to jedno slowo,
czyli jeden wiersz, wiec akapity i tak startuja rowno, a rezerwa drugiego
wiersza zostawiala tylko 36 px pustki pod kazdym napisem. */
/* ===== DUZA SEKCJA Z KORZYSCIAMI: czarna, bez zdjecia =====
Warstwa przyciemniajaca nie ma juz czego przyciemniac, wiec schodzi do zera. */
section#etapy {
background-image: none !important;
background-color: #09090b !important;
}
section#etapy::before { background: transparent !important; }
/* naglowek pasa poradnika: bialy, na naszej skali, z odstepem do kart */
#blog h2 {
margin: 0 0 3rem !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background-image: none !important;
}
#blog .gora { padding-bottom: 2.25rem; }
/* ===== KAFEL "JASNE ZASADY": granat zamiast niebieskiego =====
Ten sam jasniejszy granat co w wariancie koral (#0E4194). Kafel opinii zostaje
niebieski - zmiana dotyczy tylko tego jednego kafla. */
#proces .karta-foto { background-color: #0E4194 !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: #FFF200 !important; }
/* ===== KAFLE "JASNE ZASADY": naglowki na tej samej wysokosci =====
Lewy naglowek mieszcil sie w jednym wierszu, prawy lamal na dwa, wiec akapity
startowaly na dwoch roznych wysokosciach i kafle przestawaly czytac sie jak para.
Naglowek dostaje minimum dwoch wierszy - niezaleznie od tego, czy tekst je
wypelnia, akapit zaczyna sie w obu kaflach w tym samym miejscu. Jednostka lh to
dokladnie wysokosc wiersza tego naglowka; em jest zapasem dla starszych silnikow. */
#proces .karta-foto h3, #proces .karta-biala h3 {
min-height: 2.3em;
min-height: 2lh;
}
/* ===== STOPKA: geometria odtworzona ze zrzutu referencji =====
Zrzut mial 2000 px szerokosci przy szybie 1442 px CSS, czyli skala 1,387.
Wszystkie liczby ponizej to pomiary z tego zrzutu podzielone przez 1,387:
kontener 1232 px (a wiec max-w-7xl z px-6, nie 6xl), slupki startuja na
0 / 321 / 642 / 938, karta ma 293 px, powietrze nad naglowkami 150 px,
pod kolumnami 85 px, kreska pelna szerokosc ekranu, potem 49 px do paska
i 145 px czerni pod nim.
Kluczowe: stopka ma wysokosc szyby MINUS pasek menu (68 px). Przy pelnych
100vh na samym dole pasek zakrywal pierwsze 68 px powietrza i kolumny
wygladaly na doklejone do menu - to byl ten "przeciagniete do gory".
Odstepy sa w vh z widelkami, zeby na niskich ekranach schodzily proporcjonalnie,
ale nigdy nizej niz czytelne minimum. */
footer#kontakt {
background: #09090b !important;
border-top-color: 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 #FFF200 na czerni daje kontrast 5,2:1, wiec to nadal czytelny tekst,
a nie sam ozdobnik. W wariancie koral palette podmienia to na #FFF200. */
footer#kontakt .stopka-osoba { margin: 12px 0 0; font-size: 16px; line-height: 1.15; color: #FFF200; }
/* 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 (#09090b),
wiec z gory kadru do dolu idzie jedna plaszczyzna. */
#site-header.naglowek-czarny {
background-color: #09090b !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(../assets/images/img-b33f682a0d.webp); }
.pr-obraz-b { background-image: url(../assets/images/img-074ca7863a.webp); }
.pr-obraz-c { background-image: url(../assets/images/img-ec0b60f91f.webp); }
.pr-obraz-d { background-image: url(../assets/images/img-2cea6ee81a.webp); }
.pr-obraz-e { background-image: url(../assets/images/img-04fcacfaa6.webp); }
.pr-obraz-f { background-image: url(../assets/images/img-6231c6a4be.webp); }
.pr-obraz-o { background-image: url(../assets/images/img-e7568b6cf1.webp); }
.pr-obraz-g { background-image: url(../assets/images/img-fb860ff608.webp); }
.pr-obraz-h { background-image: url(../assets/images/img-202a9a1c6d.webp); }
.pr-obraz-i { background-image: url(../assets/images/img-d17e760742.webp); }
.pr-obraz-n { background-image: url(../assets/images/img-679ec9523d.webp); }
.pr-obraz-s { background-image: url(../assets/images/img-ca67669bac.webp); }
.pr-obraz-p { background-image: url(../assets/images/img-d8a0aaecd3.webp); }
.pr-obraz-k { background-image: url(../assets/images/img-f394991113.webp); }
.pr-obraz-j { background-image: url(../assets/images/img-494ccc3af1.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(9, 9, 11, 0.4); opacity: 0; transition: opacity 0.35s ease; }
.pr-karta-link:hover .pr-obraz { transform: scale(1.04); }
.pr-karta-link:hover .pr-okno::after { opacity: 1; }
/* tytul karty mniejszy niz naglowki strony glownej - 28 px */
.pr-karta-tytul { margin: 24px 0 0; font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; color: #09090b; text-wrap: balance; transition: color 0.25s ease; }
.pr-karta-link:hover .pr-karta-tytul { color: #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 #FFF200; outline-offset: 4px; }
/* najnowsze wpisy: miniatury 100x100 i pogrubiony tytul, bez dodatkowych blokow */
.pr-bok { align-self: start; }
.pr-najnowsze { margin: 0; padding: 0; list-style: none; display: grid; gap: 24px; }
.pr-najnowsze a { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 18px; align-items: center; color: #09090b; text-decoration: none; }
.pr-miniatura { display: block; width: 100px; height: 100px; background-size: cover; background-position: center; background-color: #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: #09090b; 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: #09090b; text-wrap: balance; }
.pr-tresc ul { margin: 0 0 26px; padding: 0; list-style: none; display: grid; gap: 10px; }
.pr-tresc ul li { position: relative; padding-left: 1.4rem; }
.pr-tresc ul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; background: #FFF200; }
.pr-tresc strong { color: #09090b; 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; } }
/* Dwa granaty zamiast granatu i czerni.
Ciemny #172B4D lum 0,026
Jasniejszy #0E4194 lum 0,052 - ta sama barwa i nasycenie, dwa razy wieksza jasnosc.
Czytaja sie jak jeden kolor w dwoch oswietleniach, a nie jak kolor i brak koloru. */
/* pasek pod hero: od jasnego do ciemnego */
.karta-info .panel--niebieski { background: #0E4194 !important; }
.karta-info .panel--granat { background: #172B4D !important; }
/* 1. hero granat ciemny z gradientem - nie nadpisujemy */
/* 2. sekcja ze zdjeciem GRANAT JASNIEJSZY, przycisk koralowy */
#obiuro-foto .panel { background: #0E4194 !important; }
#obiuro-foto .obrys {
background-color: #FFF200 !important;
border: 0 !important;
color: #ffffff !important;
}
#obiuro-foto .obrys:hover, #obiuro-foto .obrys:focus-visible {
background-color: #E6D800 !important;
border: 0 !important;
color: #ffffff !important;
}
/* 3. kafel w "Jasne zasady" GRANAT JASNIEJSZY
Byl na ciemnym #172B4D, czyli w tym samym kolorze co pas pod blogiem i kafel
opinii - w sekcji stojacej na bieli czytal sie jak dziura. Jasniejszy #0E4194
trzyma ten sam granat, a ciemny zostaje do duzych plaszczyzn. */
#proces .karta-foto { background-color: #0E4194 !important; }
/* Podpisy w pasku pod hero: czarny/bialy/bialy - tak jak w wersji bialej (koral dziedziczy). */
/* 4. duza sekcja z korzysciami CZERN, bez zdjecia pod spodem */
section#etapy {
background-image: none !important;
background-color: #09090b !important;
}
section#etapy::before { background: transparent !important; }
/* 5. kafel z ocena GRANAT CIEMNY */
#opinie .karta-kolor { background-color: #172B4D !important; }
/* 6. pas poradnika GRANAT CIEMNY */
#blog { background: #172B4D !important; }
/* Podnoszacy sie blok w "Dla kogo": ciemny granat #172B4D (klient 13.09.2026; wczesniej koral). */
#komu .wiersz::before { background: #172B4D !important; }
/* Dlugie kreski w ofercie: jasniejszy granat #0E4194 (klient 13.09.2026; wczesniej koral). */
#oferta-lista .linia span { background: #0E4194 !important; }
/* PROPOZYCJA TRZECIA: napis jako sam kontur.
Wypelnienie zdjeciem dawalo literom powierzchnie, a powierzchnia bila sie
z powierzchnia naglowka - stad caly konflikt. Kontur nie ma masy, wiec nie
rywalizuje: napis moze zostac wielki, wysrodkowany i za naglowkiem.
Wracaja tez pierwotne proporcje sekcji: 18vw, odstepy 112 px z gory i z dolu.
Wnetrze liter zostaje granatem sekcji - zadnego innego przeswitu, sam kontur.
Bialy 0.30 daje na granacie kontrast 2.1:1: widac, ale nie ma masy. */
#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;
}
/* 7. zakonczenie GRANAT CIEMNY */
#rozmowa::before { background: rgba(23, 43, 77, 0.93) !important; }
.nadtytul {
display: grid !important;
grid-template-columns: auto;
align-items: end !important;
gap: 0 !important;
width: fit-content;
max-width: 100%;
}
.nadtytul > span { grid-area: 1 / 1; }
/* napis: wiekszy i mniej rozstrzelony, kreska tuz pod nim */
.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;
}
/* kreska: cala szerokosc napisu bez rozstrzelenia po ostatniej literze */
.nadtytul > span.bg-brand {
align-self: end;
justify-self: stretch;
width: auto !important;
height: 2px !important;
font-size: 14px;
margin-right: 0.16em;
}
/* kreska z animacja: tlo samego spanu schodzi, widac tylko wjezdzajace ::after */
/* w "Co zyskujesz" (i ewentualnym kontakt-cta) starsza regula section#... span.bg-brand
maluje span na koral z wyzsza waga - stad identyfikatory w selektorze */
.nadtytul > span.kreska-anim,
section#etapy .nadtytul > span.kreska-anim,
section#kontakt-cta .nadtytul > span.kreska-anim { background: transparent !important; }
.nadtytul > .kreska-anim::after { transition: width 0.7s ease-out 0.15s; }
/* hero nie ma obserwatora - kreska wjezdza, gdy zniknie ekran ladowania */
.nadtytul > span.bg-brand:not(.kreska-anim) {
transform-origin: left center;
animation: nadtytul-kreska 0.7s ease-out 0.15s both;
}
html.preloader-trwa .nadtytul > span.bg-brand:not(.kreska-anim) { animation: none; transform: scaleX(0); }
@keyframes nadtytul-kreska { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
.nadtytul > .kreska-anim::after { transition: none; }
.nadtytul > span.bg-brand:not(.kreska-anim) { animation: none; transform: none; }
}
/* przyciski 40 px jak CTA w pasku (klient 14.09.2026)
Bylo: globalna regula ".cta-roll, .przycisk-bialy { padding: 0.7rem 1.4rem !important }"
dawala 11,2 + 20,3 (pudelko napisu 1,45em) + 11,2 = 42,7 px, a z obwodka 1 px 44,7 px.
Selektor z identyfikatorem main i !important na koncu pliku wygrywa z ta regula
i z regulami sekcji (#obiuro-foto .obrys, #formularz .wyslij, #top .przycisk-bialy).
Wysokosc przez min-height przy box-sizing: border-box - obwodka wlicza sie w 40 px,
napis stoi w pionie na srodku (ok. 9,85 px nad i pod nim), a gdyby sie kiedys zawinal,
przycisk urosnie zamiast go uciac.
Kolory, obwodki, strzalki, animacja przewijania napisu, hover i szerokosci bez zmian. */
main#strona-glowna .cta-roll,
main#strona-glowna .przycisk-bialy {
box-sizing: border-box !important;
height: auto !important;
min-height: 40px !important;
padding: 8px 20px !important;
align-items: center !important;
font-size: 14px !important;
font-weight: 500 !important;
}
/* "Co zyskujesz" w dwoch wierszach od 1024 px (15.09.2026) */
@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; }
}
/* JK Franków 15.09.2026: jedna opinia; prawy kwadrat = zdjecie autora opinii (Mateusz: "zdjecie w kwadracie po prawej, nie w kolku") */ #opinie .karta-kolor.karta-zdjecie { min-height: 24rem; aspect-ratio: 1 / 1; padding: 0 !important; background: #d4d4d8 url(../assets/images/img-ccf43eece8.jpg) center 20% / cover no-repeat !important; } /* kwadratowa karta = cale kwadratowe zdjecie, bez ucinania (Mateusz 15.09.2026) */ #opinie .karta-kolor.karta-zdjecie::before, #opinie .karta-kolor.karta-zdjecie::after { content: none !important; display: none !important; } /* 15.09.2026 (Mateusz): sekcja ok. 1 cm wyzsza i kafelek z trescia granatowy */ @media (min-width: 1024px) { #opinie .karta-kolor.karta-zdjecie { aspect-ratio: auto; min-height: 30rem; } #opinie .karta-biala { min-height: 30rem; } } #opinie .karty .karta-biala { background: #172B4D !important; } #opinie .karta-biala .opinia p { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } #opinie .karta-biala .autor .imie { color: #ffffff !important; } #opinie .karta-biala .autor .rola { color: rgba(255,255,255,0.72) !important; } #opinie .karta-biala .cudzyslow { color: #FFF200 !important; }
/* JK Franków 15.09.2026 (Mateusz) */ /* pytania: numer otwartego pytania bialy na granacie; znak bez obracania */ #pytania .pyt-poz.pyt-otwarte .pyt-nr { color: #ffffff !important; } #pytania .pyt-znak, #pytania .pyt-poz.pyt-otwarte .pyt-znak { transform: none !important; } #pytania .pyt-znak { transition: background-color 0.3s ease, border-color 0.3s ease !important; } /* napis JK Franków w tle sekcji Porozmawiajmy ciut mniejszy (bylo 26vw / 18vw) */ #rozmowa .znak-wodny .text-outline { font-size: 22vw !important; } @media (min-width: 768px) { #rozmowa .znak-wodny .text-outline { font-size: 15vw !important; } }
/* JK Franków 15.09.2026 (Mateusz): granat #172B4D zostaje, niebieski #0E4194, zamiast koralu zolty #FFF200. Na zoltym tekst i ikony granatowe (bialy na zoltym jest nieczytelny). */ .cta-roll.bg-brand, a.cta-roll.bg-brand, button.cta-roll.bg-brand, .cookie-consent-button--primary, #obiuro-foto .obrys, #obiuro-foto .obrys:hover, #obiuro-foto .obrys:focus-visible, #top .przycisk-bialy:hover, #top a.przycisk-bialy:hover, #top .przycisk-bialy:focus-visible, #top a.przycisk-bialy:focus-visible { color: #172B4D !important; -webkit-text-fill-color: #172B4D !important; } .cta-roll.bg-brand *, a.cta-roll.bg-brand *, button.cta-roll.bg-brand *, .cookie-consent-button--primary *, #obiuro-foto .obrys *, #top .przycisk-bialy:hover *, #top a.przycisk-bialy:hover * { color: inherit !important; -webkit-text-fill-color: inherit !important; } #pytania .pyt-otwarte .pyt-znak::before, #pytania .pyt-otwarte .pyt-znak::after { background: #172B4D !important; }
/* JK Franków 15.09.2026: zolty #FFF200 na bialym tle jest niewidoczny (kontrast 1,1:1), wiec cienkie kreski i znaczniki na jasnych sekcjach sa w niebieskim #0E4194; zolty zostaje na ciemnych tlach i na przyciskach */ #oferta-lista .kreska-anim::after, #proces .kreska-anim::after, #opinie .kreska-anim::after, #komu .kreska-anim::after, #warunki .kreska-anim::after, #pytania .kreska-anim::after, #formularz .kreska-anim::after { background-color: #0E4194 !important; } #formularz .wymagane { color: #0E4194 !important; } #proces .zs-karty > li.zs-karta.zs-akt { border-left-color: #0E4194 !important; } #proces .zs-karta.zs-akt .zs-nr { color: #0E4194 !important; } #proces .zs-wypelnienie { background: #0E4194 !important; } #site-header.bg-white\/80 .hover-underline-link::after { background-color: #0E4194 !important; } .pr-tresc ul li::before { background: #0E4194 !important; } .pr-karta-link:focus-visible, .pr-najnowsze a:focus-visible { outline-color: #0E4194 !important; }
/* JK Franków 15.09.2026 (Mateusz): strona granatowa jak pierwsza wersja Machaly - granat #172B4D glowny,
niebieski #0E4194 i zolty #FFF200 jako dodatki; zolty tylko w najwazniejszych momentach; bez czarnych sekcji (czarne -> granat) */
/* hero: granatowe przyciemnienie zamiast prawie czarnego */
html body section#top::before { background-image: linear-gradient(98deg, rgba(14, 27, 49, 0.96) 0%, rgba(17, 32, 58, 0.95) 30%, rgba(20, 38, 68, 0.92) 55%, rgba(23, 43, 77, 0.82) 72%, rgba(23, 43, 77, 0.6) 100%) !important; }
/* "Co zyskujesz": granat zamiast czerni, kwadraciki numerow zolte */
html body section#etapy { background: #172B4D !important; background-image: none !important; filter: none !important; }
html body #etapy .etap .numer { border-color: #FFF200 !important; }
html body #etapy .etap .numer::before, html body #etapy .etap .numer::after { border-color: #FFF200 !important; }
/* stopka i pasek menu na dole: granat zamiast czerni */
html body footer#kontakt, html body footer#kontakt .stopka-gora, html body footer#kontakt .stopka-pasek { background: #172B4D !important; background-color: #172B4D !important; }
html body #site-header.naglowek-czarny { background-color: #172B4D !important; }
/* niebieski jako dodatek: kafelek opinii */
html body #opinie .karty .karta-biala { background: #0E4194 !important; }
/* zolty tylko w najwazniejszych momentach - ozdobniki na ciemnym tle biale */
html body #top span.bg-brand, html body #top .kreska-anim::after, html body #etapy .kreska-anim::after, html body #blog .kreska-anim::after,
html body #rozmowa .kreska-anim::after, html body #obiuro-foto .panel-nadtytul::after, html body #obiuro-foto .panel .panel-kolumny p::before,
html body #blog .dalej::after { background: #ffffff !important; background-color: #ffffff !important; }
html body #blog .wszystkie svg, html body footer#kontakt .stopka-osoba { color: #ffffff !important; }
/* JK Franków 15.09.2026 (Mateusz): wszystkie kreski pod naglowkami zolte */ html body #top .kreska-anim::after, html body #oferta-lista .kreska-anim::after, html body #obiuro-foto .kreska-anim::after, html body #proces .kreska-anim::after, html body #etapy .kreska-anim::after, html body #opinie .kreska-anim::after, html body #komu .kreska-anim::after, html body #blog .kreska-anim::after, html body #warunki .kreska-anim::after, html body #pytania .kreska-anim::after, html body #rozmowa .kreska-anim::after, html body #formularz .kreska-anim::after, html body #top span.bg-brand, html body #obiuro-foto .panel-nadtytul::after { background: #FFF200 !important; background-color: #FFF200 !important; } html body footer#kontakt .stopka-naglowek { border-bottom-color: #FFF200 !important; }
/* JK Franków 15.09.2026 (Mateusz): wszedzie tam, gdzie u Machaly byl koral, jest zolty - bez wyjatkow
(wyjatki na zyczenie Mateusza: bialy numer otwartego pytania; granatowy tekst na zoltych przyciskach i znak na zoltym kwadracie) */
html body #blog .dalej::after { background: #FFF200 !important; background-color: #FFF200 !important; }
html body #blog .wszystkie svg { color: #FFF200 !important; }
html body #obiuro-foto .panel .panel-kolumny p::before { background: #FFF200 !important; background-color: #FFF200 !important; }
html body footer#kontakt .stopka-osoba { color: #FFF200 !important; }
html body #formularz .wymagane { color: #FFF200 !important; }
html body #proces .zs-karty > li.zs-karta.zs-akt { border-left-color: #FFF200 !important; }
html body #proces .zs-karta.zs-akt .zs-nr { color: #FFF200 !important; }
html body #proces .zs-wypelnienie { background: #FFF200 !important; }
html body #site-header .hover-underline-link::after, html body #site-header.bg-white\/80 .hover-underline-link::after { background-color: #FFF200 !important; }
html body .pr-tresc ul li::before { background: #FFF200 !important; }
html body .pr-karta-link:focus-visible, html body .pr-najnowsze a:focus-visible { outline-color: #FFF200 !important; }
html body #etapy .etap .numer::before, html body #etapy .etap .numer::after { border-color: #FFF200 !important; }
/* JK Franków 15.09.2026 (Mateusz): wszystkie wieksze elementy granatowe; niebieski jako akcent jak zolty, w innych miejscach */
/* wieksze elementy: granat zamiast niebieskiego */
html body #obiuro-foto .panel { background: #172B4D !important; }
html body #opinie .karty .karta-biala { background: #172B4D !important; }
html body .karta-info .panel--niebieski { background: #0E4194 !important; } /* ramka Telefon pod hero niebieska (Mateusz 15.09.2026) */
/* niebieski akcent: kreski w ofercie, aktywny krok, podnoszacy sie wiersz zalet, kwadraciki w zasadach */
html body #oferta-lista .linia span { background: #0E4194 !important; }
html body #proces .zs-karty > li.zs-karta.zs-akt { border-left-color: #0E4194 !important; }
html body #proces .zs-karta.zs-akt .zs-nr { color: #0E4194 !important; }
html body #proces .zs-wypelnienie { background: #0E4194 !important; }
html body #komu .wiersz::before { background: #0E4194 !important; }
html body #warunki .znak { background: #0E4194 !important; }
/* JK Franków 15.09.2026 (Mateusz): gradient jak w srodkowym pakiecie cennika (niebieski -> granat) na tlach wiekszych ciemnych elementow.
Wersja bez gradientow: frankow/jk-frankow-przed-gradientami.html */
/* hero: przyciemnienie zdjecia od granatu (tekst z lewej) do niebieskiego z prawej */
html body section#top::before { background-image: linear-gradient(98deg, rgba(14, 27, 49, 0.96) 0%, rgba(20, 38, 68, 0.94) 35%, rgba(19, 48, 100, 0.86) 62%, rgba(14, 65, 148, 0.62) 100%) !important; }
/* "Co zyskujesz" i poradnik */
html body section#etapy { background: linear-gradient(145deg, #0E4194 0%, #172B4D 100%) !important; }
html body section#blog { background: linear-gradient(145deg, #0E4194 0%, #172B4D 100%) !important; }
/* "Porozmawiajmy": warstwa na zdjeciu */
html body section#rozmowa::before { background: linear-gradient(145deg, rgba(14, 65, 148, 0.92) 0%, rgba(23, 43, 77, 0.95) 100%) !important; }
/* stopka: jeden gradient na calosc (gora i dolny pasek przezroczyste) */
html body footer#kontakt { background: linear-gradient(145deg, #0E4194 0%, #172B4D 100%) !important; }
html body footer#kontakt .stopka-gora, html body footer#kontakt .stopka-pasek { background: transparent !important; background-color: transparent !important; }
/* panel "O biurze", kafelek opinii, otwarte pytanie */
html body #obiuro-foto .panel { background: linear-gradient(145deg, #0E4194 0%, #172B4D 100%) !important; }
html body #opinie .karty .karta-biala { background: linear-gradient(145deg, #0E4194 0%, #172B4D 100%) !important; }
html body #pytania .pyt-poz.pyt-otwarte { background: linear-gradient(100deg, #0E4194 0%, #172B4D 100%) !important; }
/* 15.09.2026 (Mateusz: "uciety cien"): biala karta w "Zasadach" miala cien siegajacy 98 px w dol, a do konca sekcji jest 56 px - tlo nastepnej sekcji (Pytania) przykrywalo cien. Pozycjonowana karta rysuje sie nad tlem kolejnej sekcji. */ html body #warunki .karta { position: relative; z-index: 1; }
/* 15.09.2026 (Mateusz): ramka "Godziny otwarcia" w gradiencie i zamieniona miejscami z "Telefonem" (biala | gradient | niebieska); drugi przycisk w hero niebieski zamiast granatowego */ html body .karta-info .panel--granat { background: linear-gradient(145deg, #0E4194 0%, #172B4D 100%) !important; } html body #top .przycisk-bialy, html body #top a.przycisk-bialy { background-color: #0E4194 !important; border-color: #0E4194 !important; color: #ffffff !important; }
html body #top .przycisk-bialy, html body #top a.przycisk-bialy { background-color: #172B4D !important; background-image: linear-gradient(145deg, #0E4194 0%, #172B4D 100%) !important; border-color: transparent !important; background-origin: border-box !important; color: #ffffff !important; }
html body #top .przycisk-bialy:hover, html body #top a.przycisk-bialy:hover { background-image: none !important; }
/* JK Franków 15.09.2026: stopka ma gradient, wiec pasek menu na samym dole dostaje ten sam gradient, liczony na wspolnym prostokacie paska i stopki - pasek i stopka to jedna plaszczyzna jak w demo 1 */
html body #site-header.naglowek-czarny { background-color: #0E4194 !important; backdrop-filter: none !important; }
/* 15.09.2026 (Mateusz): pasek Biuro | Telefon | Godziny pod hero usuniety; hero nie jest juz wydluzone pod nachodzaca karte - konczy sie na zgieciu ekranu, a "Nasza oferta" zaczyna sie zwyklym odstepem sekcji (--sekcja) */
:root { --karta-nachodzi: 0px !important; }
/* JK Franków 16.09.2026 (Mateusz): przyciemnienie hero jako gradient KOLORU - od czerni po lewej do jasniejszego granatu/niebieskiego #0E4194 po prawej (zdjecie zostaje tylko faktura), plus warstwa od dolu przez cala szerokosc */
html body section#top::before { background-image: linear-gradient(0deg, rgba(0, 1, 3, 0.95) 0%, rgba(3, 8, 18, 0.75) 12%, rgba(8, 17, 34, 0.38) 26%, rgba(14, 27, 49, 0) 42%), linear-gradient(180deg, rgba(0, 1, 3, 0.99) 0%, rgba(4, 10, 20, 0.985) 30%, rgba(9, 20, 40, 0.97) 55%, rgba(13, 38, 78, 0.95) 78%, rgba(14, 65, 148, 0.90) 100%) !important; }
@media (min-width: 1024px) {
html body section#top::before { background-image: linear-gradient(0deg, rgba(0, 1, 3, 0.95) 0%, rgba(3, 8, 18, 0.75) 12%, rgba(8, 17, 34, 0.38) 26%, rgba(14, 27, 49, 0) 42%), linear-gradient(90deg, rgba(0, 1, 3, 1) 0%, rgba(2, 6, 14, 1) 15%, rgba(6, 16, 32, 0.995) 32%, rgba(11, 26, 54, 0.98) 50%, rgba(13, 40, 88, 0.95) 70%, rgba(14, 55, 124, 0.92) 86%, rgba(14, 65, 148, 0.90) 100%) !important; }
}
/* 1.10.2026: po wycieciu #komu i #warunki nowe styki: Opinie (biale) -> Aktualnosci (ciemne), Aktualnosci (ciemne) -> Pytania (biale) = pelny odstep */
html body section#opinie > div { padding-bottom: var(--sekcja) !important; }
html body section#pytania > div { padding-top: var(--sekcja) !important; }
/* 4.10.2026 (klientka przez niego: „hero jest za mroczne”): przyciemnienie zdjęcia było od czystej czerni (krycie 95-100%)
do niebieskiego (90%) plus czarny pas od dołu - zdjęcia prawie nie było widać. Teraz granat strony #172B4D zamiast czerni,
krycie 84-90% pod tekstem (kontrast białego nagłówka zmierzony 4,3-8:1, dla dużego tekstu wymagane 3:1), z prawej 45%, od dołu lekki granat zamiast czerni; kolory i układ bez zmian */
/* telefon i tablet (4.10 jego: „na telefonie do dupy wygląda to zdjęcie”, z 3 propozycji wybrał C): inny kadr zdjęcia -
przybornik z długopisami i notatki (86% 18%, 115% wysokości), pod tekstem granat 0.86-0.88, na dole niebieski 0.62 */
@media (max-width: 1023.98px) {
html body section#top { background-position: 86% 18% !important; background-size: auto 115% !important; }
html body section#top::before { background-image: linear-gradient(180deg, rgba(23, 43, 77, 0.88) 0%, rgba(23, 43, 77, 0.86) 60%, rgba(14, 65, 148, 0.62) 100%) !important; }
}
@media (min-width: 1024px) {
html body section#top::before { background-image: linear-gradient(0deg, rgba(23, 43, 77, 0.55) 0%, rgba(23, 43, 77, 0.25) 14%, rgba(23, 43, 77, 0) 30%), linear-gradient(90deg, rgba(23, 43, 77, 0.90) 0%, rgba(23, 43, 77, 0.88) 30%, rgba(20, 52, 110, 0.84) 50%, rgba(16, 60, 135, 0.76) 70%, rgba(14, 65, 148, 0.58) 85%, rgba(14, 65, 148, 0.45) 100%) !important; }
}
/* podpis opimedia w dolnym pasku stopki (1.10.2026): 1:1 jak TAX24/Urios/Sigma - 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: #FFF200; 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; } }
/* podstrony prawne (1.10.2026, jak Urios/Machala) */
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; }
html body main#podstrona h1.podstrona-h1 { margin: 0 !important; font-family: 'Space Grotesk', system-ui, sans-serif !important; font-size: clamp(2.25rem, 4.6vw, 3.5rem) !important; font-weight: 600 !important; line-height: 1.05 !important; letter-spacing: -0.03em !important; color: #09090B !important; -webkit-text-fill-color: #09090B !important; }
/* Aktualnosci: kolumna "najnowsze wpisy" jedzie razem z przewijaniem listy (od 1024 px, gdy stoi obok listy).
96 px od gory (pod przyklejonym naglowkiem); gdy kolumna jest wyzsza niz ekran, skrypt ustawia odstep tak, zeby byl widoczny jej dol. */
@media (min-width: 1024px) {
#poradnik .pr-bok { position: sticky; top: var(--pr-bok-top, 96px); align-self: start; }
}
/* ===== 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: #FFF200 !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 ===== */