@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/InterVariable_rcpk.woff2') format('woff2'); } :root { --primary-color: #0A2540; --accent-color: #FFB000; --bg-light: #F0F4F8; --sidebar-width: 280px; --c-dark: #0f172a; --c-dark-sec: #1e293b; --c-blue: #2563eb; --c-blue-light: #60a5fa; --c-blue-bg: #eff6ff; --c-text: #1e293b; --c-text-gray: #475569; --c-text-gray-lt: #94a3b8; --c-bg-page: #ffffff; --c-bg-light: #f8fafc; --c-border: #e2e8f0; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; } *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, h4, h5, p, ul { margin: 0; padding: 0; } body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background-color: var(--c-bg-page); color: var(--c-text); line-height: 1.5; -webkit-font-smoothing: antialiased; } ul { list-style: none; } a { text-decoration: none; color: inherit; } a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--c-blue-light); outline-offset: 3px; border-radius: 3px; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 1000; background: var(--c-dark); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } .pt-16 { padding-top: 16px; } .border-t { border-top: 1px solid var(--c-border); } .mr-8 { margin-right: 8px; } .mr-16 { margin-right: 16px; } .mobile-topbar { display: none; } .nav-backdrop { display: none; } .layout-wrapper { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-width); background-color: var(--primary-color); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; padding: 2rem 1.5rem; box-sizing: border-box; z-index: 100; } .brand-link { text-decoration: none; display: block; margin-bottom: 3rem; transition: opacity 0.2s; text-align: center; } .brand-link:hover { opacity: 0.8; } .logo { font-size: 1.6rem; font-weight: bold; margin: 0 0 0.2rem 0; color: white; letter-spacing: 0.15em; } .slogan { font-size: 0.84rem; color: #8BA6C1; margin: 0; } .nav-menu a { display: flex; flex-direction: column; color: white; text-decoration: none; font-weight: 600; font-size: 16px; padding: 0.8rem 0; border-bottom: 2px solid rgba(255,255,255,0.05); transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.1; } .nav-menu a .nav-sub { display: block; font-size: 12px; color: #9AA6BC; text-transform: none; font-weight: 400; letter-spacing: 0; margin-top: 4px; line-height: 1.2; transition: color 0.3s ease; } .nav-menu a:hover { background: rgba(255,255,255,0.05); } .nav-menu a:hover .nav-sub { color: #cbd5e1; } .nav-menu a.active { border-bottom-color: var(--accent-color); color: var(--accent-color); } .nav-menu a.active .nav-sub { color: #cbd5e1; } .nav-menu a.active:hover { background: rgba(255,255,255,0.05); } .bottom-widgets { margin-top: auto; display: flex; flex-direction: column; gap: 1.5rem; } .cta-button { display: block; background-color: var(--accent-color); color: var(--primary-color); text-align: center; padding: 0.8rem; font-weight: bold; text-decoration: none; border-radius: 4px; transition: background 0.3s; } .cta-button:hover { background-color: #e59d00; } .contact-info p { margin: 0.2rem 0; font-size: 0.9rem; color: #D0DCE7; } .contact-info strong { color: white; display: block; margin-top: 0.5rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px;} .contact-info a { color: #D0DCE7; text-decoration: none; transition: color 0.3s; } .contact-info a:hover { color: var(--accent-color); } .contact-block h4 { color: white; font-size: 0.85rem; margin-bottom: 0.5rem; text-transform: uppercase; } .contact-info { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } .contact-heading { color: white; font-size: 0.85rem; font-weight: 700; margin: 0 0 1rem 0; } .contact-block { margin-bottom: 0.8rem; } .contact-block strong { display: block; color: white; font-size: 0.85rem; margin-bottom: 0.2rem; } .contact-block p { color: #8BA6C1; font-size: 0.9rem; margin: 0; } .main-content { flex-grow: 1; margin-left: var(--sidebar-width); display: flex; flex-direction: column; min-height: 100vh; background-color: var(--c-bg-page); } .container { max-width: 1280px; margin: 0 auto; padding: 0 40px; } .max-w-900 { max-width: 900px; } .mx-auto { margin-left: auto; margin-right: auto; } .text-center { text-align: center; } .text-left { text-align: left; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; } .mb-40 { margin-bottom: 40px; } .mb-48 { margin-bottom: 48px; } .mt-8 { margin-top: 8px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; } .mt-80 { margin-top: 80px; } .pb-0 { padding-bottom: 0 !important; } .text-blue { color: var(--c-blue); } .text-blue-light { color: var(--c-blue-light); } .text-white { color: #ffffff; } .text-gray { color: var(--c-text-gray); } .text-gray-light { color: var(--c-text-gray-lt); } .text-gray-light-2 { color: #cbd5e1; } .text-sm { font-size: 14px; } .font-semibold { font-weight: 600; } .hover-underline:hover { text-decoration: underline; } .shadow { box-shadow: 0 10px 30px -10px rgba(0,0,0,0.08); } .shadow-sm { box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04); } .flex-align-center { display: flex; align-items: center; } .flex-col-between { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .section { padding: 80px 0; } .section-dark { background-color: var(--c-dark); color: #fff; } .section-dark .tag { color: var(--c-blue-light); } .section-dark .section-desc { color: #cbd5e1; } .bg-light { background-color: var(--c-bg-light); } .tag { display: inline-block; color: var(--c-blue); text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 20px; } .section-title { font-size: 36px; font-weight: 700; line-height: 1.2; margin-bottom: 16px; } .section-desc { font-size: 18px; color: var(--c-text-gray); max-width: 700px; } .btn { display: inline-block; padding: 14px 28px; font-size: 16px; font-weight: 600; border-radius: var(--radius-sm); transition: all 0.2s; cursor: pointer; } .btn-primary { background-color: var(--c-dark); color: #fff; border: 1px solid var(--c-dark); } .btn-primary:hover { background-color: var(--c-dark-sec); } .btn-primary-blue { background-color: var(--c-blue); color: #fff; border: 1px solid var(--c-blue); } .btn-primary-blue:hover { background-color: #1d4ed8; } .btn-outline { background-color: transparent; color: var(--c-text); border: 1px solid var(--c-border); } .btn-outline:hover { background-color: var(--c-bg-light); } .icon { width: 20px; height: 20px; flex-shrink: 0; } .icon-sm { width: 16px; height: 16px; } .icon-blue { fill: var(--c-blue); margin-right: 12px; } .icon-blue-bg { fill: #fff; background-color: rgba(255,255,255,0.1); border-radius: 50%; padding: 2px; } .icon-wrapper { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background-color: var(--c-bg-page); border: 1px solid var(--c-border); } .icon-wrapper.dark-bg { background-color: var(--c-dark); border: none; } .grid-2-col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .grid-3-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .wrapper-2-col-center { display: flex; align-items: center; gap: 80px; } .content-left { flex: 1; } .content-right { flex: 1; } .card { padding: 28px; border-radius: var(--radius-lg); } .card-dark { background-color: var(--c-dark); color: #fff; } .card-light { background-color: var(--c-bg-page); border: 1px solid var(--c-border); } .card-tag { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; } .card-subtitle { font-size: 15px; margin-bottom: 24px; line-height: 1.4; } .card h3 { font-size: 18px; } .icon-list li { display: flex; align-items: flex-start; font-size: 15px; font-weight: 500; margin-bottom: 16px; } .icon-list li:last-child { margin-bottom: 0; } .section-hero { padding: 80px 0 60px; } .hero-wrapper { display: flex; align-items: center; gap: 40px; } .hero-content { flex: 1.25; } .hero-title { font-size: 42px; margin-bottom: 24px; line-height: 1.1; letter-spacing: -0.02em; } .hero-desc { margin-bottom: 32px; font-size: 18px; color: var(--c-text-gray); line-height: 1.6; } .buttons-row { display: flex; gap: 16px; } .hero-cards { flex: 0.75; display: flex; flex-direction: column; gap: 16px; } .big-column-card { background-color: var(--c-bg-page); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 40px; } .column-header { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; } .col-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; } .dark-icon { background-color: var(--c-dark); color: #fff; } .col-title { font-size: 24px; margin-bottom: 4px; } .col-subtitle { font-size: 14px; color: var(--c-text-gray); } .small-heading { font-size: 12px; text-transform: uppercase; color: #5b6675; letter-spacing: 0.1em; margin-bottom: 16px; } .inner-card { background-color: var(--c-bg-light); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 20px; margin-bottom: 12px; } .inner-card h4 { font-size: 16px; margin-bottom: 8px; } .inner-card p { font-size: 14px; color: var(--c-text-gray); } .inner-card.bg-transparent { background-color: transparent; padding: 0; } .inner-card.no-border { border: none; } .inner-card.warning-card { background-color: #fffbeb; border-color: #fde68a; color: #92400e; } .inner-card.warning-card p { color: inherit; } .inner-card.highlight-card { background-color: var(--c-blue-bg); border-color: #bfdbfe; } .inner-card.outline-blue-card { background-color: transparent; border: 1px solid var(--c-blue-light); } .dark-feature-list li { display: flex; align-items: center; background-color: var(--c-dark-sec); padding: 16px 24px; border-radius: var(--radius-sm); margin-bottom: 12px; font-size: 15px; font-weight: 500; } .numbered-card { background-color: var(--c-bg-light); border-radius: var(--radius-lg); padding: 32px; display: flex; gap: 20px; border: 1px solid transparent; } .big-number { font-size: 32px; font-weight: 700; color: #5a8ecb; line-height: 1; } .nc-content h3 { font-size: 18px; margin-bottom: 8px; } .timeline { display: flex; flex-direction: column; gap: 16px; } .timeline-item { display: flex; align-items: stretch; background-color: var(--c-bg-page); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--c-border); } .tl-number { background-color: var(--c-dark); color: #fff; width: 60px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; } .tl-content { padding: 24px; flex: 1; } .tl-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .tl-header h3 { font-size: 18px; } .status-badge { background-color: var(--c-blue-bg); color: var(--c-blue); padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; } .faq-wrapper { display: flex; flex-direction: column; gap: 12px; } .faq-item { background-color: var(--c-bg-page); border: 1px solid var(--c-border); border-radius: var(--radius-md); overflow: hidden; } .faq-item summary { padding: 24px; font-size: 16px; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; font-size: 20px; font-weight: 400; color: var(--c-text-gray-lt); } .faq-item[open] summary::after { content: '−'; } .faq-content { padding: 0 24px 24px; border-top: 1px solid transparent; } .faq-item[open] .faq-content { border-top-color: var(--c-border); padding-top: 16px; } .site-footer { background-color: #1E293B; color: #94A3B8; padding: 3rem 0 1.5rem 0; font-size: 0.9rem; margin-top: auto; } .footer-columns { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 2rem; margin-bottom: 2rem; } .footer-col h3 { color: #FFFFFF; font-size: 1.05rem; margin-top: 0; margin-bottom: 1.2rem; text-transform: uppercase; letter-spacing: 1px; } .footer-col a { color: #94A3B8; text-decoration: none; display: block; margin-bottom: 0.5rem; transition: color 0.3s;} .footer-col a:hover { color: var(--accent-color); } .footer-col p { margin: 0 0 0.5rem 0; line-height: 1.5; } .footer-logo { font-size: 1.2rem; font-weight: bold; color: white; display: block; margin-bottom: 1rem; } .col-brand p { font-size: 0.85rem; padding-right: 1rem; } .footer-divider { height: 1px; background-color: #334155; margin: 0 0 1.5rem 0; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; } .footer-bottom a { color: #CBD5E1; text-decoration: none; font-weight: 500; transition: color 0.3s;} .footer-bottom a:hover { color: white; } .svc-list { margin-top: 8px; } .svc-list li { position: relative; padding-left: 20px; margin-bottom: 8px; font-size: 14px; color: var(--c-text-gray); line-height: 1.5; } .svc-list li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-blue); } .mini-title { display: block; font-weight: 700; color: var(--c-text); margin-bottom: 6px; } .module-meta { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #5b6675; font-weight: 600; margin: 2px 0 10px; } .buttons-center { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .term-card { background: var(--c-dark); color: #fff; border-radius: var(--radius-lg); padding: 8px 24px; } .term-card .small-heading { color: var(--c-blue-light); padding-top: 16px; } .term-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.1); } .term-row:last-child { border-bottom: 0; } .term-row .t-label { font-weight: 600; } .term-row .t-sub { display: block; font-size: 12px; color: #cbd5e1; font-weight: 400; margin-top: 2px; } .term-row .t-val { font-weight: 700; color: var(--c-blue-light); white-space: nowrap; } .panel-ex { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 18px 22px; box-shadow: 0 4px 12px rgba(15,23,42,0.04); } .panel-ex .ex-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #5b6675; font-weight: 700; margin-bottom: 10px; } .panel-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; font-size: 14px; border-bottom: 1px solid var(--c-border); } .panel-row:last-child { border-bottom: 0; } .panel-row .p-k { color: var(--c-text-gray); } .panel-row .p-v { font-weight: 600; color: var(--c-text); } .panel-row .p-ok { color: #15803d; font-weight: 700; } .chain { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; font-weight: 700; font-size: 14px; } .chain .now { color: var(--c-text); background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 5px 14px; } .chain a.step { padding: 5px 14px; border: 1px solid var(--c-border); border-radius: 8px; color: var(--c-blue); transition: border-color 0.2s, background 0.2s; } .chain a.step:hover { border-color: #bfdbfe; background: #f8fafc; } .chain .arr { color: #64748b; } .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .stat .num { font-size: 34px; font-weight: 800; color: var(--primary-color); line-height: 1; letter-spacing: -0.01em; } .stat .lab { font-size: 13px; color: var(--c-text-gray); margin-top: 10px; line-height: 1.4; } .flow-row { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--c-border); } .flow-row:last-child { border-bottom: 0; } .flow-row .fn { color: var(--c-blue); font-weight: 700; flex-shrink: 0; } .flow-row .ft { color: var(--c-text); } .footer-col h4 { color: #FFFFFF; font-size: 1.05rem; margin-top: 0; margin-bottom: 1.2rem; text-transform: uppercase; letter-spacing: 1px; } .hp-hero-panel { background: var(--c-dark); color: #fff; border-radius: var(--radius-lg); padding: 22px 24px; } .hp-hero-panel .hp-cap { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-blue-light); font-weight: 700; margin-bottom: 6px; } .hp-step { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; } .hp-step + .hp-step { border-top: 1px solid rgba(255,255,255,0.10); } .hp-step .hp-n { color: var(--c-blue-light); font-weight: 800; font-size: 13px; flex-shrink: 0; width: 20px; padding-top: 2px; } .hp-step .hp-t { font-weight: 700; font-size: 15px; } .hp-step .hp-s { display: block; font-weight: 400; font-size: 12.5px; color: #cbd5e1; margin-top: 3px; line-height: 1.4; } .hp-hero-note { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 16px 20px; box-shadow: 0 4px 12px rgba(15,23,42,0.04); } .hp-hero-note strong { display: block; font-size: 14px; margin-bottom: 4px; color: var(--c-text); } .hp-hero-note p { font-size: 13px; color: var(--c-text-gray); line-height: 1.5; } .hp-proofline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 28px; font-size: 14px; color: var(--c-text-gray); font-weight: 600; } .hp-proofline .sep { color: var(--c-text-gray-lt); font-weight: 400; } .hp-link-card { display: flex; flex-direction: column; height: 100%; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; } .hp-link-card:hover { border-color: #bfdbfe; box-shadow: 0 10px 30px -12px rgba(15,23,42,0.12); transform: translateY(-2px); } .hp-link-card .card-tag { color: var(--c-blue); } .hp-link-card h3 { font-size: 19px; line-height: 1.3; margin-bottom: 10px; } .hp-link-card .hp-sub { font-size: 14px; color: var(--c-text-gray); line-height: 1.5; margin-bottom: 20px; flex-grow: 1; } .hp-link-card .hp-meta { font-size: 13px; color: var(--c-text-gray-lt); margin-bottom: 16px; } .hp-link-card .hp-more { color: var(--c-blue); font-size: 14px; font-weight: 600; } .hp-link-card:hover .hp-more { text-decoration: underline; } .hp-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .hp-why-item { background: var(--c-bg-page); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 24px; } .hp-why-item strong { display: block; font-size: 16px; margin-bottom: 6px; } .hp-why-item p { font-size: 14px; color: var(--c-text-gray); line-height: 1.5; } .section-dark .btn-outline { color: #fff; border-color: rgba(255,255,255,0.35); } .section-dark .btn-outline:hover { background: rgba(255,255,255,0.08); } .hp-cta-note { font-size: 14px; color: #cbd5e1; margin-top: 20px; } .hp-training { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .hp-training .hp-training-text { flex: 1; min-width: 280px; } .hp-training .hp-training-meta { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: #5b6675; font-weight: 600; margin-top: 16px; } .calc-card { background: var(--c-bg-page); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 24px; box-shadow: 0 4px 12px rgba(15,23,42,0.04); } .calc-table { width: 100%; border-collapse: collapse; font-size: 14px; } .calc-table th, .calc-table td { padding: 10px 4px; border-bottom: 1px solid var(--c-border); text-align: left; } .calc-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #5b6675; font-weight: 700; } .calc-table td.num, .calc-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .calc-table td.comp { color: var(--c-text); } .calc-table tbody tr:last-child td { border-bottom: 0; } .calc-table tr.sum td { border-top: 2px solid var(--c-border); border-bottom: 0; font-weight: 700; padding-top: 12px; } .calc-note { font-size: 12px; color: var(--c-text-gray); margin-top: 12px; } .two-col-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } [id="firmy"],[id="biura"] { scroll-margin-top: 2rem; } .kontakt-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 32px; align-items: start; } .info-card { background: var(--c-bg-page); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 28px; box-shadow: 0 4px 12px rgba(15,23,42,0.04); } .info-card > h2 { font-size: 20px; margin-bottom: 20px; } .info-panel { display: flex; flex-direction: column; } .info-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--c-border); } .info-item:first-child { padding-top: 4px; border-top: 0; } .info-item:last-child { padding-bottom: 0; } .info-item .ic { width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--c-bg-light); border: 1px solid var(--c-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--c-blue); } .info-item .lbl { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: #5b6675; font-weight: 700; margin-bottom: 2px; } .info-item .val { font-size: 16px; font-weight: 600; color: var(--c-text); } .info-item .val a { color: var(--c-text); } .info-item .val a:hover { color: var(--c-blue); } .info-item .sub { font-size: 13px; color: var(--c-text-gray); margin-top: 2px; } .info-item .desc { font-size: 13px; color: var(--c-text-gray); line-height: 1.5; margin-top: 8px; } .consult-box { background: var(--c-dark); color: #fff; border-radius: var(--radius-lg); padding: 24px; margin-top: 20px; } .consult-box .small-heading { color: var(--c-blue-light); margin-bottom: 10px; } .consult-box p { font-size: 14px; color: #cbd5e1; line-height: 1.6; } .form-card { background: var(--c-bg-page); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 32px; box-shadow: 0 4px 12px rgba(15,23,42,0.04); } .form-card > h2 { font-size: 24px; margin-bottom: 8px; } .form-intro { font-size: 14px; color: var(--c-text-gray); line-height: 1.6; margin-bottom: 24px; } .contact-form .field { margin-bottom: 16px; } .contact-form label { display: block; font-size: 13px; font-weight: 600; color: var(--c-text); margin-bottom: 6px; } .contact-form label .req { color: var(--c-blue); font-weight: 700; } .contact-form label .opt { color: #64748b; font-weight: 400; } .contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: 12px 14px; font-family: inherit; font-size: 15px; color: var(--c-text); background: var(--c-bg-page); border: 1px solid var(--c-border); border-radius: var(--radius-sm); transition: border-color 0.15s, box-shadow 0.15s; } .contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--c-text-gray-lt); } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); } .contact-form textarea { min-height: 120px; resize: vertical; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field-check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 20px; } .field-check input { width: auto; margin-top: 3px; flex-shrink: 0; } .field-check label { font-size: 13px; font-weight: 400; color: var(--c-text-gray); margin: 0; line-height: 1.5; } .field-check a { color: var(--c-blue); font-weight: 600; } .field-check a:hover { text-decoration: underline; } .btn-submit { width: 100%; border: none; } .form-note { font-size: 13px; color: var(--c-text-gray); margin-top: 14px; text-align: center; } .form-status { border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 20px; font-size: 14px; line-height: 1.5; } .form-status.ok { background: #ecfdf3; border: 1px solid #abefc6; color: #067647; } .form-status.err { background: #fef3f2; border: 1px solid #fecdca; color: #b42318; } .hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; } .reason-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .reason-card { background: var(--c-bg-light); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 24px; } .reason-card .rn { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-blue); margin-bottom: 10px; } .reason-card h3 { font-size: 16px; margin-bottom: 8px; } .reason-card p { font-size: 14px; color: var(--c-text-gray); line-height: 1.55; } .map-embed { border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; } .map-ph { position: relative; min-height: 300px; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--primary-color); background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(125deg, rgba(96,165,250,0.16), transparent 60%); background-size: 40px 40px, 40px 40px, 100% 100%; } .map-ph::before, .map-ph::after { content: ''; position: absolute; background: rgba(255,255,255,0.07); } .map-ph::before { top: 0; bottom: 0; left: 34%; width: 10px; } .map-ph::after { left: 0; right: 0; top: 58%; height: 10px; } .map-ph-inner { position: relative; z-index: 1; padding: 24px; } .map-pin { color: var(--accent-color); line-height: 0; display: inline-block; } .map-addr { color: #fff; font-weight: 600; font-size: 15px; margin: 10px 0 16px; } .map-note { color: rgba(255,255,255,0.6); font-size: 12px; margin-top: 12px; } .map-live { position: relative; line-height: 0; } .map-live::after { content: ''; position: absolute; inset: 0; background: rgba(10,37,64,0.18); pointer-events: none; } .map-embed iframe { display: block; width: 100%; height: 360px; border: 0; filter: grayscale(0.9) contrast(0.95); } .maps-link { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--c-blue); } .maps-link:hover { text-decoration: underline; } @media (max-width: 1024px) { .grid-3-col, .grid-2-col, .wrapper-2-col-center { grid-template-columns: 1fr; flex-direction: column; gap: 40px; } .stat-grid { grid-template-columns: 1fr 1fr; gap: 28px; } .hero-wrapper { flex-direction: column; text-align: center; } .icon-list li { text-align: left; } .buttons-row { justify-content: center; } .hero-title { font-size: 36px; } .section-title { font-size: 32px; } .hero-cards { width: 100%; max-width: 600px; margin: 0 auto; text-align: left; } .footer-columns { grid-template-columns: 1fr 1fr; } .hp-proofline { justify-content: center; } .hp-training { flex-direction: column; align-items: flex-start; gap: 24px; } .kontakt-grid { grid-template-columns: 1fr; } .reason-grid { grid-template-columns: 1fr 1fr; } .hp-why-grid { grid-template-columns: 1fr; flex-direction: column; gap: 40px; } } @media (max-width: 900px) { .two-col-lists { grid-template-columns: 1fr; } } @media (max-width: 768px) { .mobile-topbar { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 200; background: var(--primary-color); color: #fff; padding: 0.75rem 1rem; } .mobile-topbar .m-brand { font-weight: bold; letter-spacing: 0.12em; color: #fff; font-size: 1.2rem; } .nav-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3); border-radius: 6px; cursor: pointer; } .sidebar { width: 82%; max-width: 320px; transform: translateX(-100%); transition: transform 0.25s ease; z-index: 300; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .sidebar.open { transform: translateX(0); } .nav-menu { display: flex; flex-direction: column; } .bottom-widgets { display: flex; } .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 250; background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .nav-backdrop.open { opacity: 1; visibility: visible; } .main-content { margin-left: 0; } .footer-columns { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; } } @media (max-width: 600px) { .container { padding: 0 20px; } .section { padding: 60px 0; } .buttons-row { flex-direction: column; } .btn { width: 100%; text-align: center; } .big-column-card { padding: 24px; } .tl-header { flex-direction: column; align-items: flex-start; } .stat-grid { grid-template-columns: 1fr 1fr; } .field-row { grid-template-columns: 1fr; } .form-card { padding: 24px; } .reason-grid { grid-template-columns: 1fr; } }
/* ===== O NAS · sekcja „Nasza historia" (tekst na obrazie) ===== */
.history{position:relative;overflow:hidden;background-color:var(--c-bg-light)}
.history-copy{ padding-top: 64px; padding-bottom: 40px; }  /* mobile/tablet: stos (tekst nad obrazem) */
.history-text{max-width:980px}                      /* szerszy tekst = krótsze, niższe bloki */
.history .section-desc{max-width:none}              /* tylko tu; globalne 700 nietknięte */
.history-img{display:block;width:100%;height:auto}  /* mobile: obraz pod tekstem, pełny */

