/* Soft-Technik – nowa warstwa wyglądu (krok 6, 03.11.2026).
   Krój: Inter (jeden dla nagłówków i tekstu, od 6c), lokalnie. Paleta: grafit + czerwień akcentu.
   Cofnięcie: usuń mu-plugin st-wyglad.php (i folder st-wyglad). */

:root{
	--st-ink:#121315;
	--st-tekst:#2B2E33;
	--st-tekst-pom:#5A5E66;
	--st-akcent:#DE0025;
	--st-akcent-ciemny:#B0001E;
	--st-grafit:#16171A;
	--st-grafit-2:#202226;
	--st-tlo:#FFFFFF;
	--st-tlo-alt:#F4F5F7;
	--st-linia:#E3E5E9;
	--st-r:14px;
	--st-r-s:10px;
	--st-cien:0 1px 2px rgba(18,19,21,.06),0 8px 24px -8px rgba(18,19,21,.14);
	--st-cien-hover:0 2px 4px rgba(18,19,21,.08),0 18px 40px -12px rgba(18,19,21,.24);
	--st-font-tekst:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
	--st-font-nagl:var(--st-font-tekst);
	--theme_accent:#DE0025;
	--theme_accent_semi:rgba(222,0,37,.9);
	--theme_accent_hover:#121315;
	--theme_accent_alt:#5A5E66;
	--theme_heading_color:#121315;
	--tf_fixed_header_bg:rgba(255,255,255,.94);
	/* motyw właściciela (zaproszenie na szkolenie): białe tło, różowa ramka kart, czerwony panel z gradientem */
	--st-ramka:#F3CAD3;
	--st-grad:linear-gradient(135deg,#A3001C 0%,#C40022 45%,#DE0025 100%);
}

/* ---------- Typografia ---------- */
html body{
	font-family:var(--st-font-tekst)!important;
	color:var(--st-tekst);
	font-size:16.5px;
	line-height:1.65;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	text-rendering:optimizeLegibility;
}
body p,body li,body td,body input,body textarea,body select,body button,
body .module-text,body .module-feature-content,body .tb-progress-bar-label{font-family:var(--st-font-tekst)!important}
body h1,body h2,body h3,body h4,body h5,body h6,
body .page-title,body .post-title,body .module-title,body .main-head,body .sub-head,
body .module-feature-title,body .counter-text,body .footer-nav,
body .module-testimonial-slider .testimonial-title,
body .module-image .image-title{
	font-family:var(--st-font-nagl)!important;
	letter-spacing:-.015em;
	font-feature-settings:"ss01","cv11";
}
body h1,body h2{font-weight:700!important;line-height:1.15!important;letter-spacing:-.025em!important}
/* Długie słowa w wąskich kolumnach: dziel zamiast wychodzić poza kolumnę */
body h1,body h2,body h3{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
body h3,body h4{font-weight:700!important;line-height:1.3!important}
body h5,body h6{font-weight:600!important;line-height:1.5!important;letter-spacing:0}
/* Lead w sekcjach (Builder używa H5 jako akapitów) – czytelny tekst, nie nagłówek */
body .module-text h5{font-family:var(--st-font-tekst)!important;font-weight:400!important;font-size:1.02em!important;line-height:1.7!important}
body strong,body b{font-weight:650}

/* Duże nagłówki sekcji: akcent nad tytułem. Element liniowy (2 spacje em + złamanie wiersza),
   więc sam podąża za wyrównaniem tytułu (lewo/środek) ustawionym w Builderze. */
body .module_row .module-text h2:first-child::before{
	content:"\2003\2003\A";white-space:pre;font-size:22px;line-height:1;
	background:linear-gradient(var(--st-akcent),var(--st-akcent)) no-repeat 0 100%/100% 4px;
}

/* Linki */
body a{color:var(--st-akcent-ciemny);text-underline-offset:.18em;transition:color .2s ease}
body a:hover{color:var(--st-ink)}
body ::selection{background:rgba(222,0,37,.16)}

/* ---------- Nagłówek (biały, logo z grafitowym napisem – podmiana w st-wyglad.php) ---------- */
#headerwrap{
	background:#fff!important;
	background-image:none!important;
	box-shadow:0 1px 0 var(--st-linia);
}
.fixed-header #headerwrap,#headerwrap.fixed-header{
	background:var(--tf_fixed_header_bg)!important;
	-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);
	box-shadow:0 10px 28px -16px rgba(18,19,21,.28);
}
/* 04.11: ozdobny czerwony pasek 140 px pod nagłówkiem usunięty (właściciel: niepotrzebny) */
#headerwrap .header-icons,#headerwrap #menu-icon{color:var(--st-ink)!important}
#main-nav>li>a{
	font-family:var(--st-font-nagl)!important;
	font-weight:600!important;
	font-size:14.5px!important;
	letter-spacing:.01em!important;
	text-transform:none!important;
	color:rgba(255,255,255,.86)!important;
	position:relative;
}
/* menu w białym pasku (komputer); w wysuwanym panelu telefonu zostaje jasny tekst na grafice */
body:not(.mobile_menu_active) #main-nav>li>a{color:var(--st-tekst)!important}
body:not(.mobile_menu_active) #main-nav>li:not(.highlight-link)>a:hover{color:var(--st-ink)!important}
#main-nav>li>a::after{
	content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;
	background:var(--st-akcent);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
