/* ==========================================================================
   Pewne Wnętrze - wariant z panelami (kopia wersji testowej)

   Folder nazywa się "Krem", bo wariant zaczynał się od kremowego tła strony.
   Na życzenie klienta tło jest teraz ciemne; wersja z kremowym tłem jest
   zachowana w css/krem-tlo-kremowe.css (nieużywana).

   Budowa jak na stronie SpedLiDAR: każda sekcja strony głównej jest osobnym
   granatowym panelem (zaokrąglony blok ze złotą ramką, jak kalkulator), a panele
   stoją na ciemniejszym tle strony z kratką. Hero i pasek usług są granatowe na całą
   szerokość, menu od razu ma tło i złotą linię u dołu, a stopka kolor paneli.
   Strona jest węższa: kontener 1090 px zamiast 1240 px (o 12% mniej), panel 1186 px.

   Względem wersji granatowej (folder _Test) różnią się:
   - ten arkusz (wczytany jako ostatni, włącza go klasa .krem na <html>),
   - index.html: karta "Bez niespodzianek" w hero bez zdjęcia (wygląd karty w sekcji 2
     tego arkusza), akapit pod nagłówkiem FAQ, złoty przycisk "Wszystkie artykuły",
     zdjęcie nad kartą oferty, "Blog" w górnym menu (#blog: przewija do sekcji bloga,
     jak w SpedLiDAR; stopka nadal prowadzi do strony bloga), karty bloga prowadzące
     do osobnych stron artykułów oraz skrypt kalkulatora (kosz przy każdym pomieszczeniu,
     wiersz "Elektryka", ikony opcji, pole karton-gips tylko przy WC podwieszanym,
     podział kosztorysu na pomieszczenia, ikony w katalogu i cenniku, przycisk
     "Wyślij bez wyceny"; obsługuje go backend/wycena.php w _Project, polem bezWyceny),
   - blog: każdy artykuł to osobna strona blog/<adres>.html; blog/index.html to tylko
     lista (nagłówek jak "Dlaczego Pewne Wnętrze" zamiast pasa .page-hero, poziomica,
     panel z filtrami i kartami, FAQ z kontaktem zamiast banera "Pytanie o konkretny
     remont?"); menu, FAQ i stopkę na stronach bloga wstawia _tools/blog.mjs ze strony
     głównej ("Blog" w menu prowadzi do sekcji bloga na stronie głównej),
   - css/kalkulator-v2.css (wygląd tych zmian kalkulatora; nowy wygląd jest na stałe, bez
     przełącznika "Obecny / Propozycja") i js/main.js (jedno zdjęcie we wszystkich zakładkach
     oferty, kratka paneli, stopki i kalkulatora przedłuża kratkę tła strony),
   - przyciski w wyglądzie "Miarka" (sekcja 7 tego arkusza).
   style.css jest w obu folderach taki sam.
   ========================================================================== */

/* ---------- 1. Tło strony i tło paneli ----------
   Strona jest ciemniejsza niż panele, żeby panele było widać jako osobne bloki.
   --bg na <html> to tło strony (pod nim maskują się okienko poziomicy i środek
   lasera), a w panelach i pozostałych granatowych blokach --bg wraca do granatu
   z wersji granatowej, więc ich wnętrza wyglądają tak jak tam. */
.krem {
  --bg: #060d19;
  --panel-shadow: 0 30px 60px -34px rgba(0, 0, 0, .85);
}
.krem :is(.nav, .hero, .ticker, .section, .calc-shell, .footer, .cookie, .dock,
          .lightbox, .blog-card, .article-cover) {
  --bg: #0a1628;
}
.krem body {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(212, 175, 55, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 175, 55, .055) 1px, transparent 1px);
}
/* menu od razu oddzielone od strony: granatowe tło i złota linia u dołu także na samej górze,
   a nie dopiero po przewinięciu (prośba klienta) */
.krem .nav {
  background: rgba(10, 22, 40, .96); border-bottom-color: rgba(212, 175, 55, .14);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
}