@media (min-width:1100px){
  .history-copy{position:absolute;top:0;left:0;right:0;z-index:1;padding-top:35px}  /* tekst NA obrazie */
  .history-img{
    height:clamp(460px,44vw,640px);   /* ucina puste dno kadru → brak dziury do „RCPK dzisiaj" */
    object-fit:cover;
    object-position:center 34%;        /* który pas pokazać: mniejszy % = droga wyżej, większy = niżej */
  }
}
@media (max-width: 700px){ .history-img{ display:none } }

/* ============================================================
   RCPK · BAZA WIEDZY — komponenty
   Przeniesione z inline <style> stron KB do rcpk.css (jedno źródło).
   Po wklejeniu: usuń bloki <style> z landingu, hubów i spoke'ów KB.
   ============================================================ */

/* --- Paleta obszarów (jeśli masz to już w rcpk-tokens.css, pomiń tę sekcję) --- */
[data-obszar="ewidencja"]  {--cat:#2563eb;--cat-soft:#eef4ff}
[data-obszar="odczyty"]    {--cat:#0e7490;--cat-soft:#e6f2f4}
[data-obszar="rozliczenia"]{--cat:#2f3f9e;--cat-soft:#eef0f8}
[data-obszar="przepisy"]   {--cat:#475569;--cat-soft:#eef1f5}
[data-obszar="kontrole"]   {--cat:#b45309;--cat-soft:#fdf1e3}
[data-obszar="szkolenia"]  {--cat:#6b5ca6;--cat-soft:#f0edf7}

/* --- Breadcrumb (kontrast AA: linki #2563eb, tekst #475569) --- */
.breadcrumb{margin-bottom:20px}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0}
.breadcrumb li{display:flex;align-items:center;font-size:13px;color:#475569}
.breadcrumb li + li::before{content:"/";margin-right:8px;color:#64748b}
.breadcrumb a{color:#2563eb;text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb li[aria-current="page"]{color:#475569}

/* --- Atomy współdzielone: ikona, ring, badge, czas czytania --- */
.ic{stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;width:1em;height:1em;flex-shrink:0}
.ring{width:44px;height:44px;border-radius:50%;border:1.6px solid var(--cat,#475569);color:var(--cat,#475569);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ring .ic{width:22px;height:22px}
.ring.sm{width:44px;height:44px}.ring.sm .ic{width:22px;height:22px}
.kb-badge{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--cat,#475569)}
.kb-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cat,#475569)}
.rt{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#64748b;font-variant-numeric:tabular-nums}
.rt .ic{width:15px;height:15px}

/* --- Strona artykułu (hub / sub-hub / spoke w stylu „kb") --- */
.kb-page{padding:40px 0 72px}
.kb-inner{max-width:1120px;margin:0 auto;padding:0 40px}
.kb-head{max-width:760px}
.kb-head .m{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.kb-head .kind{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#64748b}
.kb-hub h1{font-size:38px;font-weight:800;letter-spacing:-.02em;line-height:1.12;margin:0 0 18px}
.kb-lead{font-size:19px;color:#475569;line-height:1.6;margin:0}
.kb-lead + .kb-lead{margin-top:14px}
.kb-rule{height:3px;width:52px;background:var(--cat,#475569);border-radius:2px;margin:30px 0 34px}
.kb-prose{max-width:760px}
.kb-prose h2{font-size:23px;font-weight:700;letter-spacing:-.01em;margin:38px 0 14px;padding-left:14px;border-left:3px solid var(--cat,#475569)}
.kb-prose p{font-size:16px;color:#334155;line-height:1.68;margin:0 0 14px}
.kb-prose a{color:var(--cat,#2563eb);font-weight:600;text-decoration:none;border-bottom:1px solid transparent}
.kb-prose a:hover{border-bottom-color:var(--cat,#2563eb)}
.kb-prose ul{list-style:none;padding:0;margin:6px 0 14px}
.kb-prose ul li{position:relative;padding-left:20px;font-size:16px;color:#334155;line-height:1.6;margin-bottom:10px}
.kb-prose ul li::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--cat,#475569)}
.kb-boundary{background:var(--cat-soft,#f1f5f9);border-radius:12px;padding:14px 18px;font-size:14px;color:#475569;margin:8px 0 14px;max-width:760px}
.kb-maphead{font-size:23px;font-weight:700;margin:44px 0 18px;padding-left:14px;border-left:3px solid var(--cat,#475569)}
.kb-map{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.kb-map a{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:14px 16px;text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s}
.kb-map a:hover{border-color:var(--cat,#475569);box-shadow:0 8px 22px -12px rgba(15,23,42,.12)}
.kb-map a .ring{width:38px;height:38px}.kb-map a .ring .ic{width:19px;height:19px}
.kb-map a .tw{display:flex;flex-direction:column;gap:3px}
.kb-map a .t{font-size:14px;font-weight:600;line-height:1.3}
.kb-map a .d{font-size:12px;color:#64748b;line-height:1.35}
.kb-map a .st{font-size:11px;color:#64748b;font-weight:600}
.kb-related{margin-top:44px;padding-top:26px;border-top:1px solid #e2e8f0}
.kb-related h2{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#64748b;margin:0 0 16px;padding:0;border:0}
.kb-relrow{display:flex;gap:12px;flex-wrap:wrap}
.kb-relrow a{flex:1;min-width:200px;display:flex;align-items:center;gap:12px;border:1px solid #e2e8f0;border-radius:12px;padding:14px 16px;background:#fff;text-decoration:none;color:inherit}
.kb-relrow a:hover{border-color:#cdd8e6}
.kb-relrow .rl{font-size:14px;font-weight:600}
.kb-relrow .rd{font-size:12px;color:#64748b}
.kb-svc{margin-top:34px;background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:24px 26px;max-width:760px}
.kb-svc h3{font-size:20px;font-weight:700;letter-spacing:-.01em;margin:0 0 12px}
.kb-svc p{font-size:15px;color:#475569;line-height:1.6;margin:0 0 12px}
.kb-svc a{color:var(--cat,#2563eb);font-weight:600;text-decoration:none;display:inline-flex;gap:6px;margin-right:20px}
.kb-svc a .ic{width:15px;height:15px}

/* --- Tabele KB (formaty; docelowo także tabele wartości ze „stanem prawnym") --- */
.kb-tablewrap{overflow-x:auto;max-width:760px;margin:10px 0 16px}
.kb-table{width:100%;border-collapse:collapse;font-size:14px}
.kb-table caption{text-align:left;font-size:13px;color:#64748b;margin-bottom:8px}
.kb-table thead th{text-align:left;padding:9px 14px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#64748b;border-bottom:2px solid var(--cat,#475569);white-space:nowrap}
.kb-table td{padding:10px 14px;border-bottom:1px solid #e2e8f0;color:#334155;vertical-align:top}
.kb-table tbody tr:last-child td{border-bottom:0}
.kb-table tbody tr:hover{background:#f8fafc}
.kb-table code{font-size:13px;background:#f1f5f9;color:#0f172a;padding:2px 6px;border-radius:4px;font-weight:600}
.kb-table td:first-child{white-space:nowrap}

/* --- Warstwa wartości (leaf-spoke'y): stan prawny, szkielet, placeholdery --- */
.kb-legalbox{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;background:#f8fafc;border:1px solid #e2e8f0;border-left:3px solid var(--cat,#475569);border-radius:8px;padding:11px 15px;font-size:13px;color:#475569;margin:0 0 20px;max-width:760px}
.kb-legalbox strong{color:#0f172a;font-weight:700}
.kb-legalbox .src{color:#64748b}
.kb-skeleton{background:#fffbeb;border:1px dashed #f59e0b;border-radius:12px;padding:14px 18px;font-size:13px;line-height:1.55;color:#92400e;margin:0 0 22px;max-width:760px}
.kb-skeleton strong{display:block;margin-bottom:5px;text-transform:uppercase;letter-spacing:.06em;font-size:11px}
.kb-todo{display:inline-block;color:#b45309;background:#fdf1e3;border:1px dashed #f59e0b;border-radius:4px;padding:1px 8px;font-size:12px;font-weight:600;white-space:nowrap}
.kb-note{font-size:14px;color:#64748b;line-height:1.6;margin:0 0 14px}

/* --- Strona zbiorcza /baza-wiedzy/ (landing) --- */
.kb-intro{font-size:16px;color:#475569;max-width:60ch;line-height:1.6;margin:12px 0 0}
.kb-sechead{display:flex;align-items:center;gap:14px;margin:0 0 22px}
.kb-sechead .shi{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#e9f0fe;color:#2563eb}
.kb-sechead .shi .ic{width:22px;height:22px}
.kb-sechead h2{font-size:22px;font-weight:700}
.kb-sechead p{font-size:14px;color:#475569;margin-top:2px}
.kb-featured{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:20px;align-items:stretch}
.kb-fcard{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:26px;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s,transform .2s}
.kb-fcard:hover{border-color:#cdd8e6;box-shadow:0 16px 38px -16px rgba(15,23,42,.16);transform:translateY(-2px)}
.kb-fcard .num{font-size:26px;font-weight:800;color:var(--cat,#475569);line-height:1;font-variant-numeric:tabular-nums}
.kb-fcard .top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
.kb-fcard .ring{width:48px;height:48px}.kb-fcard .ring .ic{width:24px;height:24px}
.kb-fcard h3{font-size:18px;font-weight:700;line-height:1.34;margin:14px 0 10px}
.kb-fcard .u{width:34px;height:3px;border-radius:2px;background:var(--cat,#475569);margin-bottom:14px}
.kb-fcard p{font-size:14px;color:#475569;line-height:1.55;flex-grow:1;margin:0 0 20px}
.kb-fcard .foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.kb-fcard .more{font-size:14px;font-weight:600;color:var(--cat,#2563eb);display:inline-flex;align-items:center;gap:6px}
.kb-fcard .more .ic{width:16px;height:16px}
.kb-fcard.big{padding:0;overflow:hidden;flex-direction:row}
.kb-fcard.big .navy{background:#0A2540;width:170px;flex-shrink:0;display:flex;flex-direction:column;justify-content:space-between;padding:26px 22px;clip-path:polygon(0 0,100% 0,calc(100% - 26px) 100%,0 100%)}
.kb-fcard.big .navy .num{color:#fff;opacity:.6}
.kb-fcard.big .navy .ring{border-color:var(--cat,#2563eb);color:#93c5fd;width:60px;height:60px}
.kb-fcard.big .navy .ring .ic{width:30px;height:30px}
.kb-fcard.big .bodyc{padding:28px 30px;display:flex;flex-direction:column;flex:1}
.kb-fcard.big h3{font-size:22px;line-height:1.22;margin-top:0}
.kb-list{display:flex;flex-direction:column;gap:10px}
.kb-lrow{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px 20px;text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s}
.kb-lrow:hover{border-color:#cdd8e6;box-shadow:0 8px 22px -12px rgba(15,23,42,.12)}
.kb-lrow .m{flex:1;min-width:0}
.kb-lrow h3{font-size:15px;font-weight:700;line-height:1.35;margin:0 0 4px}
.kb-lrow p{font-size:13px;color:#475569;line-height:1.45;margin:0}
.kb-lrow .meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.kb-lrow .date{font-size:12px;color:#64748b;font-variant-numeric:tabular-nums}

/* --- Stopka: kreska marki + slogan (kolumna col-brand) --- */
.footer-brand-line{width:42px;height:2px;margin:18px 0 12px;background:#3b82f6;border-radius:1px}
.footer-slogan{margin:0;font-size:13px;line-height:1.5;color:#cbd5e1;font-weight:500}

/* --- Responsywność KB --- */
@media(max-width:1080px){
  .kb-featured{grid-template-columns:1fr 1fr}
  .kb-fcard.big{grid-column:1/-1}
}
@media(max-width:820px){
  .kb-inner{padding:0 20px}
  .kb-hub h1{font-size:30px}
  .kb-map{grid-template-columns:1fr}
}
@media(max-width:768px){
  .kb-featured{grid-template-columns:1fr}
  .kb-fcard.big{flex-direction:column}
  .kb-fcard.big .navy{width:100%;clip-path:none;flex-direction:row;align-items:center}
  .kb-lrow{flex-wrap:wrap}
  .kb-lrow .meta{flex-direction:row;align-items:center;gap:12px;width:100%;padding-left:62px}
}

/* --- Tabela na mobile: rozłożenie wierszy w kafelki --- */
@media(max-width:640px){
  .kb-table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .kb-table,.kb-table tbody,.kb-table tr,.kb-table td{display:block;width:100%}
  .kb-table tr{border:1px solid #e2e8f0;border-radius:12px;padding:4px 2px;margin-bottom:12px}
  .kb-table tbody tr:last-child{margin-bottom:0}
  .kb-table td{border:0;padding:7px 14px;white-space:normal}
  .kb-table td:first-child{font-size:15px;font-weight:700;padding:10px 14px 8px;border-bottom:1px solid #eef2f7}
  .kb-table td:not(:first-child)::before{content:attr(data-label);display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b;margin-bottom:2px}
  .kb-tablewrap{overflow-x:visible}
}