#main-nav>li:not(.highlight-link):not(.lang-item)>a:hover::after,
#main-nav>li.current-menu-item:not(.highlight-link):not(.menu-item-home)>a::after{transform:scaleX(1)}
#main-nav>li>a:hover{color:#fff!important}
#main-nav>li.highlight-link>a{
	background:var(--st-akcent)!important;color:#fff!important;
	border-radius:0!important;padding-left:20px!important;padding-right:20px!important;
	box-shadow:0 6px 18px -6px rgba(222,0,37,.65);
	transition:background .2s ease,transform .2s ease;
}
#main-nav>li.highlight-link>a:hover{background:var(--st-ink)!important;color:#fff!important;transform:translateY(-1px)}
#main-nav>li.highlight-link>a::after{display:none}
#main-nav .sub-menu{border-radius:var(--st-r-s);overflow:hidden;box-shadow:var(--st-cien-hover);border:0}
#main-nav .sub-menu a{font-family:var(--st-font-tekst)!important;text-transform:none!important}

/* ---------- Przyciski ---------- */
body .builder_button,
body .module-buttons .module-buttons-item a,
body input[type="submit"],body button[type="submit"],body .more-link,body .button{
	font-family:var(--st-font-nagl)!important;
	font-weight:700!important;
	letter-spacing:.01em!important;
	text-transform:none!important;
	border-radius:0!important;
	padding:.8em 1.6em!important;
	border:0!important;
	background:var(--st-akcent)!important;
	color:#fff!important;
	box-shadow:0 8px 20px -8px rgba(222,0,37,.6);
	transition:background .2s ease,transform .2s ease,box-shadow .2s ease!important;
}
body .builder_button:hover,
body .module-buttons .module-buttons-item a:hover,
body input[type="submit"]:hover,body button[type="submit"]:hover,body .more-link:hover,body .button:hover{
	background:var(--st-ink)!important;color:#fff!important;transform:translateY(-2px);
	box-shadow:0 12px 24px -10px rgba(18,19,21,.55);
}
body .builder_button::after{content:" \2192";display:inline-block;margin-left:.35em;transition:transform .2s ease}
body .builder_button:hover::after{transform:translateX(3px)}