/* ---------- 2. Hero i pasek pod nim ---------- */
/* hero ma własne granatowe tło (zdjęcie jest półprzezroczyste) */
.krem .hero { background: #0a1628; }
/* pasek usług zamyka górną część strony pełnym granatem; wygaszenie na brzegach
   robią nakładki, bo maska na całym pasku odsłaniałaby ciemniejsze tło strony */
.krem .ticker { background: #0c1d36; border-block-color: rgba(212, 175, 55, .2); -webkit-mask-image: none; mask-image: none; }
.krem .ticker::before, .krem .ticker::after { content: ''; position: absolute; top: 0; bottom: 0; z-index: 1; width: 8%; pointer-events: none; }
.krem .ticker::before { left: 0; background: linear-gradient(90deg, #0c1d36, rgba(12, 29, 54, 0)); }
.krem .ticker::after { right: 0; background: linear-gradient(270deg, #0c1d36, rgba(12, 29, 54, 0)); }

/* Karta "Bez niespodzianek" w hero (wybór klienta, propozycja A "Złota rama"; poprzednia karta
   miała zdjęcie pod tekstem i cienką obwódkę, które klient uznał za słabe, i brakowało mu logo).
   Granatowy panel bez zdjęcia (kratka jak w panelach sekcji, złota poświata w lewym górnym rogu),
   złota obwódka cieniowana, najjaśniejsza w dwóch rogach, wokół karty lekka złota poświata.
   Na górze nagłówek z logo i nazwą, pod nim złota linia, która rysuje się na początku animacji.
   Animacja jak dotąd: kafelki przy punktach obracają się na stronę z ptaszkiem, ich kopie lecą
   w górę do znaku w nagłówku i układają go (trasę liczy main.js z położenia znaku), potem pojawia
   się nazwa. Przed animacją miejsce na znak zaznacza przerywana ramka. */
.krem .hcard {
  border: 1.5px solid transparent; border-radius: 24px;
  background:
    radial-gradient(420px 260px at 0% 0%, rgba(212, 175, 55, .15), transparent 70%) padding-box,
    linear-gradient(rgba(212, 175, 55, .045) 1px, transparent 1px) 0 0 / 58px 58px padding-box,
    linear-gradient(90deg, rgba(212, 175, 55, .045) 1px, transparent 1px) 0 0 / 58px 58px padding-box,
    linear-gradient(160deg, #11294d 0%, #0b1b33 55%, #08142a 100%) padding-box,
    linear-gradient(135deg, #f3d76a 0%, rgba(212, 175, 55, .75) 18%, rgba(212, 175, 55, .34) 42%,
                    rgba(212, 175, 55, .34) 60%, rgba(212, 175, 55, .75) 82%, #e8c75a 100%) border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 0 100px -28px rgba(212, 175, 55, .42), 0 50px 90px -50px rgba(0, 0, 0, .95);
}
.krem .hcard::before,
.krem .hcard::after { display: none; }
.krem .hcard-body {
  display: flex; flex-direction: column;
  padding: clamp(26px, 2.4vw, 34px) clamp(24px, 3.2vw, 46px) clamp(30px, 2.8vw, 40px);
}
.krem .hcard-foot { display: contents; }
.krem .hcard-logo {
  order: -1; flex: none; width: auto;
  display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; text-align: left;
}
.krem .hl-mark { grid-row: 1 / 3; width: 56px; height: 56px; padding: 10px; gap: 4px; margin: 0; }
.krem .hl-mark::before { border-radius: 13px; border-color: rgba(212, 175, 55, .42); }
.krem .hl-mark::after {
  content: ''; position: absolute; inset: 0; border-radius: 13px;
  border: 1px dashed rgba(212, 175, 55, .55);
  opacity: 0; transition: opacity .3s ease calc(var(--L) + 900ms);
}
.krem.js .hcard:not(.is-on) .hl-mark::after { opacity: 1; }
.krem .hl-mark span { border-radius: 3px; }
.krem .hl-mark svg { width: 11px; height: 11px; }
/* nazwa przy znaku widoczna także na telefonie (w style.css jest tam ukryta) */
.krem :is(.hl-name, .hl-sub) { display: block; }
.krem .hl-name { align-self: end; font-size: 19px; letter-spacing: .04em; }
.krem .hl-sub { align-self: start; font-size: 11px; letter-spacing: .1em; }
.krem .hcard-sep {
  width: 100%; height: 1px; opacity: 1; margin: 22px 0 24px;
  background: linear-gradient(90deg, rgba(212, 175, 55, .7), rgba(212, 175, 55, .05));
  transition-duration: 1.1s;
}
@media (max-width: 760px) {
  .krem .hl-mark { width: 50px; height: 50px; padding: 9px; }
  .krem .hl-name { font-size: 17px; }
  .krem .hcard-sep { margin: 18px 0 20px; }
}

/* ---------- 3. Szerokość strony i granatowe panele ----------
   Kontener (treść) ma 1090 px zamiast 1240 px. Panel to kontener plus 48 px
   z każdej strony (1186 px). Na tej samej szerokości stoją hero, kalkulator,
   przerywniki i stopka, więc ich krawędzie tworzą jedną linię z krawędziami paneli. */
.krem { --container: 1090px; --page: calc(var(--container) + 96px); }
.krem .section {
  width: min(var(--page), 100% - 48px);
  margin: clamp(18px, 2.4vw, 28px) auto clamp(28px, 3.6vw, 48px);
  padding-block: clamp(30px, 3.4vw, 48px);
  border: 1px solid rgba(212, 175, 55, .22); border-radius: 30px;
  /* kratka panelu przedłuża kratkę tła strony: linie obu warstw stykają się na krawędzi panelu
     (prośba klienta); przesunięcie --gx / --gy liczy js/main.js z położenia panelu na stronie */
  background:
    radial-gradient(900px 420px at 88% 0%, rgba(212, 175, 55, .09), transparent 65%),
    linear-gradient(rgba(212, 175, 55, .045) 1px, transparent 1px) var(--gx, 0px) var(--gy, 0px) / 58px 58px,
    linear-gradient(90deg, rgba(212, 175, 55, .045) 1px, transparent 1px) var(--gx, 0px) var(--gy, 0px) / 58px 58px,
    linear-gradient(180deg, #0c1d36, #0a1628);
  box-shadow: var(--panel-shadow);
}
.krem .calc-shell { box-shadow: var(--panel-shadow); }
/* kratka w kalkulatorze też przedłuża kratkę tła strony (przesunięcie liczy js/main.js) */
.krem #klb .k-grid-bg { background-position: var(--gx, 0px) var(--gy, 0px) !important; }
/* sekcja kalkulatora bez własnych odstępów u góry i u dołu: przerywniki nad nią i pod nią stoją
   46 px od panelu jak przy pozostałych panelach (prośba klienta; pod kalkulatorem było 99 px) */
.krem .calc-section { padding-block: 0; margin-block: clamp(18px, 2.4vw, 28px) clamp(28px, 3.6vw, 48px); }
/* znacznik "V" na kresce ołówka na środku, jak środki pozostałych przerywników (prośba klienta) */
.krem .sep-pencil::after { left: calc(50% - 4px); }
/* pierwszy panel nie przykleja się do paska usług */
.krem .section-why { margin-top: clamp(28px, 3.6vw, 48px); }
/* linki z menu (i przyciski prowadzące do sekcji) zatrzymują panel z odstępem pod menu, jak link
   "Kontakt": nad panelem widać tło strony, a panel nie przykleja się do menu (prośba klienta) */
.krem :is(.section, .calc-section) { scroll-margin-top: clamp(16px, 2.8vw, 40px); }
@media (min-width: 761px) {
  .krem :is(.hero, .footer) .container,
  .krem .calc-section .container-wide,
  .krem :is(.lvl, .sep) { width: min(var(--page), 100% - 48px); }
}
/* stopka mieści się w jednym pasku dzięki mniejszym odstępom między grupami */
.krem .footer-bar { column-gap: 10px; }
/* stopka w kolorze paneli (granat z kratką), a nie ciemnego tła strony (prośba klienta) */
.krem .footer {
  border-top-color: rgba(212, 175, 55, .22);
  background:
    linear-gradient(rgba(212, 175, 55, .045) 1px, transparent 1px) var(--gx, 0px) var(--gy, 0px) / 58px 58px,
    linear-gradient(90deg, rgba(212, 175, 55, .045) 1px, transparent 1px) var(--gx, 0px) var(--gy, 0px) / 58px 58px,
    linear-gradient(180deg, #0c1d36, #0a1628);
}
/* nagłówek hero o tyle mniejszy, żeby "na których można polegać" zostało w jednej linii */
.krem .hero h1 { font-size: clamp(34px, 3.9vw, 49px); }

/* Układ sekcji przy kontenerze 1090 px (pomiary: pole opisu kafelka oferty min. 292 px,
   opis pierwszego etapu min. 472 px).
   - Dlaczego: nagłówek 33 px, jak pozostałe, żeby nie łamał się na 3 linie.
   - Oferta, Jak pracujemy i Nasza ekipa: lewa kolumna 310 px i nagłówki 29 px, więc treść
     po prawej zaczyna się w tych trzech panelach w tym samym miejscu.
   - Nasza ekipa: nagłówek obok kart, jak w wersji granatowej (prośba klienta; karty mają tu
     ok. 241 px zamiast 287 px). Poniżej 1200 px nagłówek staje nad kartami (style.css). */
.krem .about-copy h2 { font-size: clamp(26px, 2.5vw, 33px); }
@media (min-width: 1200px) {
  .krem .svc { grid-template-columns: 310px minmax(0, 1fr); }
  .krem .svc-side .section-head p { text-align-last: auto; }
  .krem .proc { grid-template-columns: 310px minmax(0, 1fr); }
  .krem .crew { grid-template-columns: 310px minmax(0, 1fr); gap: 32px; }
  .krem .team { gap: 12px; }
  .krem :is(.svc-side, .proc, .crew) .section-head h2 { font-size: clamp(26px, 2.2vw, 29px); }
  /* akapity przy etapach i przy ekipie w kolumnie 310 px: wyrównane do lewej, bo przy
     wyjustowaniu niektóre linie miały bardzo duże odstępy między słowami */
  .krem :is(.proc, .crew) .section-head p { text-align: left; }
}

/* Jak pracujemy: między tytułem etapu a opisem złota strzałka, a etapy oddzielają poziome linie
   (od tytułu do prawej krawędzi, oś z numerami zostaje ciągła), żeby było jasne, który opis
   należy do którego etapu. Kolumny: numer | odstęp | tytuł | strzałka | opis (opis ma 476 px,
   więc każdy mieści się w dwóch liniach). */
.krem .steps { gap: 22px; }
.krem .step + .step::before { content: ''; position: absolute; left: 60px; right: 0; top: -11px; height: 1px; background: rgba(212, 175, 55, .24); }
@media (min-width: 761px) {
  .krem .step { grid-template-columns: 44px 16px 180px 32px minmax(0, 1fr); column-gap: 0; }
  .krem .step > * { grid-row: 1; }
  .krem .step-num { grid-column: 1; }
  .krem .step h3 { grid-column: 3; }
  .krem .step p { grid-column: 5; }
  .krem .step::after {
    content: ''; grid-column: 4; grid-row: 1; justify-self: center; width: 18px; height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none' stroke='%23d4af37' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h17M13 1.5L18 6l-5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}
@media (max-width: 760px) {
  .krem .steps { gap: 0; }
  .krem .step + .step::before { left: 60px; top: -10px; }
}
/* kalkulator (wygląd "Propozycja") w węższym panelu mieści 3 kafelki opcji w rzędzie:
   wiersz z 4 opcjami układa się 2 + 2 zamiast 3 + 1, żeby nie zostawał jeden kafelek */
@media (min-width: 761px) {
  .krem .klb-v2 #klb .kw-choices:has(> .kw-opt:nth-child(4):last-child) { grid-template-columns: repeat(2, 152px) !important; }
}
/* Poniżej 1200 px nagłówek staje nad treścią. W ofercie zakładki układają się wtedy
   w wierszach nad kartą. */
@media (max-width: 1199px) {
  .krem .proc { grid-template-columns: 1fr; gap: 24px; }
}
@media (min-width: 1101px) and (max-width: 1199px) {
  .krem .svc { grid-template-columns: 1fr; gap: 24px; }
  .krem .svc-side { display: block; }
  .krem .svc-side .section-head p { text-align: left; }
  .krem .svc-nav { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .krem .svc-nav li { flex: 1 1 30%; }
  .krem .svc-nav a { padding: 12px 16px; }
  .krem .svc-nav a:hover { transform: none; }
}
/* kafelki usług w ofercie: minimalnie większe odstępy w pionie (prośba klienta), czyli wyższy kafelek,
   odstęp pod tytułem i interlinia opisu; szerokość pola na tekst się nie zmienia, więc tytuł zostaje
   w 1 linii, a opis w 2 liniach */
.krem .pwt-li-grid .pwt-li { padding-block: 8px 9px; }
.krem .pwt-li-grid .pwt-li-body strong { margin-bottom: 3px; }
.krem .pwt-li-grid .pwt-li-desc { line-height: 1.5; }
@media (min-width: 761px) {
  .krem .pwt-li-grid .pwt-li-desc { min-height: 3em; }
}

/* ---------- 4. FAQ i kontakt ----------
   Lista pytań była bardzo szeroka (ok. 600 px przy pytaniach do 350 px), a pytania
   rozciągały się na całą wysokość karty kontaktu. Teraz obie kolumny są równe,
   pod nagłówkiem jest krótki akapit, a pole mapy w karcie jest niższe, więc cały
   blok jest niższy i pytania stoją gęściej. */
@media (min-width: 1101px) {
  .krem .faq-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
}
.krem .faq-col .section-head p { margin-top: 2px; }
.krem .contact-map { min-height: 112px; }

/* ---------- 5. Blog ----------
   Lista (blog/index.html): nagłówek strony jest panelem w układzie sekcji "Dlaczego Pewne Wnętrze"
   ze strony głównej: tekst po lewej, kafelki z liczbami po prawej, szerokość paneli i ciemne tło
   strony wokół (prośba klienta; wcześniej był to granatowy pas na całą szerokość z dużym napisem
   "Blog"). Złota część nagłówka zawsze zaczyna nową linię. Pod nim poziomica, panel z filtrami
   i kartami (karty jak w panelu bloga na stronie głównej), a na dole FAQ z kontaktem.
   Artykuł (blog/<adres>.html, prośba klienta "każdy artykuł osobny html"): artykuł w panelu;
   na górze nagłówek .post-head (ścieżka, metryczka, tytuł i wstęp po lewej, zdjęcie po prawej),
   pod nim poziomica i panel z trzema powiązanymi artykułami, na dole FAQ z kontaktem, jak
   na stronach artykułów SpedLiDAR. Menu, FAQ, stopkę i powiązane artykuły wstawia _tools/blog.mjs. */
.krem :is(.blog-intro, .post) { margin-top: calc(var(--nav-h) + clamp(28px, 3.6vw, 48px)); }
.krem .blog-intro h1 { font-size: clamp(26px, 2.5vw, 33px); margin-bottom: 16px; }
.krem .blog-intro h1 em { display: block; }
.krem .blog-list .blog-filters { margin-top: 0; }
/* lista artykułów: 4 karty obok siebie (prośba klienta) od 1200 px, czyli tam, gdzie kontener ma pełne
   1090 px (karta ok. 260 px); węziej 3 kolumny, poniżej 1101 px 2, na telefonie 1. W węższej karcie
   etykieta i czas czytania mieszczą się w jednym wierszu także przy "Podłogi i ściany" dzięki nieco
   mniejszym odstępom w tym wierszu. */
@media (min-width: 1200px) {
  .krem .blog-list .blog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .krem .blog-list .blog-card-body { padding-inline: 16px; }
  .krem .blog-list .blog-card-meta { gap: 8px; }
  .krem .blog-list .blog-tag { padding-inline: 9px; letter-spacing: .07em; }
}
/* artykuł na całą szerokość kontenera, jak treść pozostałych paneli; litery w skali strony (tytuł
   jak nagłówki paneli, tekst 15 px); zdjęcie mniejsze, obok tytułu i wstępu (prośba klienta) */
.krem .post .article { max-width: none; padding-top: 0; }
.krem .post-head { display: grid; grid-template-columns: minmax(0, 1fr) min(400px, 38%); gap: clamp(28px, 4vw, 56px); align-items: start; margin-bottom: clamp(24px, 2.6vw, 36px); }
.krem .post-head .article-cover { margin: 0; aspect-ratio: 4 / 3; border-radius: 20px; }
.krem .post .article h1 { font-size: clamp(26px, 2.5vw, 33px); margin-bottom: 14px; }
.krem .post .article .article-lede { font-size: 16px; line-height: 1.7; margin: 0; }
.krem .post .article :is(p, li) { font-size: 15px; line-height: 1.7; }
.krem .post .article h2 { font-size: clamp(21px, 1.9vw, 24px); letter-spacing: -.02em; margin: 44px 0 14px; }
.krem .post .article h3 { font-size: 17px; letter-spacing: -.01em; margin: 26px 0 8px; }
.krem .post .price-table { font-size: 14px; }
/* ramki w treści artykułu, jak w artykułach SpedLiDAR: "W skrócie" pod nagłówkiem i "Od czego
   zacząć" na końcu; granatowa karta jak kafelki z liczbami, złoty podpis */
.krem .post-box { padding: 22px 26px; border-radius: 18px; border: 1px solid var(--line-soft); background: linear-gradient(160deg, rgba(17, 42, 77, .9), rgba(13, 34, 64, .5)); }
.krem .post .post-box-tag { margin: 0 0 12px; font-size: 11.5px; font-weight: 800; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.krem .post-box > p:last-child { margin-bottom: 0; }
.krem .post-skrot ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 36px; }
.krem .post-skrot li { position: relative; margin: 0; padding-left: 20px; }
.krem .post-skrot li::before { content: ''; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--gold); }
.krem .post-start { margin-top: 44px; border-color: rgba(212, 175, 55, .35); }
.krem .post-start .article-actions { margin: 18px 0 0; }
.krem .post .blog-back { margin-top: 20px; }
/* słowa z łącznikiem (karton-gips, walk-in, e-mail) nie łamią się na łączniku */
.krem :is(.post, .blog-card) .nw { white-space: nowrap; }
@media (max-width: 760px) {
  .krem .post-skrot ul { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .krem .post-head { grid-template-columns: 1fr; }
  .krem .post-head .article-cover { aspect-ratio: 16 / 9; }
}
.krem .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.krem .crumbs a { color: var(--gold); text-decoration: none; }
.krem .crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.krem .blog-more .blog-grid { margin-top: 0; }

/* ---------- 6. Telefon ---------- */
@media (max-width: 760px) {
  .krem .section { width: calc(100% - 16px); border-radius: 22px; }
}

/* ---------- 7. Przyciski "Miarka" ----------
   Wybór klienta spośród kilku propozycji: przycisk jak na jego wzorze (prostokątny, złoty,
   z ciemną linią 3 px od krawędzi, napis wersalikami), "lekko budowlany": wzdłuż dolnego odcinka
   linii podziałka jak na taśmie mierniczej (kreska co 4 px, średnia co 20 px, długa co 40 px),
   która po najechaniu przesuwa się o jedną długą działkę, jakby ktoś wyciągał miarkę.
   Odstępy między literami są mniejsze niż na wzorze, żeby "Kalkulator kosztów remontu" mieścił się
   w jednej linii w połowie kolumny hero (oba przyciski w hero mają równą szerokość).
   Ten sam wygląd mają "Kontakt" w prawym dolnym rogu (.dock-toggle), "Wyślij zgłoszenie"
   i "Wyślij bez wyceny" w kalkulatorze oraz przyciski komunikatu po wysłaniu zgłoszenia.
   Obrysowane przyciski (.btn-ghost, "Wyślij bez wyceny", "Wybierz ponownie") mają złotą linię
   i podziałkę. Baner cookies zostaje bez zmian (przyciski zwykłą czcionką, zatwierdzone przez
   klienta). Przyciski kalkulatora mają style z !important (style #klb), dlatego tu też. */
.krem .btn,
.krem .dock-toggle,
.krem #klb-toast .kt-btn {
  --bx: rgba(10, 22, 40, .55);                  /* kolor linii i podziałki w przycisku */
  position: relative; isolation: isolate;
  border-radius: 3px; border: 1px solid #e3c564;
  font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.krem .btn { padding: 16px 18px; gap: 10px; box-shadow: 0 12px 26px -16px rgba(0, 0, 0, .8); }
.krem .btn:hover { border-color: var(--gold-3); box-shadow: 0 16px 30px -16px rgba(212, 175, 55, .55); }
.krem :is(.dock-toggle:hover, .dock.is-open .dock-toggle) { border-color: var(--gold-3); }
.krem .btn svg { width: 15px; height: 15px; }
.krem .klb-v2 #klb :is(.ksubmit, .ksend-bez) {
  --bx: rgba(10, 22, 40, .55);
  position: relative; isolation: isolate;
  border-radius: 3px !important; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: .06em !important;
}
.krem .klb-v2 #klb .ksubmit { border: 1px solid #e3c564 !important; }
/* obrysowane: złota linia i podziałka */
.krem .btn-ghost,
.krem #klb-toast .kt-btn:not(.kt-primary),
.krem .klb-v2 #klb .ksend-bez { --bx: rgba(212, 175, 55, .42); }
.krem .btn-ghost { border-color: rgba(212, 175, 55, .55); box-shadow: none; }
.krem .btn-ghost:hover { border-color: var(--gold); box-shadow: none; }
.krem #klb-toast .kt-btn:not(.kt-primary) { border-color: rgba(212, 175, 55, .55); }
.krem #klb-toast .kt-btn.kt-primary { color: #0a1628; }
/* ciemna (w obrysowanych złota) linia 3 px od krawędzi */
.krem .btn::before,
.krem .dock-toggle::before,
.krem #klb-toast .kt-btn::before,
.krem .klb-v2 #klb :is(.ksubmit, .ksend-bez)::before {
  content: ''; position: absolute; inset: 3px; z-index: -1; pointer-events: none;
  border: 1px solid var(--bx); border-radius: 1px;
}
/* podziałka miarki wzdłuż dolnego odcinka linii */
.krem .btn::after,
.krem .dock-toggle::after,
.krem #klb-toast .kt-btn::after,
.krem .klb-v2 #klb :is(.ksubmit, .ksend-bez)::after {
  content: ''; position: absolute; left: 4px; right: 4px; bottom: 4px; height: 5px; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--bx) 1px, transparent 1px) 0 100% / 4px 2px repeat-x,
    linear-gradient(90deg, var(--bx) 1px, transparent 1px) 0 100% / 20px 3px repeat-x,
    linear-gradient(90deg, var(--bx) 1px, transparent 1px) 0 100% / 40px 5px repeat-x;
  transition: background-position .7s var(--ease);
}
.krem .btn:hover::after,
.krem .dock-toggle:hover::after,
.krem .dock.is-open .dock-toggle::after,
.krem #klb-toast .kt-btn:hover::after,
.krem .klb-v2 #klb :is(.ksubmit, .ksend-bez):hover::after { background-position: 40px 100%, 40px 100%, 40px 100%; }
/* "Bezpłatna wycena" w menu większa niż dotąd (prośba klienta) */
.krem .nav-actions .btn-sm { padding: 15px 22px; font-size: 12.5px; }
.krem .contact-copy .btn { padding: 13px 16px; font-size: 11.5px; }
.krem .nav-links .nav-mobile-cta .btn { border-radius: 3px; font-size: 13px; }
.krem #klb-toast .kt-btn { padding: 13px 10px; }