/* =====================================================================
   gruntowo.pl – JASNA (KREMOWA) WERSJA STRONY GŁÓWNEJ
   Ciemne zostają: zdjęcie/film na górze (hero + sekcja z analizą),
   pasek menu, menu na telefonie i makiety „ekranów” raportu.
   Reszta strony – kremowa, z białymi kartami.
   ===================================================================== */

/* ---------- 1. paleta jasna dla całej strony ---------- */
body {
  --bg: #f4efe6;
  --surf: #faf6ef;
  --surf2: #ffffff;
  --brd: rgba(59,42,28, .12);
  --w: #3b2a1c;
  --m: rgba(59,42,28,.68);
  --m2: rgba(59,42,28,.68);
  --gold: #9a7536;              /* ciemniejsze złoto – czytelne na kremie */
  --goldl: #86652d;
  --hw-tlo: #ffffff;
  --hw-ramka: rgba(154, 117, 54, .22);
  background: #f4efe6;
  color: var(--w);
}

/* ---------- 2. elementy, które zostają ciemne ---------- */
.hero {
  --bg: #0b0c0a;
  --surf: #131410;
  --surf2: #1a1c17;
  --brd: rgba(255, 255, 255, .07);
  --w: #f2f0eb;
  --m: rgba(242, 240, 235, .5);
  --m2: rgba(242, 240, 235, .28);
  --gold: #c9a96e;
  --goldl: #dfc090;
  --hw-tlo: linear-gradient(160deg, rgba(34,36,29,.94) 0%, rgba(22,23,19,.96) 55%, rgba(15,16,13,.98) 100%);
  --hw-ramka: rgba(201, 169, 110, .24);
}
.hero { background-color: #0b0c0a; color: #f2f0eb; }

/* ---------- 3. sekcje: krem / piasek na zmianę ---------- */
.section { border-bottom-color: rgba(59,42,28, .08); }
/* jedno tło dla wszystkich sekcji */
.sekcja-analiza, #oferty, #ekosystem, #kontakt { background: #f4efe6 !important; }
#sourcing, #publikacje, #faq { background: #f4efe6 !important; }
.sekcja-analiza { color: var(--w); }
/* „Dlaczego gruntowo.pl?” – biała karta obok ciemnej makiety raportu */
.intro-tekst { background: #ffffff !important; border: 1px solid rgba(154, 117, 54, .2) !important; box-shadow: 0 30px 70px -40px rgba(59,42,28,.68); }
.intro-tekst .h2, .intro-tekst .ia-slowo { color: var(--w); }
.intro-tekst .h2 em, .intro-tekst .h2 em .ia-slowo { color: var(--gold); }
.section-dark { background: #f4efe6; }
.tag, .tag-light { color: var(--gold); }
.h2, .h2-light { color: var(--w); }
.h2 em { color: var(--gold); }
.lead { color: var(--m); }
#sourcing .lead, #sourcing .tag { text-shadow: none; }
#sourcing::after { background: none !important; }

/* ---------- 4. modele (karty) ---------- */
#sourcing .cards { background: var(--brd); border-color: var(--brd); box-shadow: 0 24px 60px -36px rgba(59,42,28, .45); }
#sourcing .card { background: #faf6ef; }
#sourcing .card:hover, #sourcing .card-hi { background: #ffffff; }
#sourcing .card h3 { color: var(--w); }
#sourcing .card p { color: var(--m); }
.src-card.card-hi { background: #ffffff; }

/* ---------- 5. oferty ---------- */
.ofr, .ofr:not(.ofr-premium) { background: #ffffff; border-color: rgba(154, 117, 54, .22); box-shadow: 0 22px 50px -34px rgba(59,42,28, .5); }
.ofr-premium { background: linear-gradient(170deg, #faf6ef 0%, #ffffff 60%); border-color: rgba(154, 117, 54, .6); box-shadow: 0 26px 60px -30px rgba(154, 117, 54, .55); }
.ofr-label { color: var(--m); }
.ofr-premium .ofr-label { color: var(--gold); }
.ofr-num { color: var(--gold); }
.ofr-unit { color: var(--m); }
.ofr-desc { color: var(--m); }
.ofr-lista li { color: #3b2a1c; border-bottom-color: rgba(154, 117, 54, .14); }
.ofr-lista li:before { color: var(--gold); }
.ofr-btn { border-color: var(--gold); color: var(--gold); }
.ofr-btn:hover { background: rgba(154, 117, 54, .08); }
.ofr-btn-premium { background: #9a7536; color: #fff; border-color: transparent; }
.ofr .ofr-pakiet { color: var(--m); border-color: rgba(154, 117, 54, .4); background: #faf6ef; }
.ofr .ofr-pakiet strong { color: var(--gold); }
.ofr::after { background-image: linear-gradient(105deg, transparent 35%, rgba(201, 169, 110, .12) 45%, transparent 58%) !important; }
.haslo-box { background: #ffffff !important; border-color: rgba(154, 117, 54, .35) !important; box-shadow: 0 18px 40px -30px rgba(59,42,28, .45); }
.haslo-row input { background: #faf6ef; border-color: rgba(59,42,28, .16); color: var(--w); }

/* ---------- 6. publikacje ---------- */
.pub-lista { gap: 1.5rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .pub-lista { grid-template-columns: 1fr; } }
.pub-karta {
  background: #ffffff;
  border: 1px solid rgba(59,42,28, .08);
  border-radius: 18px;
  box-shadow: 0 26px 60px -40px rgba(59,42,28,.68);
  padding: 1.25rem 1.25rem 1.5rem;
  gap: .9rem;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease;
}
.pub-karta:hover { transform: translateY(-6px); border-color: rgba(154, 117, 54, .35); box-shadow: 0 36px 70px -36px rgba(59,42,28,.68); }
.pub-karta::after { background-image: linear-gradient(105deg, transparent 35%, rgba(201, 169, 110, .14) 45%, transparent 58%); }
/* grafika jako „okładka” u góry karty */
.pub-karta-grafika {
  display: block; width: calc(100% + 2.5rem); max-width: none; margin: -1.25rem -1.25rem .35rem;
  height: auto; aspect-ratio: 1200 / 420; object-fit: cover; background: #faf6ef; border-radius: 0;
}
.pub-karta > :not(.pub-karta-grafika) { margin-left: .75rem; margin-right: .75rem; }
.pub-karta-tag {
  align-self: flex-start; font-size: .64rem; letter-spacing: .16em; color: var(--gold);
  background: rgba(154, 117, 54, .09); border-radius: 999px; padding: .35rem .75rem;
}
.pub-karta h3 { color: var(--w); font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.2; text-wrap: balance; }
.pub-karta h3 em { color: var(--gold); }
.pub-karta p { color: var(--m); font-size: .92rem; }
.pub-karta-liczby { gap: .7rem; }
.pub-karta-liczby div { background: #faf6ef; border: 0; border-radius: 12px; padding: .8rem .9rem; }
.pub-karta-liczby b { color: var(--gold); font-size: 1.6rem; }
.pub-karta-liczby span { color: var(--m); }
.pub-karta-stopka { border-top-color: rgba(59,42,28, .08); color: var(--m2); }
.pub-karta-stopka b {
  color: #fff; background: #9a7536; padding: .5rem 1rem; border-radius: 999px;
  font-size: .78rem; letter-spacing: .03em; transition: filter .2s ease; white-space: nowrap;
}
.pub-karta:hover .pub-karta-stopka b { filter: brightness(1.08); }
.pub-nastepna { background: rgba(255, 255, 255, .5); border-color: rgba(154, 117, 54, .35); color: var(--m); }
.pub-nastepna strong { color: var(--w); }
.pub-link, #publikacje a:not(.pub-karta) { color: var(--gold); }

/* ---------- 7. o nas ---------- */
.eco-staty div { background: #ffffff; border-color: rgba(154, 117, 54, .2); box-shadow: 0 16px 36px -30px rgba(59,42,28, .5); }
.eco-staty b { color: var(--gold); }
.eco-node h4 { color: var(--w); }
.eco-node p { color: var(--m); }
.eco-dot { border-color: var(--gold); }

/* ---------- 8. FAQ ---------- */
.faq-item summary { color: var(--w); }
.faq-item summary::after { color: var(--gold); }
.faq-item p { color: var(--m); }

/* ---------- 9. kontakt ---------- */
.fg label { color: var(--m); }
.fg input, .fg select, .fg textarea { background: #ffffff; border-color: rgba(59,42,28, .16); color: var(--w); }
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(154, 117, 54, .12); }
.contact-email { color: var(--gold); }
#kontakt address { color: var(--m); }
.btn-gold { background: #9a7536; color: #fff; }
.btn-gold:hover { background: #86652d; }

/* ---------- 10. stopka: ciemna (domyka stronę, logo jest jasne) ---------- */
.footer {
  --bg: #0b0c0a; --surf: #131410; --brd: rgba(255,255,255,.07);
  --w: #f2f0eb; --m: rgba(242,240,235,.6); --m2: rgba(242,240,235,.4); --gold: #c9a96e; --goldl: #dfc090;
  background: #2a1e14; color: var(--w); border-top: 0;
}

/* ---------- 11. drobne poprawki czytelności ---------- */
.zgoda-kontakt, .zgoda-kontakt span { color: var(--m) !important; }
.ofr-pakiet-kup { color: var(--gold) !important; }

/* tlo poza strona (przewijanie na telefonie) – ciemne jak hero i stopka */
html { background: #2a1e14; }

/* ---------- 12. hero: kremowy gradient na dole zdjęcia – płynne przejście w resztę strony ---------- */
.hero { position: relative; }
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(244,239,230,0) 0%, rgba(244,239,230,.28) 40%, rgba(244,239,230,.78) 75%, #f4efe6 100%);
}
.hero .hero-stats {
  position: relative; z-index: 3; background: transparent !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-top: 1px solid rgba(154,117,54,.25);
}
.hero .hstat-n { color: #9a7536; font-weight: 400; }
.hero .hstat-l { color: rgba(59,42,28,.68); }
.hero .hstat-d { background: rgba(154,117,54,.3); }
.hero .hero-partner, .hero .hero-partner-clause { color: #3b2a1c !important; text-shadow: 0 0 14px rgba(244,239,230,.9); }
.hero .hero-partner a { color: #9a7536 !important; }

/* ---------- 13. pasek menu: na starcie same białe napisy na zdjęciu,
   po przewinięciu wysuwa się z góry złoty (jak „Pokaż mapę”), szklany pasek ---------- */
.nav, .nav.scrolled {
  --w: #ffffff; --m: rgba(255,255,255,.75); --gold: #c9a96e;
  background: transparent !important; border-bottom: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* miedź – szklana, półprzezroczysta */
  background: rgba(154,117,54,.9);    /* odcień przycisku „Pokaż mapę”; tylko lekko przezroczysty, żeby zdjęcie go nie przyciemniało */
  border-bottom: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 10px 30px -18px rgba(90,62,24,.55);
  transform: translateY(-101%); transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.nav.scrolled::before { transform: translateY(0); }
@media (hover: none), (pointer: coarse) { .nav::before { background: rgba(154,117,54,.92); } }
.nav .nav-links a { color: #ffffff; text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.nav.scrolled .nav-links a { text-shadow: none; }
.nav .nav-links a:hover { color: #c9a96e; }
.nav .nav-cta { color: #fff !important; text-shadow: none !important; border-color: transparent !important; }
.nav .nav-burger span { background: #ffffff; }
/* menu na telefonie – ciemny brąz, białe napisy */
.mobile-menu { --w: #ffffff; --m: rgba(255,255,255,.72); --gold: #c9a96e; background: #2a1e14 !important; }
.mobile-menu a { color: #ffffff; }
.mobile-menu .mm-nowosc { color: #c9a96e !important; }

/* ---------- 14. jasne makiety „ekranów” raportu (animacje w hero, modelach, o nas) ---------- */
.hero-wizual, .hw-karta, .hw-modele {
  --bg: #f4efe6; --surf: #faf6ef; --surf2: #ffffff; --brd: rgba(59,42,28,.12);
  --w: #3b2a1c; --m: rgba(59,42,28,.68); --m2: rgba(59,42,28,.5);
  --gold: #9a7536; --goldl: #86652d;
  --hw-tlo: linear-gradient(160deg, #ffffff 0%, #faf6ef 60%, #faf6ef 100%);
  --hw-ramka: rgba(154,117,54,.22);
  --hw-ok: #9a7536;            /* status „ok” – złoto z palety */
  --hw-uwaga: #b07a1e;         /* bursztyn czytelny na bieli */
  --hw-cien: 0 40px 90px rgba(59,42,28,.22);
}
html body .hw-tor { stroke: rgba(59,42,28,.12); }
/* nadpisania kolorów wpisanych na sztywno w hero-raport.css (wygenerowane) */
html body .hw-przod { box-shadow: 0 50px 120px rgba(59,42,28,.22), 0 0 0 1px rgba(59,42,28,.12), inset 0 1px 0 rgba(59,42,28,.12); }
html body .hw-gora { border-bottom: 1px solid rgba(59,42,28,.12); }
html body .hw-zakladki { color: rgba(59,42,28,.68); }
html body .hw-zakladki .on { color: #3b2a1c; }
html body .hw-user { stroke: rgba(59,42,28,.68); }
html body .hw-narzedzia i { background: rgba(255,255,255,0.85); }
html body .hw-narzedzia svg { stroke: rgba(59,42,28,.68); }
html body .hw-id { color: #3b2a1c; }
html body .hw-gm { color: rgba(59,42,28,.68); }
html body .hw-tor { stroke: rgba(59,42,28,.68); }
html body .hw-liczba b { color: #3b2a1c; }
html body .hw-liczba small { color: rgba(59,42,28,.68); }
html body .hw-werdykt span { color: rgba(59,42,28,.68); }
html body .hw-wart { border-top: 1px solid rgba(59,42,28,.12); }
html body .hw-wart span { color: rgba(59,42,28,.68); }
html body .hw-wart strong { color: #3b2a1c; }
html body .hw-wart small { color: rgba(59,42,28,.68); }
html body .hw-lista { border-left: 1px solid rgba(59,42,28,.12); }
html body .hw-lista h4 { color: #3b2a1c; }
html body .hw-lista li { color: rgba(59,42,28,.68); }
html body .hw-btn { color: #3b2a1c; border: 1px solid rgba(59,42,28,.22); }
html body .hw-kafel { background: rgba(59,42,28,.04); border: 1px solid rgba(59,42,28,.12); }
html body .hw-kafel span { color: rgba(59,42,28,.68); }
html body .hw-kafel i { color: rgba(59,42,28,.68); border: 1px solid rgba(59,42,28,.22); }
html body .hw-stopka { border: 1px solid rgba(59,42,28,.12); }
html body .hw-stopka > span:first-child { color: rgba(59,42,28,.68); }
html body .hw-stopka .hw-btn { color: #9a7536; border-color: rgba(154,117,54,0.70); }
html body .hw-podpis { color: rgba(59,42,28,.68); }
html body .hero-wizual:hover .hw-btn { color: #9a7536; }
html body .hw2-zrodlo { color: rgba(59,42,28,.68); background: rgba(255,255,255,0.85); }
html body .hw2-sekcja { color: #9a7536; }
html body .hw2-statusy div { border: 1px solid rgba(59,42,28,.12); }
html body .hw2-statusy span { color: rgba(59,42,28,.68); }
html body .hw2-statusy b { color: #3b2a1c; }
html body .hw2-teren strong { color: #3b2a1c; }
html body .hw2-teren small { color: rgba(59,42,28,.68); }
html body .hw2-param div { background: rgba(59,42,28,.04); }
html body .hw2-param span { color: rgba(59,42,28,.68); }
html body .hw2-param b { color: #3b2a1c; }
html body .hw2-kafle em { color: #3b2a1c; }
html body .hw2-pasek { background: rgba(59,42,28,.12) !important; }
html body .hw2-slupki s:nth-child(3), html body .hw2-slupki s:nth-child(4) { background: rgba(59,42,28,.22); }
html body .hwm-tytul { color: #3b2a1c; }
html body .hwm-tytul small { color: rgba(59,42,28,.68); }
html body .hwm-w { border-bottom: 1px solid rgba(154,117,54,0.16); }
html body .hwm-w span { color: rgba(59,42,28,.68); }
html body .hwm-w b { color: #3b2a1c; }
html body .hwm-roczniki > div { background: #faf6ef; }
html body .hwm2-wart { color: #3b2a1c; }
html body .hwm2-lista { border-left-color: rgba(154,117,54,0.20); }
html body .hwm3-wideo { background: radial-gradient(ellipse at 50% 35%, #faf6ef 0%, #faf6ef 70%); border: 1px solid rgba(154,117,54,0.20); }
html body .hwm3-live { color: rgba(59,42,28,.68); background: rgba(255,255,255,0.85); }
html body .hwm3-osoba svg { fill: rgba(154,117,54,0.36); stroke: rgba(154,117,54,0.70); }
html body .hwm3-kto { color: #3b2a1c; }
html body .hwm3-plan h4 { color: #3b2a1c; }
html body .hwm3-plan li { color: rgba(59,42,28,.68); border-bottom: 1px solid rgba(154,117,54,0.16); }
html body .hwm3-terminy span { color: rgba(59,42,28,.68); }
html body .hwm3-terminy i { color: rgba(59,42,28,.68); border: 1px solid rgba(154,117,54,0.33); }
html body .hwm4-tytul { color: #3b2a1c; }
html body .hwm4-linia { background: rgba(154,117,54,0.23); }
html body .hwm4-krok i { background: #faf6ef; border: 1.5px solid rgba(154,117,54,0.45); color: rgba(59,42,28,.68); }
html body .hwm4-krok.trwa i { box-shadow: 0 0 0 5px rgba(154,117,54,0.20); }
html body .hwm4-krok b { color: #3b2a1c; }
html body .hwm4-krok span { color: rgba(59,42,28,.68); }
html body .hwm4-zespol { border-top: 1px solid rgba(154,117,54,0.16); }
html body .hwm4-zespol span { color: rgba(59,42,28,.68); }
html body .hwm4-zespol i { color: #3b2a1c; border: 1px solid rgba(154,117,54,0.39); }
html body .hw3-mapa { background: radial-gradient(ellipse at 45% 45%, rgba(154,117,54,0.10), transparent 70%), rgba(59,42,28,.04); border: 1px solid rgba(154,117,54,0.18); }
html body .hw3-obrys { fill: rgba(154,117,54,0.08); stroke: rgba(154,117,54,0.55); }
html body .hw3-linia { stroke: rgba(154,117,54,0.50); }
html body .hw3-miasto text { fill: rgba(59,42,28,.68); }
html body .hw3-miasto.glowne circle { fill: #9a7536; }
html body .hw3-miasto.glowne text { fill: #3b2a1c; }
html body .hw3-puls { fill: rgba(154,117,54,0.45); stroke: rgba(154,117,54,0.50); }
html body .hw3-mapa-t { color: rgba(59,42,28,.68); background: rgba(255,255,255,0.85); }
html body .hw3-l { background: rgba(59,42,28,.04); border: 1px solid rgba(154,117,54,0.21); }
html body .hw3-l b { color: #9a7536; }
html body .hw3-l span { color: rgba(59,42,28,.68); }
html body .hw3-chipy span { color: rgba(59,42,28,.68); }
html body .hw3-chipy i { color: #3b2a1c; border: 1px solid rgba(154,117,54,0.39); }
html body .hero .hw-klik { color: rgba(59,42,28,.68); }
html body .hw-przod { box-shadow: 0 18px 40px rgba(59,42,28,.22), 0 0 0 1px rgba(59,42,28,.12) !important; }


/* logo w makietach (jasny napis) – ciemne na bialej karcie */


/* ---------- 15. jasna wyszukiwarka w hero (mleczne szkło, białe pole) ---------- */
.hero .search-box {
  --w: #3b2a1c; --m: rgba(59,42,28,.68); --m2: rgba(59,42,28,.5); --gold: #9a7536; --brd: rgba(59,42,28,.12);
  background: linear-gradient(160deg, rgba(255,252,246,.88), rgba(244,239,230,.8)) !important;
  border: 1px solid rgba(255,255,255,.65) !important; color: #3b2a1c;
  -webkit-backdrop-filter: blur(18px) saturate(1.4) !important; backdrop-filter: blur(18px) saturate(1.4) !important;
  box-shadow: 0 30px 70px -40px rgba(59,42,28,.68);
}
.hero .search-box .search-hint-sm, .hero .search-box .map-hint-coords, .hero .search-box p { color: rgba(59,42,28,.68) !important; text-shadow: none; }
.hero .search-box .search-label { color: #9a7536; }
.hero .search-box .search-row { background: #ffffff !important; border-color: rgba(59,42,28,.12) !important; }
.hero .search-box .search-field, .hero .search-box .search-field input { color: #3b2a1c !important; }
.hero .search-box .search-field input::placeholder { color: rgba(59,42,28,.45) !important; }
.hero .search-box .search-field svg { color: #9a7536; }
.hero .search-box label, .hero .search-box label span { color: rgba(59,42,28,.68); }
.hero .search-box a { color: #9a7536; }
/* telefony: bez rozmycia – mniej przezroczyste tło */
@media (hover: none), (pointer: coarse) {
  .hero .search-box { background: linear-gradient(160deg, rgba(255,252,246,.95), rgba(244,239,230,.92)) !important; }
}

/* ---------- 16. czern -> ciemny braz ---------- */
.footer { --bg: #2a1e14; --surf: #33251a; }

/* ---------- 17. SPÓJNA PALETA – mniej odcieni ----------
   tło #f4efe6 · karty #ffffff · delikatne wypełnienia #faf6ef
   tekst #3b2a1c (+ 68% krycia) · akcent #9a7536 (hover #86652d)
   linie rgba(59,42,28,.12) · stopka #2a1e14 */
body { --lin: rgba(59,42,28,.12); --cien: 0 22px 50px -34px rgba(59,42,28,.45); }
.section, .sekcja-analiza { border-top: 1px solid var(--lin); border-bottom: 0 !important; }
.hero + .section, .hero + .sekcja-analiza, .hero + * { border-top: 0; }
.intro-tekst, .ofr, .ofr:not(.ofr-premium), .pub-karta, .eco-staty div, .haslo-box {
  border: 1px solid var(--lin) !important; box-shadow: var(--cien) !important;
}
.ofr-premium { background: #ffffff !important; border: 1px solid #9a7536 !important; }
.pub-karta:hover { border-color: rgba(154,117,54,.45) !important; }
#sourcing .cards { box-shadow: var(--cien); }
.faq-item { border-color: var(--lin) !important; background: transparent !important; }
.pub-nastepna { background: #ffffff; border-color: var(--lin); }
.ofr-btn-premium, .btn-gold, .nav .nav-cta, .pub-karta-stopka b { background: #9a7536 !important; color: #fff !important; }
.ofr-btn-premium:hover, .btn-gold:hover, .nav .nav-cta:hover { background: #86652d !important; filter: none; }
.hero .hstat-n, .hero .search-box .search-label, .hero .search-box svg { color: #9a7536; }

/* ---------- 18. jednolite plakietki i statusy (złoto + biały napis) ---------- */
.nav-nowosc, .ofr-badge, .cta-plyw, html body .hw2-etykieta, html body .hwm2-werdykt, html body .hwm3-terminy i.on, html body .hwm4-krok.ok i, html body .hwm4-krok.gotowe i { color: #fff !important; }
.cta-plyw { background: #9a7536 !important; }

html body .hw2-teren { background: rgba(154,117,54,.06) !important; }

/* przycisk w miedzianym pasku – jasny, szklany obrys */
.nav.scrolled .nav-cta { background: rgba(255,255,255,.14) !important; border: 1px solid rgba(255,255,255,.7) !important; }
.nav.scrolled .nav-cta:hover { background: #ffffff !important; color: #9a7536 !important; }
.nav.scrolled .nav-links a:hover { color: #fff3dc; }

/* białe napisy i ikony na złotych przyciskach */
.search-btn-gold, .search-btn-gold:hover { color: #ffffff !important; }
.search-btn-gold svg { stroke: currentColor; }
.cta-plyw svg { stroke: #ffffff !important; }
/* na złotym pasku: całe logo białe, plakietka „Nowość” biała */
.nav.scrolled .nav-logo-img { filter: brightness(0) invert(1); }
.nav.scrolled .nav-nowosc { background: #ffffff !important; color: #9a7536 !important; }
.nav.scrolled .nav-nowosc svg { stroke: #9a7536 !important; }

/* ---------- 19. okienko cookies – jasne ---------- */
html body #zgody {
  background: rgba(255,255,255,.92) !important; color: #3b2a1c;
  border: 1px solid rgba(59,42,28,.12); box-shadow: 0 22px 50px -24px rgba(59,42,28,.45);
}
@media (hover: none), (pointer: coarse), (max-width: 760px) { html body #zgody { background: #ffffff !important; } }
html body #zgody h3 { color: #9a7536; }
html body #zgody p, html body #zgody .zg-op { color: rgba(59,42,28,.68); }
html body #zgody .zg-op strong { color: #3b2a1c; }
html body #zgody .zg-opcje, html body #zgody .zg-op { border-color: rgba(59,42,28,.12); }
html body #zgody a { color: #9a7536; }
html body #zgody button { background: transparent; color: #3b2a1c; border-color: rgba(59,42,28,.22); }
html body #zgody button:hover { border-color: #9a7536; }
html body #zgody button.zg-tak { background: #9a7536; border-color: #9a7536; color: #ffffff; }
html body #zgody button.zg-tak:hover { background: #86652d; }
html body #zgody .zg-op input { accent-color: #9a7536; }

/* ---------- 20. jasniejsze zdjecie hero (pola, slonce wyzej nad horyzontem) ---------- */
.hero-bg {
  /* ciemniejszy, cieply cien po lewej - napisy zostaja czytelne na jasnym niebie */
  background-image: linear-gradient(90deg, rgba(42,30,20,.58) 0%, rgba(42,30,20,.34) 38%, rgba(42,30,20,0) 66%), url('hero-jasne.jpg') !important;
  background-image: linear-gradient(90deg, rgba(42,30,20,.58) 0%, rgba(42,30,20,.34) 38%, rgba(42,30,20,0) 66%), image-set(url('hero-jasne.webp') type('image/webp'), url('hero-jasne.jpg') type('image/jpeg')) !important;
  background-position: center 45% !important;
}
@media (max-width: 760px) {
  .hero-bg { background-image: linear-gradient(180deg, rgba(42,30,20,.5) 0%, rgba(42,30,20,.25) 50%, rgba(42,30,20,0) 75%), url('hero-jasne.jpg') !important;
             background-image: linear-gradient(180deg, rgba(42,30,20,.5) 0%, rgba(42,30,20,.25) 50%, rgba(42,30,20,0) 75%), image-set(url('hero-jasne.webp') type('image/webp'), url('hero-jasne.jpg') type('image/jpeg')) !important; }
}

/* ---------- 21. O nas: zdjecie kamienicy Mlynska 12 na calym tle sekcji (rozjasnione kremem) ---------- */
#ekosystem {
  position: relative; overflow: hidden; isolation: isolate;
  background: #f4efe6 url('onas-tlo.jpg') 72% 28% / cover no-repeat !important;
  background-image: image-set(url('onas-tlo.webp') type('image/webp'), url('onas-tlo.jpg') type('image/jpeg')) !important;
}
#ekosystem::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(244,239,230,.94) 0%, rgba(244,239,230,.86) 40%, rgba(244,239,230,.62) 72%, rgba(244,239,230,.5) 100%),
    linear-gradient(180deg, rgba(244,239,230,1) 0%, rgba(244,239,230,0) 18%, rgba(244,239,230,0) 62%, rgba(244,239,230,.9) 88%, #f4efe6 100%);
}
/* uklad: naglowek + liczby | karta;  pod spodem 4 karty w jednym rzedzie */
#ekosystem .eco-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "tekst karta" "lista lista"; column-gap: 4vw; row-gap: 3rem; align-items: center; }
#ekosystem .eco-layout > div:first-child { display: contents; }
#ekosystem .naglowek-dyn { grid-area: tekst; }
#ekosystem .hw-onas { grid-area: karta; }
#ekosystem .eco-list { grid-area: lista; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; border-top: 0; margin-top: 0; }
#ekosystem .eco-node { flex-direction: column; gap: .6rem; padding: 1.3rem 1.3rem 1.4rem; border: 1px solid rgba(59,42,28,.12) !important; border-radius: 16px;
  background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 22px 50px -34px rgba(59,42,28,.45); }
#ekosystem .eco-node h4 { font-size: 1rem; }
#ekosystem .eco-node p { font-size: .84rem; }
#ekosystem .eco-dot { background: #9a7536; margin-top: 0; }
#ekosystem .eco-staty div { background: rgba(255,255,255,.9) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 12px; }
@media (max-width: 1099px) {
  #ekosystem .eco-layout { grid-template-columns: 1fr; grid-template-areas: "tekst" "karta" "lista"; }
  #ekosystem .eco-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  #ekosystem { background-position: 60% 20% !important; }
  #ekosystem::before { background: rgba(244,239,230,.88); }
  #ekosystem .eco-list { grid-template-columns: 1fr; }
}

/* ---------- 22. krok 2 (mapa): jasne pole ulicy i jasna etykieta pinezki ---------- */
html body #ulica-box .ul-pole { background: #ffffff !important; border: 1px solid rgba(154,117,54,.45) !important; box-shadow: 0 10px 26px -16px rgba(59,42,28,.45) !important; }
html body #ulica-box input { color: #3b2a1c !important; }
html body #ulica-box input::placeholder { color: rgba(59,42,28,.5); }
html body #ulica-box .ul-x { color: rgba(59,42,28,.55) !important; }
html body #ulica-box .ul-pasek { background: #9a7536 !important; }
html body #ulica-box .ul-lista { background: #ffffff !important; border-color: rgba(154,117,54,.35) !important; box-shadow: 0 16px 34px -18px rgba(59,42,28,.5); }
html body #ulica-box .ul-lista button { color: #3b2a1c !important; border-bottom-color: rgba(59,42,28,.08) !important; }
html body #ulica-box .ul-lista button:hover { background: rgba(154,117,54,.08) !important; }
html body #ulica-box .ul-info { color: rgba(59,42,28,.6) !important; }
html body #ulica-otworz { color: #9a7536 !important; }
.map-pin-text {
  color: #3b2a1c !important; background: rgba(255,252,246,.96) !important; border: 1px solid rgba(154,117,54,.5) !important;
  border-radius: 999px !important; padding: .4rem .9rem !important; box-shadow: 0 8px 20px -10px rgba(59,42,28,.55);
}
.map-pin-text b { color: #9a7536; font-weight: 600; }
.map-pin-text small { color: rgba(59,42,28,.62); font-size: .72rem; margin-left: .15rem; }
/* podpowiedzi miejscowosci pod wyszukiwarka - jasne */
html body #podp-miejsc { background: #ffffff !important; border: 1px solid rgba(154,117,54,.35) !important; box-shadow: 0 18px 40px -20px rgba(59,42,28,.5) !important; }
html body #podp-miejsc button { color: #3b2a1c !important; border-bottom-color: rgba(59,42,28,.08) !important; }
html body #podp-miejsc button b { color: #3b2a1c !important; }
html body #podp-miejsc button small { color: rgba(59,42,28,.6) !important; }
html body #podp-miejsc button:hover, html body #podp-miejsc button.on, html body #podp-miejsc button[aria-selected="true"] { background: rgba(154,117,54,.1) !important; }
/* bez linii na laczeniu sekcji "O nas" z sasiednimi */
#ekosystem, #ekosystem + section, #ekosystem + .section { border-top: 0 !important; border-bottom: 0 !important; }

/* ---------- 23. Kontakt: zdjecie klatki schodowej z biura na Mlynskiej ---------- */
.biuro-foto { position: relative; margin: 1.8rem 0 0; border-radius: 18px; overflow: hidden; box-shadow: 0 26px 60px -36px rgba(59,42,28,.55); }
.biuro-foto img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.biuro-foto::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(30,21,14,0) 35%, rgba(30,21,14,.55) 65%, rgba(30,21,14,.88) 100%); }
.biuro-foto figcaption { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.1rem; z-index: 2; display: flex; flex-direction: column; gap: .3rem; }
.biuro-foto strong { font-family: var(--fd, inherit); font-weight: 500; font-size: clamp(1.25rem, 2vw, 1.6rem); color: #fbf6ec; line-height: 1.2; }
.biuro-foto span { font-size: .86rem; color: rgba(251,246,236,.82); line-height: 1.5; }
.biuro-foto a { align-self: flex-start; margin-top: .35rem; font-size: .8rem; color: #fff !important; background: #9a7536; padding: .45rem .95rem; border-radius: 999px; text-decoration: none; }
.biuro-foto a:hover { background: #86652d; }
@media (max-width: 520px) { .biuro-foto img { aspect-ratio: 4 / 3; } }
/* zdjecie biura: szeroki baner na cala szerokosc pod formularzem */
#kontakt .biuro-foto { margin: 3rem 0 0; }
#kontakt .biuro-foto img { aspect-ratio: 21 / 9; object-position: 50% 38%; }
#kontakt .biuro-foto::after { background: linear-gradient(90deg, rgba(30,21,14,.85) 0%, rgba(30,21,14,.55) 38%, rgba(30,21,14,0) 65%); }
#kontakt .biuro-foto figcaption { left: clamp(1.4rem, 4vw, 3.5rem); right: auto; top: 50%; bottom: auto; transform: translateY(-50%); max-width: 420px; gap: .5rem; }
#kontakt .biuro-foto strong { font-size: clamp(1.6rem, 3vw, 2.5rem); }
#kontakt .biuro-foto span { font-size: .95rem; }
@media (max-width: 760px) {
  #kontakt .biuro-foto img { aspect-ratio: 4 / 5; }
  #kontakt .biuro-foto::after { background: linear-gradient(180deg, rgba(30,21,14,0) 35%, rgba(30,21,14,.88) 100%); }
  #kontakt .biuro-foto figcaption { top: auto; bottom: 1.3rem; transform: none; right: 1.3rem; }
}

/* ---------- 24. Kontakt: dziedziniec kamienicy Mlynska 12 w tle (rozjasniony kremem, jak "O nas") ---------- */
#kontakt {
  position: relative; overflow: hidden; isolation: isolate;
  background: #f4efe6 url('kontakt-tlo.jpg') center 40% / cover no-repeat !important;
  background-image: image-set(url('kontakt-tlo.webp') type('image/webp'), url('kontakt-tlo.jpg') type('image/jpeg')) !important;
  border-top: 0 !important;
}
#kontakt::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(244,239,230,.94) 0%, rgba(244,239,230,.86) 40%, rgba(244,239,230,.7) 72%, rgba(244,239,230,.6) 100%),
    linear-gradient(180deg, #f4efe6 0%, rgba(244,239,230,0) 16%, rgba(244,239,230,0) 70%, rgba(244,239,230,.9) 100%);
}
#kontakt .fg input, #kontakt .fg select, #kontakt .fg textarea { background: rgba(255,255,255,.94); }
@media (max-width: 640px) { #kontakt::before { background: rgba(244,239,230,.9); } }

/* ---------- 25. Okienko "Ktora miejscowosc?" na mapie - jasne ---------- */
html body #miejsca-wybor { background: rgba(255,252,246,.97) !important; border: 1px solid rgba(154,117,54,.4) !important; color: #3b2a1c !important;
  box-shadow: 0 18px 40px -22px rgba(59,42,28,.5); }
html body #miejsca-wybor .mw-glowa strong { color: #3b2a1c !important; }
html body #miejsca-wybor .mw-glowa span { color: rgba(59,42,28,.68) !important; }
html body #miejsca-wybor .mw-lista button { background: #ffffff !important; border: 1px solid rgba(59,42,28,.14) !important; color: #3b2a1c !important; }
html body #miejsca-wybor .mw-lista button:hover { border-color: #9a7536 !important; background: rgba(154,117,54,.06) !important; }
html body #miejsca-wybor .mw-lista small { color: rgba(59,42,28,.62) !important; }
html body #miejsca-wybor .mw-zamknij, html body #miejsca-zmien, html body #miejsca-zmien-k { color: #9a7536 !important; }

/* ---------- 26. Okno umawiania konsultacji - jasne ---------- */
html body #konsult-modal { background: rgba(42,30,20,.55) !important; }
html body #konsult-modal form { background: #fbf8f2 !important; border: 1px solid rgba(154,117,54,.3) !important; color: #3b2a1c !important; box-shadow: 0 40px 90px -40px rgba(30,21,14,.7); }
html body #konsult-modal h3 { color: #3b2a1c !important; }
html body #konsult-modal p, html body #konsult-modal label, html body #konsult-modal .km-info, html body #konsult-modal .kal-info, html body #konsult-modal .kal-dane span { color: rgba(59,42,28,.68) !important; }
html body #konsult-modal .km-zgoda, html body #konsult-modal .km-dz { color: rgba(59,42,28,.75) !important; }
html body #konsult-modal input:not([type=checkbox]):not([type=radio]) { background: #ffffff !important; border: 1px solid rgba(59,42,28,.16) !important; color: #3b2a1c !important; }
html body #konsult-modal input::placeholder { color: rgba(59,42,28,.45); }
html body #konsult-modal .km-krok, html body #konsult-modal .km-mapa-btn, html body #konsult-modal .km-id-btn, html body #konsult-modal .km-rodo a, html body #konsult-modal .km-zgoda a { color: #9a7536 !important; }
html body #konsult-modal .km-dz strong, html body #konsult-modal .km-info strong, html body #konsult-modal .kal-dane a { color: #9a7536 !important; }
html body #konsult-modal .km-dz { border-top-color: rgba(59,42,28,.1) !important; }
html body #konsult-modal .km-mapa { border-color: rgba(59,42,28,.16) !important; background: #ffffff; }
html body #konsult-modal button[type=submit], html body #konsult-modal .km-szukaj button { background: #9a7536 !important; color: #ffffff !important; }
html body #konsult-modal .x { color: rgba(59,42,28,.55) !important; }
html body #konsult-modal .msg { color: #b4412f !important; }
html body #konsult-modal .km-zgoda input { accent-color: #9a7536; }
html body #konsult-modal .kal-dzien, html body #konsult-modal .kal-g { background: #ffffff !important; border: 1px solid rgba(59,42,28,.16) !important; color: #3b2a1c !important; }
html body #konsult-modal .kal-dzien small { color: rgba(59,42,28,.6) !important; }
html body #konsult-modal .kal-dzien.on { border-color: #9a7536 !important; background: rgba(154,117,54,.1) !important; }
html body #konsult-modal .kal-dzien.on small { color: #9a7536 !important; }
html body #konsult-modal .kal-g:hover { border-color: #9a7536 !important; }
html body #konsult-modal .kal-g.on { background: #9a7536 !important; border-color: #9a7536 !important; color: #ffffff !important; }
/* podpowiedzi i pole ulicy z wyszukiwarki miejscowosci (okno konsultacji, raport) - jasne */
html body .gs-podp { background: #ffffff !important; border-color: rgba(154,117,54,.35) !important; box-shadow: 0 18px 40px -20px rgba(59,42,28,.5) !important; }
html body .gs-podp button { color: #3b2a1c !important; border-bottom-color: rgba(59,42,28,.08) !important; }
html body .gs-podp button:hover, html body .gs-podp button.on { background: rgba(154,117,54,.08) !important; }
html body .gs-podp small { color: rgba(59,42,28,.6) !important; }
html body .gs-ulica .gs-ul-pole { background: #ffffff !important; border-color: rgba(154,117,54,.45) !important; }
html body .gs-ulica input, html body #konsult-modal .gs-ulica input { background: none !important; border: 0 !important; color: #3b2a1c !important; }
html body .gs-ulica .gs-ul-x, html body .gs-ulica .gs-ul-info { color: rgba(59,42,28,.6) !important; }
html body .gs-ulica .gs-ul-lista { background: #ffffff !important; border-color: rgba(154,117,54,.35) !important; }
html body .gs-ulica .gs-ul-lista button { color: #3b2a1c !important; border-bottom-color: rgba(59,42,28,.08) !important; }
html body .gs-ulica .gs-ul-lista button:hover { background: rgba(154,117,54,.08) !important; }

/* Publikacje: przy 4 kartach - szeroka na gorze + 3 rowne kolumny (bez pustego miejsca) */
.pub-lista:has(> .pub-karta:nth-child(4):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .pub-lista:has(> .pub-karta:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-lista:has(> .pub-karta:nth-child(4):last-child) > .pub-karta:nth-child(4) { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .pub-lista:has(> .pub-karta:nth-child(4):last-child) { grid-template-columns: 1fr; }
}

/* Publikacje 4 karty: wyrownanie trzech kart w rzedzie */
.pub-lista:has(> .pub-karta:nth-child(4):last-child) > .pub-karta:not(:first-child) h3 { font-size: clamp(21px, 1.7vw, 25px) !important; line-height: 1.22; }
.pub-lista:has(> .pub-karta:nth-child(4):last-child) > .pub-karta:not(:first-child) .pub-karta-liczby { display: none; }
.pub-lista:has(> .pub-karta:nth-child(4):last-child) > .pub-karta:not(:first-child) .pub-karta-stopka { margin-top: auto; }

/* ---------- 27. produkcja: grafiki i logo w wersji jasnej (HTML ma wersje ciemne, podmiana tylko gdy wlaczony jasny motyw) ---------- */
html body .hwt-bok img[src^="gruntowo-logo.png"], html body img.hw-logo[src^="gruntowo-logo.png"] { content: url('gruntowo-logo-braz.png'); }
html body img.pub-karta-grafika[src^="grafika-plany.svg"] { content: url('grafika-plany-jasna.svg?v=2'); }
html body img.pub-karta-grafika[src^="grafika-poznan.svg"] { content: url('grafika-poznan-jasna.svg?v=2'); }
html body img.pub-karta-grafika[src^="grafika-stopy.svg"] { content: url('grafika-stopy-jasna.svg?v=2'); }