/* ══════════════════════════════════════════════════════════
   /umowy — strona modułu umów (projekt z 17.10.2026, kanwa
   „Billu Umowy — strona modułu”). Klasy z przedrostkiem um-.
   Barwy marki z main.css: granat #0B2430, morski, bordo #882D61.
   Przyciski i akcenty w ciemniejszym morskim (#007A7A), bo biały
   napis na #008F8F nie trzyma kontrastu 4.5:1.
   ══════════════════════════════════════════════════════════ */

.page-umowy { --um-teal: #007A7A; --um-teal-jasny: #3CC6C6; --um-granat: #0B2430; --um-bordo: #882D61;
    --um-tekst: #4B5A63; --um-tlo-szare: #F4F7F8; --um-linia: #E3E9EC;
    font-family: var(--font-body); color: #33414A; }
[data-theme="dark"] .page-umowy { --um-tekst: #B6C4CB; --um-tlo-szare: #111133; --um-linia: #2a2a5a; color: var(--text-main); }

.um-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.um-waska { max-width: 860px; }
.um-split { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.um-split-odwr { flex-wrap: wrap-reverse; }
.um-col { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.um-col-szeroka { flex: 1.4 1 520px; }

.page-umowy h1, .page-umowy h2 { font-family: var(--font-heading); font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.page-umowy h2 { font-size: clamp(2rem, 3.6vw, 2.75rem); line-height: 1.1; color: var(--text-heading); }
.page-umowy h3 { font-family: var(--font-body); font-size: 1.2rem; font-weight: 700; line-height: 1.3; margin: 0; color: var(--text-heading); }
.page-umowy p { margin: 0; }

/* ── Hero ── */
.um-hero { position: relative; overflow: hidden; background: var(--um-granat); color: #fff; }
.um-kolo { position: absolute; border-radius: 50%; }
.um-kolo-1 { width: 520px; height: 520px; background: #0F3A43; right: -140px; top: -180px; }
.um-kolo-2 { width: 260px; height: 260px; background: #2A1F3D; left: -90px; bottom: -110px; }
.um-hero-in { position: relative; padding-top: 120px; padding-bottom: 96px; }
.um-hero h1 { color: #fff; font-size: clamp(2.4rem, 5vw, 3.75rem); line-height: 1.05; }
.um-hero h1 em { font-style: normal; color: var(--um-teal-jasny); }
.um-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid #2E5563; border-radius: 999px; font-size: 13px; color: #CFE3E6; }
.um-kropka { width: 7px; height: 7px; border-radius: 50%; background: var(--um-teal-jasny); }
.um-lead { font-size: 1.125rem; line-height: 1.65; color: #C9D8DD; max-width: 540px; }
.um-atuty { list-style: none; margin: 8px 0 0; padding: 20px 0 0; border-top: 1px solid #22434F; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; font-size: 14px; color: #C9D8DD; }
.um-atuty li::before { content: "\2713"; color: var(--um-teal-jasny); font-weight: 700; margin-right: 8px; }

/* ── Przyciski ── */
.um-przyciski { display: flex; gap: 12px; flex-wrap: wrap; }
.um-demo { margin: 4px 0 0; font-size: 14px; line-height: 1.6; color: #C9D8DD; }
.um-demo a { color: var(--um-teal-jasny); }
.um-demo code { background: rgba(255,255,255,.08); padding: 1px 6px; border-radius: 4px; font-size: 13px; overflow-wrap: anywhere; }
.um-btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: 0 26px; border-radius: 12px; font-weight: 700; font-size: 16px; text-decoration: none; transition: background var(--transition), border-color var(--transition); }
.um-btn-teal { background: #009A9A; color: #fff; }
.um-btn-teal:hover { background: var(--um-teal); color: #fff; }
.um-sekcja .um-btn-teal { background: var(--um-teal); }
.um-sekcja .um-btn-teal:hover { background: #005E5E; }
.um-btn-obrys { border: 1.5px solid var(--um-teal-jasny); color: #fff; font-weight: 600; }
.um-btn-obrys:hover { background: rgba(60,198,198,.12); color: #fff; }
.um-btn-bordo { background: var(--um-bordo); color: #fff; }
.um-btn-bordo:hover { background: #6E2350; color: #fff; }

/* ── Okno przeglądarki ze zrzutem ── */
.um-okno { margin: 0; background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid #DCE4E8; box-shadow: 0 20px 50px rgba(11,36,48,.14); }
.um-okno-ciemne { border-color: #1F4552; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.um-okno-pasek { height: 32px; background: #EEF3F4; display: flex; align-items: center; gap: 7px; padding: 0 14px; }
.um-okno-pasek span:not(.um-okno-adres) { width: 10px; height: 10px; border-radius: 50%; background: #C9D3D8; }
.um-okno-pasek .r { background: #E26D5C; } .um-okno-pasek .z { background: #E9B949; } .um-okno-pasek .g { background: #5DBB7A; }
.um-okno-adres { margin-left: 12px; font-size: 12px; color: #5B6B74; }
.um-okno img { display: block; width: 100%; height: auto; }

/* ── Sekcje ── */
.um-sekcja { padding: 96px 0; background: var(--bg-card); }
.um-szara { background: var(--um-tlo-szare); }
.um-granat { background: var(--um-granat); color: #fff; }
.um-granat h2 { color: #fff; }
.um-granat p { color: #C9D8DD; font-size: 1.0625rem; }
.um-naglowek { max-width: 720px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 48px; }
.um-naglowek p, .um-akapit { font-size: 1.0625rem; color: var(--um-tekst); }
.um-tag { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--um-bordo); }
[data-theme="dark"] .um-tag { color: #E7A6C9; }
.um-tag-jasny { color: #E7A6C9; }
.um-drobne { font-size: 14px; color: #5B6B74; }

.um-siatka { display: grid; gap: 24px; }
.um-siatka-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.um-siatka-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.um-siatka-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

.um-karta { background: var(--bg-card); border-radius: 16px; padding: 32px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 2px 10px rgba(11,36,48,.06); }
.um-karta p { font-size: 15px; color: var(--um-tekst); }
.um-karta-mala { padding: 24px; gap: 8px; }
.um-karta-mala h3 { font-size: 1rem; }
.um-ikona { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.um-ikona-teal { background: #E3F3F3; color: var(--um-teal); }
.um-ikona-bordo { background: #F3E6EE; color: var(--um-bordo); }
.um-ikona-granat { background: #E3EAF0; color: var(--um-granat); }

/* ── Kroki ── */
.um-kroki { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.um-kroki li { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 3px solid var(--um-teal); }
.um-kroki p { font-size: 15px; color: var(--um-tekst); }
.um-nr { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 600; line-height: 1; color: var(--um-teal); }
.um-kroki .um-krok-bordo { border-top-color: var(--um-bordo); }
.um-krok-bordo .um-nr { color: var(--um-bordo); }
[data-theme="dark"] .um-nr { color: var(--um-teal-jasny); }
[data-theme="dark"] .um-krok-bordo .um-nr { color: #E7A6C9; }

/* ── Funkcje ── */
.um-funkcje { display: flex; flex-direction: column; gap: 88px; }
.um-funkcje .um-naglowek { margin-bottom: 0; }
.um-funkcje .um-col > p { font-size: 1rem; color: var(--um-tekst); }
.um-h3-duzy { font-family: var(--font-heading) !important; font-weight: 600 !important; font-size: 2.125rem !important; line-height: 1.15 !important; }
.um-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.um-lista li { display: flex; gap: 10px; }
.um-lista li::before { content: "\2713"; color: var(--um-teal); font-weight: 700; flex-shrink: 0; }

/* ── Warunki (makieta) ── */
.um-warunki { background: #fff; color: #33414A; border-radius: 16px; padding: 28px; box-shadow: 0 30px 80px rgba(0,0,0,.4); display: flex; flex-direction: column; gap: 18px; }
.um-warunki-gora, .um-warunki-dol { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.um-warunki-nr { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: #5B6B74; }
.um-warunki-firma { font-size: 18px; font-weight: 700; color: var(--um-granat); }
.um-status { padding: 4px 10px; border-radius: 999px; background: #E2F4EA; color: #1C6B3E; font-size: 12px; font-weight: 600; }
.um-tabela { border: 1px solid #E3E9EC; border-radius: 12px; overflow: hidden; }
.um-wiersz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px 16px; border-top: 1px solid #E3E9EC; font-size: 14px; align-items: center; }
.um-wiersz-nagl { border-top: 0; background: #F4F7F8; font-size: 12px; font-weight: 600; color: #5B6B74; padding: 10px 16px; }
.um-wiersz .b { font-weight: 600; color: var(--um-granat); }
.um-wiersz .stare { color: #5B6B74; text-decoration: line-through; }
.um-wiersz .nowe { font-weight: 700; color: var(--um-teal); }
.um-wiersz .bez { color: #5B6B74; }
.um-warunki-dol { font-size: 13px; color: #5B6B74; }
.um-btn-atrapa { min-height: 44px; display: inline-flex; align-items: center; padding: 0 20px; border-radius: 10px; background: var(--um-teal); color: #fff; font-weight: 600; font-size: 14px; }

/* ── Role ── */
.um-rola { border: 1px solid var(--um-linia); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 6px; background: var(--bg-card); }
.um-rola b { color: var(--text-heading); }
.um-rola span { font-size: 14px; color: var(--um-tekst); }

/* ── Cennik ── */
.um-baner { border-radius: 20px; background: #F3E6EE; padding: 48px; display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; }
.um-baner .um-col { flex: 1 1 520px; }
.um-baner h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); color: var(--um-granat); }
.um-baner p { font-size: 1rem; color: #4B5A63; }
.um-plan { padding: 28px; }
.um-plan-polecany { outline: 2px solid var(--um-teal); }
.um-cena b { font-size: 1.75rem; color: var(--text-heading); }
.um-cennik-dol { margin-top: 24px; }

/* ── FAQ ── */
.um-sekcja-faq { padding-top: 0; }
.um-sekcja-faq h2 { margin-bottom: 24px; }
.um-faq details { border-top: 1px solid var(--um-linia); padding: 20px 0; }
.um-faq details:last-child { border-bottom: 1px solid var(--um-linia); }
.um-faq summary { cursor: pointer; list-style: none; font-weight: 600; font-size: 1.0625rem; color: var(--text-heading); }
.um-faq summary::-webkit-details-marker { display: none; }
.um-faq summary::after { content: "+"; float: right; color: var(--um-teal); font-weight: 700; }
.um-faq details[open] summary::after { content: "\2212"; }
.um-faq p { margin-top: 12px; color: var(--um-tekst); }

/* ── Zakończenie ── */
.um-final { padding: 80px 0; }
.um-final-in { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; }
.um-final .um-col { flex: 1 1 520px; gap: 10px; }

/* ── Telefon i tablet ── */
@media (max-width: 960px) {
    .um-siatka-3, .um-siatka-4, .um-kroki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .um-siatka-2, .um-siatka-3, .um-siatka-4, .um-kroki, .um-atuty { grid-template-columns: minmax(0, 1fr); }
    .um-hero-in { padding-top: 96px; padding-bottom: 64px; }
    .um-sekcja { padding: 64px 0; }
    .um-baner { padding: 28px; }
    .um-btn { width: 100%; }
    .um-wiersz { grid-template-columns: 1.2fr 1fr 1fr; font-size: 13px; padding: 12px; }
}

/* Tabele cennika: przykłady (2 kolumny) i paczki podpisów (5 kolumn) */
.um-tabela-2 .um-wiersz { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.um-tabela-5 .um-wiersz { grid-template-columns: minmax(0, 2.2fr) repeat(4, minmax(0, 1fr)); }
.um-wiersz small { font-weight: 400; color: #5B6B74; font-size: 12px; }
@media (max-width: 720px) {
    .um-tabela-5 .um-wiersz { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); font-size: 12px; gap: 6px; padding: 10px 8px; }
    .um-tabela-2 .um-wiersz { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* /pracownicy — lista dokumentów w dwóch kolumnach */
.um-lista-2k { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; margin-top: 12px; }
@media (max-width: 640px) { .um-lista-2k { grid-template-columns: minmax(0, 1fr); } }
.um-hero .um-karta { color: #33414A; }
.um-hero .um-karta .um-lista { color: #33414A; }