/* ---------- Karty funkcji (ikony) ---------- */
body .module-feature{
	background:#fff!important;
	border:1px solid var(--st-ramka)!important;
	border-radius:12px!important;
	padding:22px 20px!important;
	box-shadow:0 1px 2px rgba(18,19,21,.04),0 10px 26px -18px rgba(222,0,37,.35);
	transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
	height:calc(100% - 20px);
	margin-bottom:20px!important;
}
body .module-feature:hover{transform:translateY(-4px);box-shadow:var(--st-cien-hover);border-color:var(--st-akcent)!important}
/* Ikony w kartach jak w motywie: czerwone koło z gradientem, biała ikona (tylko moduły z ikoną, nie z ilustracją) */
body .module-feature .chart-html5-circle:has(>.module-feature-icon){background:var(--st-grad);border-radius:50%;box-shadow:0 6px 14px -6px rgba(222,0,37,.55)}
body .module-feature .module-feature-chart-html5:has(.module-feature-icon) svg{display:none}
body .module-feature .chart-html5-circle>.module-feature-icon{color:#fff!important}
/* Ilustracje (z /s-t/) w kartach materiałów: bez koła, bez kadrowania */
body .module-feature .chart-html5-circle>img{object-fit:contain;border-radius:0!important;filter:none!important}
body .module-feature .module-feature-title{font-size:1.02em!important;margin-bottom:.4em!important;color:var(--st-ink)!important}
body .module-feature .module-feature-content,body .module-feature .module-feature-content p{font-size:.92em!important;line-height:1.6!important;color:var(--st-tekst-pom)!important}

/* ---------- Obrazy i zrzuty programu ---------- */
body .module-image .image-wrap img,
body .module-pro-image img{border-radius:var(--st-r-s)}
body .module-image.image-top .image-wrap img,
body .module-image.image-left .image-wrap img{box-shadow:var(--st-cien);transition:transform .35s ease,box-shadow .35s ease}
body .module-image.image-top:hover .image-wrap img,
body .module-image.image-left:hover .image-wrap img{transform:translateY(-3px);box-shadow:var(--st-cien-hover)}
/* logotypy w karuzeli i ikony – bez cieni i zaokrągleń */
body .module-slider .module-image img,body .module-slider img,
body .module-feature img,body .module-icon img,#site-logo img{border-radius:0!important;box-shadow:none!important;transform:none!important}
/* Logotypy klientów: szarość, kolor po najechaniu */
/* tylko karuzele logotypów (kilka elementów naraz); slider z jednym zdjęciem (np. rzut imos iX, tb_vxcc18) bez zmian */
body .module-slider:has(.themify_builder_slider:not([data-visible="1"])) img{filter:grayscale(1);opacity:.7;transition:filter .3s ease,opacity .3s ease}
body .module-slider:has(.themify_builder_slider:not([data-visible="1"])) img:hover{filter:none;opacity:1}

/* ---------- Liczniki i paski postępu ---------- */
/* tb_counter_fill = tor, tb_counter_stroke = postęp */
body .module-counter .tb_counter_fill{stroke:var(--st-linia)!important}
body .module-counter .tb_counter_stroke{stroke:var(--st-akcent)!important}
body .module-counter .module-counter-background{fill:#fff!important}
body .module-counter .counter-text,body .module-counter .number{font-family:var(--st-font-nagl)!important;font-weight:700!important}
body .tb-progress-bar-bg{border-radius:999px;background:linear-gradient(90deg,#B0001E,#DE0025 60%,#FF3B4E)!important}
body .tb-progress-bar-label{font-weight:600!important;text-transform:none!important}

/* ---------- Separator i sekcje ---------- */
body .module-divider{border-color:var(--st-linia)!important;opacity:1}

/* ---------- Formularze ---------- */
body .module-contact input[type="text"],
body .module-contact input[type="email"],
body .module-contact input[type="tel"],
body .module-contact textarea,
body .module-login input[type="text"],
body .module-login input[type="password"]{
	background:#fff!important;border:1px solid #CDD0D6!important;border-radius:var(--st-r-s)!important;
	padding:.75em .9em!important;color:var(--st-ink)!important;box-shadow:none!important;
	transition:border-color .2s ease,box-shadow .2s ease;
}
body .module-contact input:focus,body .module-contact textarea:focus,
body .module-login input:focus{border-color:var(--st-akcent)!important;box-shadow:0 0 0 4px rgba(222,0,37,.12)!important;outline:0}

/* ---------- Stopka ---------- */
#footerwrap{background:var(--st-grafit)!important;color:rgba(255,255,255,.72);position:relative}
/* pasek jak w stopce motywu: czerwony z lewej, czarny z prawej */
#footerwrap::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:linear-gradient(90deg,var(--st-akcent) 0 42%,#fff 42% calc(42% + 8px),#000 calc(42% + 8px))}
#footerwrap a{color:#fff}
#footerwrap a:hover{color:#FF6B78}
/* wysuwany panel menu tylko w trybie telefonu/tabletu (na komputerze #mobile-menu to pasek menu w białym nagłówku) */
html body.mobile_menu_active #mobile-menu.sidemenu{background:var(--st-grafit)!important}

/* ---------- Czerwony panel z gradientem (motyw): „Projektowanie i produkcja mebli” + wiersz liczników ---------- */
/* 6c: gradient poziomy – zależy tylko od szerokości, więc oba wiersze łączą się bez szwu; bez nakładek wiersza/kolumn */
body .module_row:is(.tb_ptvi25,.tb_yk0w370){background:linear-gradient(90deg,#A3001C 0%,#C40022 45%,#DE0025 100%)!important;color:#fff}
body .module_row:is(.tb_ptvi25,.tb_yk0w370) .builder_row_cover{display:none!important}
body .module_row:is(.tb_ptvi25,.tb_yk0w370) :is(.module_column,.module_subrow){background-color:transparent!important;background-image:none!important}
body .module_row:is(.tb_ptvi25,.tb_yk0w370) :is(h1,h2,h3,h4,h5,h6,p,strong,li,a,.counter-text,.number,.module-title){color:#fff!important}
body .module_row.tb_ptvi25 .module-text h2:first-child::before{background:linear-gradient(#fff,#fff) no-repeat 0 100%/100% 4px}
body .module_row.tb_ptvi25 .module-divider{border-color:#fff!important}
/* 6c: jednolite koła – pełne wypełnienie w jednym kolorze (półprzezroczyste dawało różne odcienie na gradiencie) */
body .module_row.tb_yk0w370 .module-counter .module-counter-background{fill:#B0001E!important}
/* tor ciemnoczerwony (pełny kolor – jednakowy na gradiencie), postęp biały – pokazuje wartość jak w RU */
body .module_row.tb_yk0w370 .module-counter .tb_counter_fill{stroke:#7A0014!important}
body .module_row:is(.tb_ptvi25,.tb_yk0w370){border-top:0!important;border-bottom:0!important;box-shadow:none!important}
body .module_row.tb_yk0w370 .module-counter .tb_counter_stroke{stroke:#fff!important}
body .module_row.tb_yk0w370 .module-counter .module-title{font-size:.8em!important;letter-spacing:.08em!important}

/* ---------- 6c: jeden krój także w etykietach formularzy i logowania (Themify ustawiał Montserrat → Arial) ---------- */
body label,body .module-login span,body .module-contact span,body .ui.builder_button,body .module-fancy-heading :is(.main-head,.sub-head){font-family:var(--st-font-tekst)!important}

/* ---------- 6c (propozycja): „Nowoczesny system do projektowania mebli” – karty jak „Materiały szkoleniowe” ---------- */
body .module_row.tb_08m0202 .module-image{background:#fff;border:1px solid var(--st-ramka);border-radius:12px;padding:22px 18px 18px;height:calc(100% - 24px);margin-bottom:24px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
body .module_row.tb_08m0202 .module-image:hover{transform:translateY(-4px);box-shadow:var(--st-cien-hover);border-color:var(--st-akcent)}
body .module_row.tb_08m0202 .module_column:has(>.module-image){display:flex;flex-direction:column}
body .module_row.tb_08m0202 .module_column>.module-image{flex:1 1 auto}
body .module_row.tb_08m0202 .module-image .image-wrap{height:150px;display:flex!important;align-items:center;justify-content:center}
body .module_row.tb_08m0202 .module-image .image-wrap img{max-height:150px;width:auto;object-fit:contain}
body .module_row.tb_08m0202 .module-image img{filter:grayscale(1);opacity:.85;transition:filter .3s ease,opacity .3s ease}
body .module_row.tb_08m0202 .module-image:hover img{filter:none;opacity:1}
body .module_row.tb_08m0202 .module-image .image-title{text-transform:none!important;font-size:1.05em!important;font-weight:700!important;color:var(--st-ink)!important;letter-spacing:0!important;margin:.6em 0 .35em!important}
body .module_row.tb_08m0202 .module-image .image-caption{font-size:.92em!important;line-height:1.6!important;color:var(--st-tekst-pom)!important}
body .module_row.tb_08m0202 .module-text.tb_ljlx207 :is(p,b,strong){font-weight:400!important;font-size:1.06em!important;line-height:1.7!important;color:var(--st-tekst)!important}
body .module_row.tb_08m0202 .module-text.tb_ljlx207{max-width:960px;margin-left:auto;margin-right:auto}

/* ---------- 6c (propozycja): „Innowacyjny system w branży meblarskiej” – spokojniejsza skala nagłówków ---------- */
body .module_row.tb_siv0995 h2{font-size:clamp(26px,2.3vw,34px)!important}
body .module_row.tb_siv0995 .module-text.tb_slse527 :is(h3,b,strong){font-weight:400!important;font-size:21px!important;line-height:1.65!important;color:var(--st-tekst)!important}
body .module_row.tb_siv0995 .module-image img{border-radius:var(--st-r-s)}

/* ---------- Dostępność ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--st-akcent)!important;outline-offset:3px}
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{transition:none!important;animation-duration:.01ms!important}
}

/* ---------- Telefon ---------- */
@media (max-width:680px){
	html body{font-size:16px}
	body .module_row h1{font-size:clamp(26px,8vw,34px)!important}
	body .module_row h2{font-size:clamp(24px,7.2vw,30px)!important}
	body .module_row h3{font-size:clamp(18px,5.2vw,22px)!important}
	body .module-feature{padding:18px 16px!important}
	body .module_row .module-text h2:first-child::before{font-size:18px}
}

/* Karty funkcji: bez justowania (dziury między słowami) */
body .module-feature .module-feature-content,body .module-feature .module-feature-content p{text-align:left!important;-webkit-hyphens:auto;hyphens:auto}

/* ---------- 6c: przyciski prostokątne (prośba właściciela – lepiej pasują do logo) ---------- */
/* „Kontakt” w nagłówku: biały tekst także w nagłówku przyklejonym; stała wysokość (bez rozdętego koła) */
body:not(.mobile_menu_active) #main-nav>li.highlight-link>a{color:#fff!important;line-height:1.2!important;padding-top:11px!important;padding-bottom:11px!important;align-self:center}
body .module-buttons .module-buttons-item a,body .ui.builder_button,body .module-contact button,body .module-login input[type="submit"]{border-radius:0!important}

/* ---------- 6c: „Nasi Klienci” – logotypy wyśrodkowane, ta sama wysokość ---------- */
body .module-slider:has(.themify_builder_slider:not([data-visible="1"])) :is(.tf_swiper-slide,.slide-inner-wrap,.slide-image){display:flex!important;align-items:center;justify-content:center}
body .module-slider:has(.themify_builder_slider:not([data-visible="1"])) .tf_swiper-slide{height:auto!important;min-height:150px}
body .module-slider:has(.themify_builder_slider:not([data-visible="1"])) .slide-image img{width:200px!important;max-width:100%!important;height:100px!important;object-fit:contain;margin:0 auto}