/* -------------------------------------------------------------------
   Aktualne nabory (.sc-nab)

   Styl przeniesiony z Code Block w Oxygenie - liste sklada teraz
   shortcode [smartcare_calls], a wyglad zostaje ten sam.
   ------------------------------------------------------------------- */

.sc-nab{--sc-nab-ink:#16296b;--sc-nab-accent:#2451c6;--sc-nab-muted:#6b7a92;--sc-nab-line:#dbe4f4;--sc-nab-hi:#eaf0fd;
  width:100%;font-family:inherit;color:var(--sc-nab-ink)}
.sc-nab *,.sc-nab *::before,.sc-nab *::after{box-sizing:border-box}

/* wiersz z data aktualizacji */
.sc-nab__meta{display:flex;align-items:center;gap:12px;margin:0 0 clamp(20px,2.4vw,30px);
  color:var(--sc-nab-muted);font-size:clamp(14px,1.1vw,16px);line-height:1.4}
.sc-nab__meta::before{content:"";flex:0 0 auto;width:18px;height:18px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Ccircle cx='10' cy='10' r='8.3'/%3E%3Cpath d='M6.4 10.2 9 12.8l4.6-5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Ccircle cx='10' cy='10' r='8.3'/%3E%3Cpath d='M6.4 10.2 9 12.8l4.6-5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

.sc-nab .sc-nab__list{display:block;margin:0;padding:0;list-style:none}

/* --- rozwijany opis naboru --- */
/* przycisk ma wygladac dokladnie jak dawny link, wiec zdejmujemy z niego
   domyslny wyglad guzika przegladarki */
.sc-nab button.sc-nab__link{appearance:none;border:0;background:none;cursor:pointer;font-family:inherit;text-align:left}
.sc-nab .sc-nab__link.is-open::after{transform:rotate(90deg)}

.sc-nab .sc-nab__detail{grid-column:1/-1;margin-top:clamp(18px,2vw,26px);padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--sc-nab-line)}
.sc-nab .sc-nab__detail[hidden]{display:none}

.sc-nab .sc-nab__facts{display:grid;gap:12px 0;margin:0}
.sc-nab .sc-nab__fact{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:4px clamp(18px,2vw,30px);margin:0}
.sc-nab .sc-nab__fact-label{margin:0;color:var(--sc-nab-ink);font-size:clamp(13px,1.05vw,15px);font-weight:600;line-height:1.45}
.sc-nab .sc-nab__fact-value{margin:0;color:var(--sc-nab-muted);font-size:clamp(13px,1.05vw,15px);line-height:1.55}

.sc-nab .sc-nab__subtitle{margin:clamp(18px,2vw,26px) 0 10px;color:var(--sc-nab-ink);
  font-size:clamp(14px,1.1vw,16px);font-weight:600;line-height:1.4}
.sc-nab .sc-nab__projects{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.sc-nab .sc-nab__project{position:relative;display:block;margin:0;padding-left:19px;
  color:var(--sc-nab-muted);font-size:clamp(13px,1.05vw,15px);line-height:1.5}
.sc-nab .sc-nab__project::before{content:"";position:absolute;top:.62em;left:0;width:5px;height:5px;
  background:var(--sc-nab-accent);border-radius:50%}

.sc-nab .sc-nab__source{margin:clamp(18px,2vw,26px) 0 0}
.sc-nab .sc-nab__source-link{color:var(--sc-nab-accent);font-size:clamp(13px,1.05vw,15px);font-weight:600;
  text-decoration:underline;text-underline-offset:3px}

@media (max-width:720px){
  .sc-nab .sc-nab__fact{grid-template-columns:minmax(0,1fr)}
}

/* .sc-nab przed klasa: Oxygen ma :is(li, div._important){display:list-item} */
.sc-nab .sc-nab__item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:18px clamp(20px,3vw,48px);margin:0;padding:clamp(22px,2.6vw,32px) clamp(18px,2vw,28px);
  border-bottom:1px solid var(--sc-nab-line)}

/* wyrozniony nabor - podswietlenie i niebieska belka z lewej */
.sc-nab .sc-nab__item--featured{background:var(--sc-nab-hi);border-bottom:0;border-left:4px solid var(--sc-nab-accent);
  margin-bottom:clamp(14px,1.6vw,22px)}

.sc-nab__name{margin:0 0 16px;color:var(--sc-nab-ink);font-size:clamp(17px,1.6vw,22px);
  font-weight:400;letter-spacing:-.01em;line-height:1.3}

.sc-nab .sc-nab__tags{display:flex;flex-wrap:wrap;gap:10px 14px;margin:0;padding:0;list-style:none}
.sc-nab .sc-nab__tag{display:inline-flex;align-items:center;gap:7px;margin:0;min-height:38px;padding:8px 18px;
  background:#fff;border:1px solid var(--sc-nab-line);border-radius:999px;
  font-size:clamp(13px,1.05vw,15px);line-height:1.2}
.sc-nab .sc-nab__tag span{color:var(--sc-nab-muted)}
.sc-nab .sc-nab__tag strong{color:var(--sc-nab-ink);font-weight:600}

.sc-nab__link{display:inline-flex;align-items:center;gap:12px;color:var(--sc-nab-accent);
  font-size:clamp(13px,1.05vw,15px);font-weight:700;letter-spacing:.04em;line-height:1.2;
  text-decoration:none;text-transform:uppercase;white-space:nowrap;transition:color .18s ease}
.sc-nab__link::after{content:"";flex:0 0 auto;width:17px;height:11px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 5.5h14'/%3E%3Cpath d='M10.5 1.5 14.75 5.5 10.5 9.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 5.5h14'/%3E%3Cpath d='M10.5 1.5 14.75 5.5 10.5 9.5'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .22s cubic-bezier(.22,1,.36,1)}
.sc-nab__link:hover,.sc-nab__link:focus-visible{color:#16296b}
.sc-nab__link:hover::after,.sc-nab__link:focus-visible::after{transform:translateX(5px)}
.sc-nab__link:focus-visible{outline:3px solid rgba(36,81,198,.45);outline-offset:4px;border-radius:6px}

@media (max-width:700px){
  .sc-nab .sc-nab__item{grid-template-columns:1fr;padding-inline:clamp(14px,3vw,20px)}
  .sc-nab__link{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .sc-nab__link,.sc-nab__link::after{transition-duration:.01ms}
}

/* ===============================================================
   SmartCare - style witryny
   Jeden plik, trzy warstwy:
     1. TOKENY      - wartosci wspolne dla calej strony
     1b. BAZA       - typografia golych znacznikow i tresci z edytora
     2. PRYMITYWY   - powtarzalne elementy (eyebrow, siatka w tle)
     3. SEKCJE      - to, co unikalne dla danej sekcji
     4. UTILE       - klasy pomocnicze (na koncu pliku)

   Zasada: jesli zmieniasz rozmiar naglowka albo szerokosc kolumny,
   robisz to w TOKENACH, nie w sekcji. Inaczej wartosci znowu sie
   rozjada - tak jak przed scaleniem, gdzie ten sam naglowek sekcji
   mial dziesiec roznych rozmiarow.
   =============================================================== */

/* ---------------------------------------------------------------
   1. TOKENY
   --------------------------------------------------------------- */

:root {
	/* kolory */
	--sc-navy: #0c2874;
	--sc-ink: #26354a;
	--sc-muted: #55647e;
	--sc-accent: #2f6bff;
	--sc-accent-on-dark: #4d8cff;

	/* kontener i rytm sekcji */
	--sc-container: 1500px;
	--sc-container-narrow: 1180px;
	--sc-pad-x: clamp(24px, 4.5vw, 68px);
	--sc-pad-y: clamp(56px, 6vw, 92px);

	/* skala typograficzna
	   h1       - hero strony glownej
	   h1-page  - hero podstron ofertowych
	   h2       - naglowek kazdej sekcji
	   h3       - naglowek karty (np. CTA) */
	--sc-h1: clamp(38px, 5.4vw, 70px);
	--sc-h1-page: clamp(36px, 3.7vw, 56px);
	--sc-h2: clamp(30px, 3.4vw, 48px);
	--sc-h3: clamp(24px, 2.5vw, 34px);
	--sc-lead: clamp(16px, 1.3vw, 19px);
	--sc-lead-lg: clamp(16px, 1.3vw, 20px);

	/* naglowki wewnatrz tresci - wpisy bloga i strony z edytora.
	   Mniejsze od naglowkow sekcji, bo dziela tekst, a nie strone. */
	--sc-prose-h2: clamp(23px, 2.1vw, 30px);
	--sc-prose-h3: clamp(19px, 1.7vw, 23px);
	--sc-prose-h4: clamp(17px, 1.4vw, 19px);

	/* siatka techniczna w tle sekcji */
	--sc-grid-size: clamp(64px, 6.4vw, 96px);
}

/* ---------------------------------------------------------------
   1b. BAZA TYPOGRAFICZNA

   Dwa poziomy:
   - goly znacznik (h1-h6) dostaje skale i wage z tokenow - dotyczy
     kazdego naglowka postawionego w Oxygenie bez naszej klasy;
   - tresc z edytora (Post Content, .sc-prose) dostaje pelna
     typografie: kolory, odstepy, listy, cytaty.

   Selektory maja celowo niska specyficznosc - "html body h2" to
   (0,0,3), wiec kazda regula sekcji z klasa (0,2,0) wygrywa, a
   domyslne style Oxygena z universal.css (0,0,1) przegrywaja
   niezaleznie od kolejnosci ladowania plikow.
   Kolor tekstu ustawiamy na body, a nie na naglowkach - sekcje
   granatowe ustawiaja wlasny kolor i naglowki go dziedzicza, wiec
   nic nie zciemnieje na ciemnym tle.
   --------------------------------------------------------------- */

html body {
	color: var(--sc-ink);
}

html body :is(h1, h2, h3, h4, h5, h6) {
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.18;
	text-wrap: balance;
}

html body h1 {
	font-size: var(--sc-h1-page);
	letter-spacing: -0.022em;
	line-height: 1.12;
}

html body h2 {
	font-size: var(--sc-h2);
}

html body h3 {
	font-size: var(--sc-h3);
	font-weight: 500;
	line-height: 1.25;
}

html body h4 {
	font-size: clamp(19px, 1.7vw, 23px);
	font-weight: 600;
	letter-spacing: -0.012em;
	line-height: 1.3;
}

html body h5 {
	font-size: clamp(16px, 1.35vw, 19px);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.35;
}

/* h6 pelni role etykiety - wyglada jak eyebrow */
html body h6 {
	color: var(--sc-eyebrow-color, var(--sc-accent));
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* --- tresc z edytora ---------------------------------------------
   Post Content w Oxygenie opakowuje tresc w .oxy-stock-content-styles.
   .sc-prose to ta sama typografia do nalozenia recznie na dowolny
   element z tekstem. Reguly celuja w bezposrednie dzieci, zeby nie
   przestylowac blokow ACF osadzonych w tresci.
   ------------------------------------------------------------------ */

html body :is(.oxy-stock-content-styles, .sc-prose) {
	color: var(--sc-muted);
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.75;
}

html body :is(.oxy-stock-content-styles, .sc-prose) > * {
	margin-block: 0 clamp(18px, 2vw, 26px);
}

html body :is(.oxy-stock-content-styles, .sc-prose) > *:last-child {
	margin-bottom: 0;
}

html body :is(.oxy-stock-content-styles, .sc-prose) > :is(h1, h2, h3, h4, h5) {
	color: var(--sc-ink);
}

/* Naglowki w tresci maja skale wpisow bloga, nie sekcji - to ten sam
   rodzaj tekstu, wiec musza wygladac tak samo. Wartosci z tokenow
   --sc-prose-*, ktorych uzywa tez .sc-single__content. */
html body :is(.oxy-stock-content-styles, .sc-prose) > :is(h2, h3, h4) {
	font-weight: 600;
	letter-spacing: -0.015em;
}

html body :is(.oxy-stock-content-styles, .sc-prose) > h2 {
	font-size: var(--sc-prose-h2);
	line-height: 1.25;
}

html body :is(.oxy-stock-content-styles, .sc-prose) > h3 {
	font-size: var(--sc-prose-h3);
	line-height: 1.3;
}

html body :is(.oxy-stock-content-styles, .sc-prose) > h4 {
	font-size: var(--sc-prose-h4);
	line-height: 1.35;
}

html body :is(.oxy-stock-content-styles, .sc-prose) > h1 {
	margin-bottom: clamp(22px, 2.6vw, 34px);
}

html body :is(.oxy-stock-content-styles, .sc-prose) > h2 {
	margin-top: clamp(40px, 4.4vw, 64px);
	margin-bottom: clamp(14px, 1.6vw, 20px);
}

html body :is(.oxy-stock-content-styles, .sc-prose) > :is(h3, h4, h5) {
	margin-top: clamp(30px, 3.2vw, 42px);
	margin-bottom: 12px;
}

/* naglowek na samej gorze nie potrzebuje odstepu od niczego */
html body :is(.oxy-stock-content-styles, .sc-prose) > :is(h1, h2, h3, h4, h5):first-child {
	margin-top: 0;
}

html body :is(.oxy-stock-content-styles, .sc-prose) > p {
	color: var(--sc-muted);
}

html body :is(.oxy-stock-content-styles, .sc-prose) :is(strong, b) {
	color: var(--sc-ink);
	font-weight: 600;
}

html body :is(.oxy-stock-content-styles, .sc-prose) > :is(p, ul, ol, blockquote, figure, table) a {
	color: var(--sc-accent);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 180ms ease;
}

html body :is(.oxy-stock-content-styles, .sc-prose) > :is(p, ul, ol, blockquote, figure, table) a:hover {
	color: var(--sc-navy);
}

/* listy z tym samym punktorem co wpisy bloga */
html body :is(.oxy-stock-content-styles, .sc-prose) > :is(ul, ol) {
	padding-left: 0;
	list-style: none;
}

html body :is(.oxy-stock-content-styles, .sc-prose) > :is(ul, ol) > li {
	position: relative;
	margin: 0 0 12px;
	padding-left: 30px;
}

html body :is(.oxy-stock-content-styles, .sc-prose) > :is(ul, ol) > li:last-child {
	margin-bottom: 0;
}

html body :is(.oxy-stock-content-styles, .sc-prose) > ul > li::before {
	content: "";
	position: absolute;
	top: 0.72em;
	left: 6px;
	width: 7px;
	height: 7px;
	background: var(--sc-accent);
	border-radius: 50%;
}

html body :is(.oxy-stock-content-styles, .sc-prose) > ol {
	counter-reset: sc-prose-list;
}

html body :is(.oxy-stock-content-styles, .sc-prose) > ol > li {
	counter-increment: sc-prose-list;
}

html body :is(.oxy-stock-content-styles, .sc-prose) > ol > li::before {
	content: counter(sc-prose-list) ".";
	position: absolute;
	top: 0;
	left: 0;
	color: var(--sc-accent);
	font-weight: 700;
}

html body :is(.oxy-stock-content-styles, .sc-prose) > blockquote {
	margin-inline: 0;
	padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.4vw, 32px);
	color: var(--sc-ink);
	background: #f6f9ff;
	border-left: 3px solid var(--sc-accent);
	border-radius: 0 12px 12px 0;
}

html body :is(.oxy-stock-content-styles, .sc-prose) > blockquote p {
	margin: 0 0 12px;
	color: inherit;
}

html body :is(.oxy-stock-content-styles, .sc-prose) > blockquote p:last-child {
	margin-bottom: 0;
}

html body :is(.oxy-stock-content-styles, .sc-prose) > figure {
	margin-inline: 0;
}

html body :is(.oxy-stock-content-styles, .sc-prose) img {
	max-width: 100%;
	height: auto;
}

html body :is(.oxy-stock-content-styles, .sc-prose) figcaption {
	margin-top: 10px;
	color: var(--sc-muted);
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}

html body :is(.oxy-stock-content-styles, .sc-prose) > hr {
	height: 1px;
	margin-block: clamp(30px, 3.4vw, 46px);
	background: #dfe6f3;
	border: 0;
}

html body :is(.oxy-stock-content-styles, .sc-prose) table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

html body :is(.oxy-stock-content-styles, .sc-prose) :is(th, td) {
	padding: 12px 14px;
	border: 1px solid #dfe6f3;
	text-align: left;
}

html body :is(.oxy-stock-content-styles, .sc-prose) th {
	color: var(--sc-ink);
	background: #f6f9ff;
	font-weight: 600;
}

/* szerokie tabele przewijaja sie same, strona nie */
html body :is(.oxy-stock-content-styles, .sc-prose) > .wp-block-table {
	overflow-x: auto;
}

/* ---------------------------------------------------------------
   2. PRYMITYWY

   Nadselektor .sc-eyebrow jest dla nowych sekcji. Pozostale nazwy
   to aliasy juz zbudowanych sekcji w Oxygenie - dzieki nim nie
   trzeba przeklasowywac elementow w builderze.
   --------------------------------------------------------------- */

.sc-eyebrow,
.sc-areas .sc-areas__eyebrow,
.sc-scope .sc-scope__eyebrow,
.sc-industries .sc-industries__eyebrow,
.sc-trust .sc-trust__eyebrow,
.sc-map .sc-map__eyebrow,
.sc-configurator .sc-configurator__eyebrow,
.sc-faq .sc-faq__eyebrow,
.sc-packages .sc-packages__eyebrow,
.sc-steps .sc-steps__eyebrow,
.sc-cases .sc-cases__eyebrow,
.sc-results .sc-results__eyebrow,
.sc-tabs .sc-tabs__eyebrow,
.sc-calls .sc-calls__eyebrow,
.sc-figure .sc-figure__eyebrow,
.sc-consult .sc-consult__eyebrow,
.sc-team .sc-team__eyebrow,
.sc-audience .sc-audience__eyebrow,
.sc-people .sc-people__eyebrow,
.sc-credo .sc-credo__eyebrow,
.sc-certs .sc-certs__eyebrow,
.sc-contact .sc-contact__eyebrow,
.sc-blog .sc-blog__eyebrow {
	margin: 0 0 18px;
	padding: 0;
	color: var(--sc-eyebrow-color, var(--sc-accent));
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.22em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* sekcje wysrodkowane maja eyebrow na srodku */
.sc-industries .sc-industries__eyebrow,
.sc-trust .sc-trust__eyebrow,
.sc-configurator .sc-configurator__eyebrow,
.sc-faq .sc-faq__eyebrow,
.sc-packages .sc-packages__eyebrow,
.sc-results .sc-results__eyebrow,
.sc-tabs .sc-tabs__eyebrow,
.sc-calls .sc-calls__eyebrow,
.sc-consult .sc-consult__eyebrow {
	text-align: center;
}

/* na granacie ten sam niebieski bylby za ciemny */
.sc-hero,
.sc-phero,
.sc-scope,
.sc-industries,
.sc-steps,
.sc-credo,
.sc-figure,
.sc-footer {
	--sc-eyebrow-color: var(--sc-accent-on-dark);
}

/* Klauzula prywatnosci - prymityw, bo stoi przy kazdym punkcie
   kontaktu: przy danych, przy konfiguratorze i przy analizie.
   Stawia go shortcode [smartcare_privacy]. */

.sc-privacy {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	color: var(--sc-privacy-color, var(--sc-muted));
	font-size: 13px;
	line-height: 1.5;
}

.sc-privacy .sc-privacy__icon {
	flex: 0 0 auto;
	width: 15px;
	height: 17px;
	margin-top: 0.15em;
	background: currentColor;
	opacity: 0.75;
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 17' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 1 13.5 3.3v4.9c0 3.4-2.4 6.4-6 7.6-3.6-1.2-6-4.2-6-7.6V3.3z'/%3E%3Cpath d='m5 8.3 1.9 1.9L10.3 6.6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 17' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 1 13.5 3.3v4.9c0 3.4-2.4 6.4-6 7.6-3.6-1.2-6-4.2-6-7.6V3.3z'/%3E%3Cpath d='m5 8.3 1.9 1.9L10.3 6.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sc-privacy .sc-privacy__link {
	color: var(--sc-privacy-link, var(--sc-accent));
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 180ms ease;
}

.sc-privacy .sc-privacy__link:hover,
.sc-privacy .sc-privacy__link:focus-visible {
	color: var(--sc-privacy-link-hover, var(--sc-navy));
}

/* na granacie szarosc bylaby nieczytelna */
.sc-credo .sc-privacy,
.sc-cta .sc-privacy,
.sc-phero .sc-privacy {
	--sc-privacy-color: rgba(215, 226, 246, 0.78);
	--sc-privacy-link: #fff;
	--sc-privacy-link-hover: var(--sc-accent-on-dark);
}

/* Kafelek z liczba. Uzywany w "Zaufali nam" i "Nasze wyniki".
   Nazwy .sc-trust__* to aliasy juz zbudowanej sekcji w Oxygenie. */

.sc-stats,
.sc-trust .sc-trust__stats {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	/* Oxygen daje divom align-items: flex-start, wiec karty nie rownalyby sie */
	align-items: stretch;
	gap: clamp(18px, 2vw, 28px);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-stat,
.sc-trust .sc-trust__stat {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: clamp(18px, 2vw, 28px);
	margin: 0;
	padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.6vw, 36px);
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(20, 45, 100, 0.07);
}

/* ikona jest opcjonalna - bez niej kafelek to sama liczba z opisem */
.sc-stat__icon,
.sc-trust .sc-trust__stat-icon {
	flex: 0 0 auto;
	display: block;
	width: clamp(64px, 6vw, 82px);
	max-width: none;
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: contain;
	overflow: hidden;
}

.sc-stat__icon img,
.sc-trust .sc-trust__stat-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.sc-stat__body,
.sc-trust .sc-trust__stat-body {
	display: block !important;
	min-width: 0;
}

.sc-stat__value,
.sc-trust .sc-trust__stat-value {
	margin: 0 0 6px;
	color: var(--sc-ink);
	font-size: clamp(28px, 2.9vw, 40px);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.sc-stat__accent,
.sc-trust .sc-trust__stat-accent {
	color: var(--sc-accent);
}

.sc-stat__label,
.sc-trust .sc-trust__stat-label {
	margin: 0;
	color: var(--sc-muted);
	font-size: clamp(14px, 1.1vw, 16px);
	line-height: 1.45;
}

/* wariant z wieksza liczba - gdy kafelek nie ma ikony */
.sc-stats--lg .sc-stat__value {
	font-size: clamp(32px, 3.4vw, 46px);
	margin-bottom: 10px;
}

@media (max-width: 700px) {
	.sc-stats,
	.sc-trust .sc-trust__stats {
		grid-template-columns: 1fr;
	}

	.sc-stat,
	.sc-trust .sc-trust__stat {
		gap: 18px;
	}
}


/* ===============================================================
   HEADER
   =============================================================== */

:root {
	--sc-brand: #0c2874;
	--sc-brand-deep: #071845;
	--sc-cta: #2451c6;
	--sc-cta-hover: #173fa9;
	--sc-header-ink: #26354a;
	--sc-sky: #9dbcff;
	--sc-header-height: 96px;
}

html {
	scroll-padding-top: calc(var(--sc-header-height) + 16px);
}

.sc-header {
	position: sticky !important;
	top: 0;
	z-index: 1000;
	width: 100%;
	background: rgba(255, 255, 255, 0.97);
	border-bottom: 1px solid transparent;
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease;
	will-change: transform;
}

.sc-header.is-scrolled {
	border-bottom-color: rgba(12, 40, 116, 0.08);
	box-shadow: 0 10px 32px rgba(21, 38, 72, 0.08);
}

.sc-header.is-hidden {
	transform: translateY(calc(-100% - 4px));
}

.admin-bar .sc-header {
	top: 32px;
}

.sc-header > .ct-section-inner-wrap,
.sc-header > .sc-header__inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: space-between;
	gap: clamp(28px, 4vw, 72px);
	width: 100% !important;
	max-width: var(--sc-container) !important;
	min-height: var(--sc-header-height);
	margin-inline: auto;
	padding: 14px clamp(24px, 4.5vw, 68px);
}

.sc-header > .ct-section-inner-wrap > .ct-shortcode:first-child,
.sc-header > .sc-header__inner > .ct-shortcode:first-child {
	flex: 0 0 auto;
	width: clamp(176px, 15.5vw, 214px) !important;
	min-width: 0;
}

.sc-header > .ct-section-inner-wrap > .ct-shortcode:last-child,
.sc-header > .sc-header__inner > .ct-shortcode:last-child {
	flex: 1 1 auto;
	width: auto !important;
	min-width: 0;
}

.sc-header__brand {
	display: block;
	width: 100%;
	line-height: 0;
}

.sc-header__logo {
	display: block;
	width: 100%;
	height: auto;
	transition: filter 260ms ease;
}

.sc-nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex: 1 1 auto;
}

.sc-nav__panel,
.sc-nav__list {
	display: flex;
	align-items: center;
}

.sc-nav__panel {
	justify-content: flex-end;
	gap: clamp(28px, 3.2vw, 52px);
	width: 100%;
}

.sc-nav__menu {
	display: flex;
	justify-content: flex-end;
}

.sc-nav__list,
.sc-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sc-nav__list {
	justify-content: flex-end;
	gap: clamp(22px, 2.5vw, 42px);
}

.sc-nav__list > li {
	position: relative;
	margin: 0;
}

.sc-nav__list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--sc-header-ink);
	font-size: clamp(15px, 1.1vw, 17px);
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	white-space: nowrap;
	transition: color 180ms ease;
}

.sc-nav__list a:hover,
.sc-nav__list a:focus-visible,
.sc-nav__list .current-menu-item > a,
.sc-nav__list .current-menu-ancestor > a {
	color: var(--sc-cta);
}

.sc-nav__list a:focus-visible,
.sc-nav__phone:focus-visible,
.sc-nav__toggle:focus-visible,
.sc-nav__submenu-toggle:focus-visible,
.sc-header__brand:focus-visible {
	outline: 3px solid rgba(36, 81, 198, 0.38);
	outline-offset: 4px;
	border-radius: 8px;
}

.sc-nav__list > .menu-item-has-children > a::after {
	content: "";
	width: 7px;
	height: 7px;
	margin: -4px 0 0 9px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}

.sc-nav__list .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: -20px;
	z-index: 10;
	display: grid;
	min-width: 220px;
	padding: 12px;
	background: #fff;
	border: 1px solid rgba(12, 40, 116, 0.09);
	border-radius: 14px;
	box-shadow: 0 18px 42px rgba(22, 37, 72, 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
}

.sc-nav__list li:hover > .sub-menu,
.sc-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sc-nav__list .sub-menu a {
	display: flex;
	min-height: 42px;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 15px;
	white-space: normal;
}

.sc-nav__list .sub-menu a:hover,
.sc-nav__list .sub-menu a:focus-visible {
	background: rgba(36, 81, 198, 0.07);
}

.sc-nav__phone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 196px;
	min-height: 52px;
	padding: 13px 22px;
	color: #fff;
	background: var(--sc-cta);
	border-radius: 999px;
	box-shadow: 0 8px 20px rgba(36, 81, 198, 0.16);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

a.sc-nav__phone:hover {
	color: #fff;
	background: var(--sc-cta-hover);
	box-shadow: 0 10px 24px rgba(36, 81, 198, 0.23);
	transform: translateY(-1px);
}

.sc-nav__phone.is-placeholder {
	cursor: default;
}

.sc-nav__toggle,
.sc-nav__backdrop,
.sc-nav__submenu-toggle,
.sc-nav__tagline {
	display: none;
}

.sc-nav__notice {
	margin: 0;
	color: #b42318;
	font-size: 14px;
}

@media (max-width: 1180px) {
	.sc-header > .ct-section-inner-wrap,
	.sc-header > .sc-header__inner {
		gap: 28px;
		padding-inline: 28px;
	}

	.sc-nav__panel,
	.sc-nav__list {
		gap: 20px;
	}

	.sc-nav__phone {
		min-width: 176px;
		padding-inline: 16px;
		font-size: 15px;
	}
}

/* ---------------------------------------------------------------
   Mobile: pelnoekranowy panel granatowy, rozwijany od przycisku menu
   --------------------------------------------------------------- */

@media (max-width: 991px) {
	:root {
		--sc-header-height: 72px;
	}

	.admin-bar .sc-header {
		top: 32px;
	}

	.sc-header > .ct-section-inner-wrap,
	.sc-header > .sc-header__inner {
		min-height: var(--sc-header-height);
		padding: 10px 20px;
	}

	.sc-header > .ct-section-inner-wrap > .ct-shortcode:first-child,
	.sc-header > .sc-header__inner > .ct-shortcode:first-child {
		position: relative;
		z-index: 1002;
		flex: 0 0 auto;
		width: min(180px, calc(100vw - 96px)) !important;
	}

	.sc-header > .ct-section-inner-wrap > .ct-shortcode:last-child,
	.sc-header > .sc-header__inner > .ct-shortcode:last-child {
		flex: 0 0 auto;
	}

	.sc-header__brand {
		position: relative;
		z-index: 1002;
		width: 100%;
	}

	/* logo przechodzi w biel, gdy panel jest otwarty */
	body.sc-nav-open .sc-header {
		background: transparent;
		border-bottom-color: transparent;
		box-shadow: none;
	}

	body.sc-nav-open .sc-header__logo {
		filter: brightness(0) invert(1);
	}

	.sc-nav {
		flex: 0 0 auto;
	}

	.sc-nav__toggle {
		position: relative;
		z-index: 1003;
		display: grid;
		place-items: center;
		width: 48px;
		height: 48px;
		padding: 0;
		color: var(--sc-brand);
		background: transparent;
		border: 0;
		border-radius: 12px;
		cursor: pointer;
		transition: color 240ms ease;
	}

	.sc-nav.is-open .sc-nav__toggle {
		color: #fff;
	}

	.sc-nav__toggle-box {
		display: grid;
		gap: 6px;
		width: 26px;
	}

	.sc-nav__toggle-box > span {
		display: block;
		width: 100%;
		height: 2px;
		background: currentColor;
		border-radius: 2px;
		transition: transform 320ms cubic-bezier(0.65, 0, 0.35, 1), opacity 160ms ease, width 320ms cubic-bezier(0.65, 0, 0.35, 1);
	}

	/* kreski o roznej dlugosci - echo skosu ze znaku firmowego */
	.sc-nav__toggle-box > span:nth-child(2) {
		width: 74%;
		justify-self: end;
	}

	.sc-nav__toggle-box > span:nth-child(3) {
		width: 48%;
		justify-self: end;
	}

	.sc-nav.is-open .sc-nav__toggle-box > span:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	.sc-nav.is-open .sc-nav__toggle-box > span:nth-child(2) {
		opacity: 0;
		transform: translateX(12px);
	}

	.sc-nav.is-open .sc-nav__toggle-box > span:nth-child(3) {
		width: 100%;
		transform: translateY(-8px) rotate(-45deg);
	}

	.sc-nav__backdrop {
		position: fixed;
		inset: 0;
		z-index: 1000;
		display: block;
		width: 100%;
		height: 100%;
		padding: 0;
		background: rgba(7, 24, 69, 0.5);
		border: 0;
		opacity: 0;
		visibility: hidden;
		cursor: default;
		transition: opacity 220ms ease, visibility 220ms ease;
	}

	.sc-nav__panel {
		position: fixed;
		inset: 0;
		z-index: 1001;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		/* szerokosc daje inset: 0 - 100vw liczyloby tez pasek przewijania
		   i robilo 15 px poziomego scrolla w waskim oknie na desktopie */
		width: auto;
		max-width: none;
		height: 100dvh;
		padding: calc(var(--sc-header-height) + 28px) 26px 32px;
		background:
			radial-gradient(120% 80% at 100% 0%, rgba(36, 81, 198, 0.55) 0%, rgba(36, 81, 198, 0) 62%),
			linear-gradient(168deg, var(--sc-brand) 0%, var(--sc-brand-deep) 100%);
		box-shadow: none;
		overflow-y: auto;
		overscroll-behavior: contain;
		clip-path: circle(0% at calc(100% - 44px) calc(var(--sc-header-height) / 2));
		visibility: hidden;
		pointer-events: none;
		transition: clip-path 520ms cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 520ms;
	}

	/* sygnatura: skrzydlo ze znaku firmowego jako znak wodny */
	.sc-nav__panel::after {
		content: "";
		position: absolute;
		right: -18%;
		bottom: -4%;
		z-index: 0;
		width: 128%;
		aspect-ratio: 4600 / 3123;
		background: url("../images/smartcare-wing.svg") no-repeat center / contain;
		opacity: 0.07;
		pointer-events: none;
	}

	.sc-nav.is-open .sc-nav__backdrop {
		opacity: 1;
		visibility: visible;
	}

	.sc-nav.is-open .sc-nav__panel {
		clip-path: circle(150% at calc(100% - 44px) calc(var(--sc-header-height) / 2));
		visibility: visible;
		pointer-events: auto;
		transition-delay: 0s;
	}

	.sc-nav__menu,
	.sc-nav__list {
		position: relative;
		z-index: 1;
		display: block;
		width: 100%;
	}

	.sc-nav__list > li {
		display: grid;
		grid-template-columns: 1fr auto;
		border-bottom: 1px solid rgba(255, 255, 255, 0.14);
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 420ms ease, transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
		transition-delay: calc(140ms + var(--sc-i, 0) * 55ms);
	}

	.sc-nav.is-open .sc-nav__list > li {
		opacity: 1;
		transform: translateY(0);
	}

	.sc-nav__list > li > a {
		display: flex;
		align-items: center;
		min-height: 64px;
		padding-block: 6px;
		color: #fff;
		font-size: clamp(26px, 7.4vw, 34px);
		font-weight: 700;
		letter-spacing: -0.015em;
		line-height: 1.06;
		white-space: normal;
	}

	.sc-nav__list > li > a:hover,
	.sc-nav__list > li > a:focus-visible,
	.sc-nav__list > .current-menu-item > a,
	.sc-nav__list > .current-menu-ancestor > a {
		color: var(--sc-sky);
	}

	.sc-nav__list a:focus-visible,
	.sc-nav__submenu-toggle:focus-visible {
		outline-color: rgba(157, 188, 255, 0.7);
	}

	.sc-nav__list > .menu-item-has-children > a::after {
		display: none;
	}

	.sc-nav__submenu-toggle {
		display: grid;
		place-items: center;
		align-self: center;
		width: 44px;
		height: 44px;
		padding: 0;
		color: var(--sc-sky);
		background: rgba(255, 255, 255, 0.09);
		border: 0;
		border-radius: 50%;
		cursor: pointer;
		transition: background-color 200ms ease;
	}

	.sc-nav__submenu-toggle::before {
		content: "";
		width: 9px;
		height: 9px;
		margin-top: -5px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), margin 260ms ease;
	}

	.sc-nav__list .is-submenu-open > .sc-nav__submenu-toggle {
		background: rgba(255, 255, 255, 0.18);
	}

	.sc-nav__list .is-submenu-open > .sc-nav__submenu-toggle::before {
		margin-top: 4px;
		transform: rotate(225deg);
	}

	.sc-nav__list .sub-menu {
		position: static;
		grid-column: 1 / -1;
		display: block;
		min-width: 0;
		max-height: 0;
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		opacity: 0;
		visibility: visible;
		overflow: hidden;
		transform: none;
		transition: max-height 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease, padding 360ms ease;
	}

	.sc-nav__list .is-submenu-open > .sub-menu {
		max-height: 520px;
		padding: 2px 0 14px;
		opacity: 1;
	}

	.sc-nav__list .sub-menu li {
		position: relative;
		padding-left: 22px;
	}

	/* krotka kreska - odnosnik do skosu w znaku firmowym */
	.sc-nav__list .sub-menu li::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 12px;
		height: 1px;
		background: var(--sc-sky);
		opacity: 0.55;
	}

	.sc-nav__list .sub-menu a {
		min-height: 44px;
		padding: 6px 0;
		border-radius: 0;
		color: rgba(255, 255, 255, 0.82);
		font-size: 16px;
		font-weight: 500;
	}

	.sc-nav__list .sub-menu a:hover,
	.sc-nav__list .sub-menu a:focus-visible {
		background: transparent;
		color: #fff;
	}

	.sc-nav__phone {
		position: relative;
		z-index: 1;
		width: 100%;
		min-height: 58px;
		margin-top: auto;
		color: var(--sc-brand);
		background: #fff;
		box-shadow: 0 14px 34px rgba(4, 15, 45, 0.28);
		font-size: 17px;
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 420ms ease, transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
		transition-delay: 380ms;
	}

	a.sc-nav__phone:hover {
		color: var(--sc-brand);
		background: #fff;
	}

	.sc-nav__tagline {
		position: relative;
		z-index: 1;
		display: block;
		margin: 16px 0 0;
		color: rgba(157, 188, 255, 0.85);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.22em;
		text-align: center;
		text-transform: uppercase;
		opacity: 0;
		transition: opacity 420ms ease;
		transition-delay: 460ms;
	}

	.sc-nav.is-open .sc-nav__phone,
	.sc-nav.is-open .sc-nav__tagline {
		opacity: 1;
		transform: translateY(0);
	}

	body.sc-nav-open {
		overflow: hidden;
	}
}

@media (max-width: 782px) {
	.admin-bar .sc-header {
		top: 46px;
	}
}

@media (max-width: 430px) {
	.sc-header > .ct-section-inner-wrap,
	.sc-header > .sc-header__inner {
		padding-inline: 16px;
	}

	.sc-header > .ct-section-inner-wrap > .ct-shortcode:first-child,
	.sc-header > .sc-header__inner > .ct-shortcode:first-child {
		width: min(164px, calc(100vw - 88px)) !important;
	}

	.sc-nav__panel {
		padding-inline: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-header,
	.sc-header__logo,
	.sc-nav__panel,
	.sc-nav__backdrop,
	.sc-nav__toggle-box > span,
	.sc-nav__list > li,
	.sc-nav__list .sub-menu,
	.sc-nav__submenu-toggle::before,
	.sc-nav__phone,
	.sc-nav__tagline {
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}
}


/* ===============================================================
   HERO
   =============================================================== */

/* ---------------------------------------------------------------
   Hero SmartCare - sekcja Oxygena z klasa .sc-hero
   --------------------------------------------------------------- */

/* Rejestracja wlasnosci pozwala plynnie animowac poswiate samym CSS-em -
   JS podaje tylko surowa pozycje kursora, wygladzanie robi transition nizej. */
@property --sc-hero-mx {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 72%;
}

@property --sc-hero-my {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 34%;
}

.sc-hero {
	--sc-hero-ink: #0a1c50;
	--sc-hero-deep: #081a4a;
	--sc-hero-mid: #123073;
	--sc-hero-accent: #4d8cff;
	--sc-hero-glow: rgba(72, 128, 255, 0.55);
	--sc-hero-pad-y: clamp(64px, 7vw, 118px);
	--sc-hero-pad-x: clamp(24px, 4.5vw, 68px);

	/* pozycja poswiaty - podmieniana przez smartcare-hero.js */
	--sc-hero-rest-x: 72%;
	--sc-hero-rest-y: 34%;
	--sc-hero-mx: 72%;
	--sc-hero-my: 34%;

	position: relative;
	isolation: isolate;
	width: 100%;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(140deg, var(--sc-hero-deep) 0%, var(--sc-hero-ink) 46%, var(--sc-hero-mid) 100%);
	transition: --sc-hero-mx 420ms cubic-bezier(0.22, 1, 0.36, 1), --sc-hero-my 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* poswiata podazajaca za kursorem */
.sc-hero::before {
	content: "";
	position: absolute;
	inset: -20%;
	z-index: -2;
	background:
		radial-gradient(38% 46% at var(--sc-hero-mx) var(--sc-hero-my), var(--sc-hero-glow) 0%, rgba(72, 128, 255, 0.18) 38%, rgba(72, 128, 255, 0) 68%),
		radial-gradient(60% 60% at 88% 8%, rgba(38, 84, 200, 0.42) 0%, rgba(38, 84, 200, 0) 70%);
	pointer-events: none;
}

/* siatka techniczna - gestsza u gory, gasnaca ku dolowi */
.sc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: clamp(64px, 6.4vw, 96px) clamp(64px, 6.4vw, 96px);
	background-position: center top;
	-webkit-mask-image: radial-gradient(120% 90% at 62% 12%, #000 0%, rgba(0, 0, 0, 0.55) 48%, transparent 88%);
	mask-image: radial-gradient(120% 90% at 62% 12%, #000 0%, rgba(0, 0, 0, 0.55) 48%, transparent 88%);
	pointer-events: none;
}

/* --- siatka tresci --- */

.sc-hero > .ct-section-inner-wrap,
.sc-hero > .sc-hero__inner {
	display: grid !important;
	grid-template-columns: 1fr 1.12fr;
	grid-template-areas:
		"title title"
		"copy  media";
	grid-template-rows: auto 1fr;
	align-items: start;
	gap: clamp(36px, 4.4vw, 74px) clamp(40px, 5vw, 88px);
	width: 100% !important;
	max-width: var(--sc-container) !important;
	min-height: min(88vh, 860px);
	margin-inline: auto;
	padding: var(--sc-hero-pad-y) var(--sc-hero-pad-x);
}

.sc-hero__copy,
.sc-hero__media {
	min-width: 0;
}

.sc-hero__copy {
	grid-area: copy;
}

.sc-hero__media {
	grid-area: media;
}

/* --- naglowek --- */

/* naglowek idzie nad obiema kolumnami, tak jak w projekcie */
.sc-hero .sc-hero__title {
	grid-area: title;
	margin: 0;
	max-width: min(100%, 1040px);
	color: #fff;
	font-size: var(--sc-h1);
	font-weight: 400;
	letter-spacing: -0.022em;
	line-height: 1.08;
	text-wrap: balance;
}

.sc-hero .sc-hero__title-accent {
	display: block;
	color: var(--sc-hero-accent);
}

.sc-hero .sc-hero__lead {
	margin: 0 0 clamp(32px, 3.6vw, 52px);
	color: rgba(226, 234, 252, 0.9);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.75;
}

/* --- przyciski --- */

.sc-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
}

.sc-hero .sc-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 62px;
	padding: 18px 38px;
	border-radius: 999px;
	font-size: clamp(12px, 0.92vw, 14px);
	font-weight: 700;
	letter-spacing: 0.09em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.sc-hero .sc-hero__btn--primary {
	color: var(--sc-hero-ink);
	background: #fff;
	border: 1px solid #fff;
	box-shadow: 0 16px 38px rgba(4, 14, 46, 0.32);
}

/* plus rysowany w CSS - nie trzeba wstawiac ikony w Oxygenie */
.sc-hero .sc-hero__btn--primary::before {
	content: "+";
	font-size: 1.65em;
	font-weight: 400;
	line-height: 0;
	letter-spacing: 0;
}

.sc-hero .sc-hero__btn--primary:hover,
.sc-hero .sc-hero__btn--primary:focus-visible {
	color: var(--sc-hero-ink);
	background: #fff;
	transform: translateY(-2px);
	box-shadow: 0 20px 44px rgba(4, 14, 46, 0.4);
}

.sc-hero .sc-hero__btn--ghost {
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.42);
	box-shadow: none;
}

.sc-hero .sc-hero__btn--ghost:hover,
.sc-hero .sc-hero__btn--ghost:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.75);
	transform: translateY(-2px);
}

/* --- karta ze zdjeciem --- */

.sc-hero__media {
	position: relative;
	align-self: stretch;
	margin-bottom: calc(-1 * var(--sc-hero-pad-y));
	border-radius: 22px 22px 0 0;
	overflow: hidden;
	box-shadow: 0 34px 80px rgba(3, 12, 42, 0.45);
}

.sc-hero__media > img,
.sc-hero .sc-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	aspect-ratio: 16 / 12;
	object-fit: cover;
}


/* Film w kadrze hero - wstawia go JS w miejsce zdjecia. Kadr trzyma
   te same proporcje co zdjecie, wiec uklad hero sie nie rusza. */
/* Bez zdjecia w srodku kadr nie mialby czym trzymac wysokosci, zanim
   skrypt wstawi film - proporcje ustawiamy wiec na samym kadrze. */
.sc-has-hero-video .sc-hero .sc-hero__media {
	aspect-ratio: 16 / 12;
}

/* Zanim skrypt wstawi film, zdjecie chowa klasa z naglowka - inaczej
   przez moment widac je w kadrze. Bez JS klasa sie nie pojawia i
   zdjecie zostaje. */
.sc-has-hero-video .sc-hero .sc-hero__media > img,
.sc-has-hero-video .sc-hero .sc-hero__image {
	display: none;
}

/* Zdjecie z Oxygena zostaje w strukturze jako zapas, ale gdy JS wstawi
   film, musi zniknac - wlasna regula .sc-hero__media > img jest
   silniejsza niz domyslne chowanie atrybutem hidden. */
.sc-hero .sc-hero__media > img[hidden],
.sc-hero .sc-hero__image[hidden] {
	display: none;
}

.sc-hero .sc-hero__video {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	aspect-ratio: 16 / 12;
	object-fit: cover;
	background: #0b1d4c;
}
/* --- odtworz film --- */

.sc-hero .sc-hero__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
  justify-content: center;
	width: clamp(68px, 6.4vw, 98px);
	aspect-ratio: 1;
	margin: 0;
	padding: 0;
	background: #fff;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 12px 34px rgba(4, 14, 46, 0.34);
	cursor: pointer;
	transform: translate(-50%, -50%);
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease;
}

.sc-hero .sc-hero__play::before {
	content: "";
	width: 0;
	height: 0;
	margin-left: 0.18em;
	border-top: 0.62em solid transparent;
	border-bottom: 0.62em solid transparent;
	border-left: 1.05em solid var(--sc-hero-accent);
	font-size: clamp(15px, 1.4vw, 21px);
}

/* Film gra - zamiast kolka z play caly kadr jest klikalny i otwiera
   wersje z dzwiekiem. Link zostaje, wiec dziala tez z klawiatury. */
.sc-hero .sc-hero__media.is-playing .sc-hero__play {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: auto;
	aspect-ratio: auto;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	transform: none;
}

.sc-hero .sc-hero__media.is-playing .sc-hero__play::before {
	content: none;
}

.sc-hero .sc-hero__media.is-playing .sc-hero__play:hover {
	transform: none;
	box-shadow: none;
}

.sc-hero .sc-hero__play:hover,
.sc-hero .sc-hero__play:focus-visible {
	transform: translate(-50%, -50%) scale(1.06);
	box-shadow: 0 18px 44px rgba(4, 14, 46, 0.45);
}

/* --- plakietka --- */

.sc-hero .sc-hero__badge {
	position: absolute;
	top: clamp(18px, 2vw, 30px);
	right: clamp(18px, 2vw, 30px);
	z-index: 2;
	margin: 0;
	padding: 12px 24px;
	color: var(--sc-hero-accent);
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 10px 26px rgba(4, 14, 46, 0.22);
	font-size: clamp(13px, 1.05vw, 16px);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.sc-hero a.sc-hero__badge:hover,
.sc-hero a.sc-hero__badge:focus-visible {
	color: var(--sc-hero-ink);
}

/* --- fokus klawiatury --- */

.sc-hero a:focus-visible,
.sc-hero button:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.7);
	outline-offset: 4px;
}

/* --- responsywnosc --- */

@media (max-width: 991px) {
	/* padding sterowany zmienna, zeby ujemny margines karty zawsze sie zgadzal */
	.sc-hero {
		--sc-hero-pad-y: clamp(48px, 9vw, 72px);
	}

	.sc-hero > .ct-section-inner-wrap,
	.sc-hero > .sc-hero__inner {
		grid-template-columns: 1fr;
		grid-template-areas:
			"title"
			"copy"
			"media";
		grid-template-rows: auto auto 1fr;
		align-items: start;
		min-height: 0;
	}

	.sc-hero__media img,
	.sc-hero .sc-hero__image {
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 560px) {
	.sc-hero__actions {
		align-items: stretch;
	}

	.sc-hero .sc-hero__btn {
		width: 100%;
		padding-inline: 20px;
	}

	.sc-hero .sc-hero__badge {
		font-size: 12px;
		padding: 9px 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-hero *,
	.sc-hero::before {
		transition-duration: 0.01ms !important;
	}
}


/* ===============================================================
   PAGE HERO
   =============================================================== */

/* ---------------------------------------------------------------
   Hero podstron ofertowych - .sc-phero
   Jeden zestaw klas dla wszystkich podstron oferty: zmienia sie
   tylko tresc, zdjecie i ogniwa okruszkow.
   --------------------------------------------------------------- */

.sc-phero {
	--sc-phero-deep: #0b1d4c;
	--sc-phero-mid: #14306e;
	--sc-phero-accent: #4d8cff;
	--sc-phero-text: rgba(219, 229, 248, 0.82);
	--sc-phero-line: rgba(255, 255, 255, 0.16);
	--sc-phero-ink: #10203f;
	--sc-phero-pad-y: clamp(48px, 5.5vw, 84px);
	--sc-phero-pad-x: clamp(24px, 4.5vw, 68px);
	/* ta sama szerokosc kontenera co w naglowku */
	--sc-phero-container: 1500px;
	--sc-phero-radius: 20px;

	/* pozycja spoczynkowa poswiaty; --sc-hero-mx/my podmienia smartcare-hero.js */
	--sc-hero-rest-x: 27%;
	--sc-hero-rest-y: 24%;
	--sc-hero-mx: 27%;
	--sc-hero-my: 24%;

	position: relative;
	isolation: isolate;
	width: 100%;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(125deg, var(--sc-phero-deep) 0%, var(--sc-phero-mid) 100%);
	transition: --sc-hero-mx 420ms cubic-bezier(0.22, 1, 0.36, 1), --sc-hero-my 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* poswiata podazajaca za kursorem - zmienne rejestruje smartcare-hero.css */
.sc-phero::after {
	content: "";
	position: absolute;
	inset: -20%;
	z-index: -2;
	background: radial-gradient(36% 44% at var(--sc-hero-mx) var(--sc-hero-my), rgba(72, 128, 255, 0.45) 0%, rgba(72, 128, 255, 0.14) 40%, rgba(72, 128, 255, 0) 70%);
	pointer-events: none;
}

.sc-phero *,
.sc-phero *::before,
.sc-phero *::after {
	box-sizing: border-box;
}

/* siatka techniczna, ta sama rodzina co na stronie glownej */
.sc-phero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
	background-size: clamp(64px, 6.4vw, 96px) clamp(64px, 6.4vw, 96px);
	-webkit-mask-image: radial-gradient(115% 95% at 30% 10%, #000 0%, rgba(0, 0, 0, 0.6) 52%, transparent 92%);
	mask-image: radial-gradient(115% 95% at 30% 10%, #000 0%, rgba(0, 0, 0, 0.6) 52%, transparent 92%);
	pointer-events: none;
}

/* Sekcja jest pelnej szerokosci, zeby zdjecie doszlo do prawej krawedzi okna.
   Lewy padding liczymy tak, zeby tresc trafila w te sama linie co logo
   w naglowku, czyli w kontener 1500 px z padingiem --sc-phero-pad-x. */
.sc-phero > .ct-section-inner-wrap,
.sc-phero > .sc-phero__inner {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
	align-items: center !important;
	gap: clamp(32px, 4vw, 64px);
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0;
	padding-block: var(--sc-phero-pad-y);
	padding-right: 0;
	padding-left: max(
		var(--sc-phero-pad-x),
		calc((100% - var(--sc-phero-container)) / 2 + var(--sc-phero-pad-x))
	);
}

.sc-phero .sc-phero__body {
	display: block !important;
	width: 100%;
	max-width: 720px;
}

/* --- okruszki (shortcode) --- */

.sc-phero .sc-phero__breadcrumbs {
	margin-bottom: clamp(26px, 3vw, 44px);
}

.sc-phero .sc-phero__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: clamp(13px, 1.05vw, 15px);
	line-height: 1.3;
}

.sc-phero .sc-phero__crumb {
	display: flex;
	align-items: center;
	gap: 10px 14px;
	margin: 0;
	color: var(--sc-phero-text);
}

/* strzalka miedzy ogniwami rysowana maska, bez dodatkowych elementow */
.sc-phero .sc-phero__crumb + .sc-phero__crumb::before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 11px;
	background: currentColor;
	opacity: 0.7;
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.7 5.5h13.6'/%3E%3Cpath d='M10.4 1.5 14.3 5.5 10.4 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.7 5.5h13.6'/%3E%3Cpath d='M10.4 1.5 14.3 5.5 10.4 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sc-phero .sc-phero__crumb a {
	color: inherit;
	text-decoration: none;
	transition: color 180ms ease;
}

.sc-phero .sc-phero__crumb a:hover,
.sc-phero .sc-phero__crumb a:focus-visible {
	color: #fff;
}

.sc-phero .sc-phero__crumb [aria-current="page"] {
	color: #fff;
	font-weight: 600;
}

/* --- naglowek i lead --- */

.sc-phero .sc-phero__title {
	margin: 0 0 clamp(20px, 2.4vw, 32px);
	color: #fff;
	font-size: var(--sc-h1-page);
	font-weight: 400;
	letter-spacing: -0.022em;
	line-height: 1.12;
}

.sc-phero .sc-phero__title-accent {
	display: block;
	color: var(--sc-phero-accent);
}

.sc-phero .sc-phero__lead {
	margin: 0 0 clamp(28px, 3.2vw, 44px);
	max-width: 46ch;
	color: var(--sc-phero-text);
	font-size: var(--sc-lead-lg);
	line-height: 1.6;
}

/* --- przycisk --- */

.sc-phero .sc-phero__cta {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: fit-content;
	min-height: 62px;
	padding: 18px 40px;
	color: var(--sc-phero-ink);
	background: #fff;
	border: 1px solid #fff;
	border-radius: 999px;
	box-shadow: 0 16px 38px rgba(4, 14, 46, 0.3);
	font-size: clamp(13px, 1vw, 15px);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease;
}

.sc-phero a.sc-phero__cta:hover,
.sc-phero a.sc-phero__cta:focus-visible {
	color: var(--sc-phero-ink);
	background: #fff;
	transform: translateY(-2px);
	box-shadow: 0 20px 46px rgba(4, 14, 46, 0.4);
}

/* --- pasek wyroznikow --- */

.sc-phero .sc-phero__features {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 14px clamp(22px, 2.6vw, 40px);
	margin: clamp(32px, 3.6vw, 52px) 0 0;
	padding: clamp(22px, 2.4vw, 32px) 0 0;
	border-top: 1px solid var(--sc-phero-line);
	list-style: none;
}

.sc-phero .sc-phero__feature {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 10px;
	margin: 0;
	color: var(--sc-phero-text);
	font-size: clamp(13px, 1.05vw, 15px);
	line-height: 1.35;
}

.sc-phero .sc-phero__feature .sc-phero__feature-icon {
	flex: 0 0 auto;
	display: block;
	width: 20px;
	height: auto;
	max-width: none;
	object-fit: contain;
}

/* --- zdjecie --- */

.sc-phero .sc-phero__media {
	display: block !important;
	position: relative;
	width: 100%;
	/* zaokraglone tylko od strony tresci - prawa strona dotyka krawedzi okna */
	border-radius: var(--sc-phero-radius) 0 0 var(--sc-phero-radius);
	overflow: hidden;
}

.sc-phero .sc-phero__media > img,
.sc-phero .sc-phero__image {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 11 / 10;
	object-fit: cover;
}

/* --- fokus klawiatury --- */

.sc-phero a:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.7);
	outline-offset: 4px;
	border-radius: 8px;
}

/* --- responsywnosc --- */

@media (max-width: 991px) {
	.sc-phero > .ct-section-inner-wrap,
	.sc-phero > .sc-phero__inner {
		grid-template-columns: 1fr;
		align-items: start !important;
		padding: var(--sc-phero-pad-y) var(--sc-phero-pad-x);
	}

	.sc-phero .sc-phero__body {
		max-width: none;
	}

	.sc-phero .sc-phero__lead {
		max-width: none;
	}

	.sc-phero .sc-phero__media {
		margin-right: calc(-1 * var(--sc-phero-pad-x));
	}

	.sc-phero .sc-phero__media > img,
	.sc-phero .sc-phero__image {
		aspect-ratio: 16 / 10;
	}
}

@media (max-width: 560px) {
	.sc-phero .sc-phero__cta {
		width: 100%;
		padding-inline: 20px;
	}

	.sc-phero .sc-phero__features {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-phero .sc-phero__cta,
	.sc-phero .sc-phero__crumb a {
		transition-duration: 0.01ms !important;
	}
}


/* ===============================================================
   INTRO
   =============================================================== */

/* ---------------------------------------------------------------
   Sekcja tekstowa - .sc-intro
   Trzy poziomy tekstu: naglowek, zajawka i akapit rozwijajacy.
   Do uzycia na podstronach ofertowych; tresc edytowalna w Oxygenie.
   --------------------------------------------------------------- */

.sc-intro {
	--sc-intro-navy: #16296b;
	--sc-intro-ink: #1b2536;
	--sc-intro-muted: #6a7789;
	--sc-intro-pad-x: clamp(24px, 4.5vw, 68px);
	/* ta sama szerokosc kontenera co w naglowku i hero */
	--sc-intro-container: 1500px;

	width: 100%;
	color: var(--sc-intro-ink);
	background: #fff;
}

.sc-intro *,
.sc-intro *::before,
.sc-intro *::after {
	box-sizing: border-box;
}

.sc-intro > .ct-section-inner-wrap,
.sc-intro > .sc-intro__inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	width: 100% !important;
	max-width: var(--sc-intro-container) !important;
	margin-inline: auto;
	padding: var(--sc-pad-y) var(--sc-pad-x);
}

.sc-intro .sc-intro__title {
	margin: 0 0 clamp(20px, 2.2vw, 30px);
	max-width: 860px;
	color: var(--sc-intro-navy);
	font-size: var(--sc-h2);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.18;
}

/* zajawka - ciemna i cieplejsza od akapitu, zeby zbudowac hierarchie */
.sc-intro .sc-intro__lead {
	margin: 0 0 clamp(18px, 2vw, 26px);
	max-width: 820px;
	color: var(--sc-intro-navy);
	font-size: clamp(17px, 1.5vw, 22px);
	font-weight: 600;
	line-height: 1.45;
}

.sc-intro .sc-intro__body {
	margin: 0;
	max-width: 940px;
	color: var(--sc-intro-muted);
	font-size: clamp(16px, 1.3vw, 17px);
	font-weight: 400;
	line-height: 1.65;
}

/* fragmenty do podkreslenia zaznacz w Oxygenie jako <strong> */
.sc-intro .sc-intro__body strong,
.sc-intro .sc-intro__body b {
	color: var(--sc-intro-ink);
	font-weight: 700;
}

.sc-intro .sc-intro__lead strong,
.sc-intro .sc-intro__lead b {
	font-weight: 700;
}

/* --- wariant wysrodkowany, gdyby sekcja miala trafic na strone glowna --- */

.sc-intro.sc-intro--center > .ct-section-inner-wrap,
.sc-intro.sc-intro--center > .sc-intro__inner {
	align-items: center !important;
}

.sc-intro.sc-intro--center .sc-intro__title,
.sc-intro.sc-intro--center .sc-intro__lead,
.sc-intro.sc-intro--center .sc-intro__body {
	text-align: center;
	text-wrap: balance;
}

/* --- responsywnosc --- */

@media (max-width: 700px) {
	.sc-intro .sc-intro__title,
	.sc-intro .sc-intro__lead,
	.sc-intro .sc-intro__body {
		max-width: none;
	}
}


/* ===============================================================
   AREAS
   =============================================================== */

/* ---------------------------------------------------------------
   Sekcja "Czym sie zajmujemy" - akordeon obszarow
   Struktura powstaje w Oxygenie; selektory maja po dwie klasy,
   zeby wygrac z domyslnymi .ct-div-block / .ct-link-button.
   --------------------------------------------------------------- */

.sc-areas {
	--sc-areas-ink: #10203f;
	--sc-areas-navy: #16295c;
	--sc-areas-accent: #2f6bff;
	--sc-areas-muted: #4a5b78;
	--sc-areas-line: #dfe5f0;
	--sc-areas-radius: 22px;

	width: 100%;
	color: var(--sc-areas-ink);
	background: #fff;
}

.sc-areas *,
.sc-areas *::before,
.sc-areas *::after {
	box-sizing: border-box;
}

/* Lewa kolumna dochodzi do krawedzi okna, prawa trzyma margines. */
.sc-areas > .ct-section-inner-wrap,
.sc-areas > .sc-areas__inner {
	display: grid !important;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
	align-items: center !important;
	gap: clamp(32px, 4vw, 64px);
	width: 100% !important;
	max-width: none !important;
	margin: 0;
	padding: var(--sc-pad-y) var(--sc-pad-x) var(--sc-pad-y) 0;
}

/* --- zdjecie --- */

.sc-areas .sc-areas__media {
	display: block !important;
	width: 100%;
	border-radius: var(--sc-areas-radius);
	overflow: hidden;
}

.sc-areas .sc-areas__media > img,
.sc-areas .sc-areas__image {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 11 / 10;
	border-radius: var(--sc-areas-radius);
	object-fit: cover;
}

/* --- kolumna z trescia --- */

.sc-areas .sc-areas__body {
	display: block !important;
	width: 100%;
	max-width: 680px;
}

.sc-areas .sc-areas__title {
	margin: 0 0 clamp(28px, 3vw, 44px);
	color: var(--sc-areas-ink);
	font-size: var(--sc-h2);
	font-weight: 400;
	letter-spacing: -0.018em;
	line-height: 1.12;
}

/* --- lista obszarow --- */

.sc-areas .sc-areas__list {
	display: block !important;
	width: 100%;
	margin: 0 0 clamp(28px, 3.2vw, 44px);
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--sc-areas-line);
}

.sc-areas .sc-areas__item {
	display: block !important;
	margin: 0;
	border-top: 1px solid var(--sc-areas-line);
}

.sc-areas .sc-areas__head {
	display: grid !important;
	grid-template-columns: auto 1fr auto;
	align-items: center !important;
	gap: 16px;
	width: 100%;
	min-height: 68px;
	padding: 16px 0;
	color: var(--sc-areas-ink);
	cursor: pointer;
	transition: color 180ms ease;
}

.sc-areas .sc-areas__head:hover {
	color: var(--sc-areas-accent);
}

.sc-areas .sc-areas__number {
	margin: 0;
	color: var(--sc-areas-ink);
	font-size: clamp(15px, 1.3vw, 18px);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	transition: color 180ms ease;
}

.sc-areas .sc-areas__item.is-open .sc-areas__number {
	color: var(--sc-areas-accent);
}

.sc-areas .sc-areas__name {
	margin: 0;
	color: inherit;
	font-size: clamp(16px, 1.45vw, 21px);
	font-weight: 400;
	line-height: 1.3;
}

/* strzalka rysowana maska - dziedziczy kolor tekstu, nie trzeba ikony w Oxygenie */
.sc-areas .sc-areas__head::after {
	content: "";
	width: 22px;
	height: 22px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15'/%3E%3Cpath d='M5.5 12.5 12 19l6.5-6.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15'/%3E%3Cpath d='M5.5 12.5 12 19l6.5-6.5'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sc-areas .sc-areas__item.is-open .sc-areas__head::after {
	transform: rotate(180deg);
}

/* --- rozwijana tresc --- */

.sc-areas .sc-areas__panel {
	display: block !important;
	overflow: hidden;
}

/* dopiero po starcie JS panele zaczynaja byc zwiniete - bez skryptu tresc jest widoczna */
.sc-areas .sc-areas__list.is-ready .sc-areas__panel {
	max-height: 0;
	opacity: 0;
	transition: max-height 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease, padding-bottom 360ms ease;
}

.sc-areas .sc-areas__list.is-ready .sc-areas__item.is-open .sc-areas__panel {
	max-height: 480px;
	padding-bottom: 26px;
	opacity: 1;
}

.sc-areas .sc-areas__text {
	margin: 0 0 18px;
	color: var(--sc-areas-muted);
	font-size: clamp(15px, 1.15vw, 17px);
	line-height: 1.65;
}

.sc-areas .sc-areas__link {
	display: inline-block;
	color: var(--sc-areas-accent);
	font-size: clamp(15px, 1.15vw, 17px);
	font-weight: 700;
	text-decoration: none;
}

.sc-areas .sc-areas__link:hover,
.sc-areas .sc-areas__link:focus-visible {
	color: var(--sc-areas-navy);
	text-decoration: underline;
}

/* --- przycisk --- */

.sc-areas .sc-areas__cta {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: fit-content;
	min-height: 62px;
	padding: 18px 40px;
	color: #fff;
	background: var(--sc-areas-navy);
	border: 1px solid var(--sc-areas-navy);
	border-radius: 999px;
	font-size: clamp(12px, 0.95vw, 14px);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease;
}

.sc-areas .sc-areas__cta:hover,
.sc-areas .sc-areas__cta:focus-visible {
	color: #fff;
	background: #0c1c46;
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(12, 28, 70, 0.24);
}

/* --- fokus klawiatury --- */

.sc-areas a:focus-visible,
.sc-areas .sc-areas__head:focus-visible {
	outline: 3px solid rgba(47, 107, 255, 0.45);
	outline-offset: 4px;
	border-radius: 6px;
}

/* --- responsywnosc --- */

@media (max-width: 991px) {
	.sc-areas > .ct-section-inner-wrap,
	.sc-areas > .sc-areas__inner {
		grid-template-columns: 1fr;
		gap: clamp(28px, 5vw, 44px);
		padding: clamp(44px, 8vw, 64px) clamp(20px, 5vw, 40px);
	}

	.sc-areas .sc-areas__media > img,
	.sc-areas .sc-areas__image {
		aspect-ratio: 16 / 10;
	}

	.sc-areas .sc-areas__body {
		max-width: none;
	}
}

@media (max-width: 560px) {
	.sc-areas .sc-areas__head {
		gap: 12px;
		min-height: 60px;
	}

	.sc-areas .sc-areas__cta {
		width: 100%;
		padding-inline: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-areas .sc-areas__head::after,
	.sc-areas .sc-areas__list.is-ready .sc-areas__panel,
	.sc-areas .sc-areas__cta {
		transition-duration: 0.01ms !important;
	}
}


/* ===============================================================
   SCOPE
   =============================================================== */

/* ---------------------------------------------------------------
   Sekcja "Zakres dzialan" - .sc-scope
   Lewa kolumna: zdjecie i naglowek. Prawa: lista obszarow
   z ikona i linkiem. Do uzycia na podstronach ofertowych.
   --------------------------------------------------------------- */

.sc-scope {
	--sc-scope-deep: #0a1b44;
	--sc-scope-mid: #0e2149;
	--sc-scope-accent: #3b74ff;
	--sc-scope-text: rgba(215, 226, 246, 0.78);
	--sc-scope-line: rgba(255, 255, 255, 0.14);
	--sc-scope-pad-x: clamp(24px, 4.5vw, 68px);
	--sc-scope-container: 1500px;

	position: relative;
	isolation: isolate;
	width: 100%;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(160deg, var(--sc-scope-deep) 0%, var(--sc-scope-mid) 100%);
}

.sc-scope *,
.sc-scope *::before,
.sc-scope *::after {
	box-sizing: border-box;
}

/* siatka techniczna, ta sama rodzina co w pozostalych granatowych sekcjach */
.sc-scope::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: clamp(64px, 6.4vw, 96px) clamp(64px, 6.4vw, 96px);
	-webkit-mask-image: radial-gradient(120% 90% at 70% 20%, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 92%);
	mask-image: radial-gradient(120% 90% at 70% 20%, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 92%);
	pointer-events: none;
}

.sc-scope > .ct-section-inner-wrap,
.sc-scope > .sc-scope__inner {
	display: grid !important;
	grid-template-columns: minmax(0, 0.84fr) minmax(0, 1fr);
	align-items: start !important;
	gap: clamp(36px, 4.5vw, 76px);
	width: 100% !important;
	max-width: var(--sc-scope-container) !important;
	margin-inline: auto;
	padding: var(--sc-pad-y) var(--sc-pad-x);
}

/* --- lewa kolumna --- */

.sc-scope .sc-scope__left {
	display: block !important;
	width: 100%;
}

.sc-scope .sc-scope__left > img,
.sc-scope .sc-scope__image {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 4 / 3;
	margin-bottom: clamp(32px, 4vw, 60px);
	border-radius: 16px;
	object-fit: cover;
}

.sc-scope .sc-scope__title {
	margin: 0 0 clamp(18px, 2.2vw, 30px);
	color: #fff;
	font-size: var(--sc-h2);
	font-weight: 400;
	letter-spacing: -0.022em;
	line-height: 1.12;
}

.sc-scope .sc-scope__lead {
	margin: 0;
	max-width: 42ch;
	color: var(--sc-scope-text);
	font-size: var(--sc-lead);
	line-height: 1.6;
}

/* --- lista obszarow --- */

.sc-scope .sc-scope__list {
	display: block !important;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--sc-scope-line);
}

.sc-scope .sc-scope__item {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center !important;
	gap: clamp(20px, 2.4vw, 40px);
	margin: 0;
	padding: clamp(24px, 2.8vw, 38px) 0;
	border-top: 1px solid var(--sc-scope-line);
}

.sc-scope .sc-scope__body {
	display: block !important;
	min-width: 0;
}

.sc-scope .sc-scope__name {
	margin: 0 0 10px;
	color: #fff;
	font-size: clamp(18px, 1.6vw, 23px);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.sc-scope .sc-scope__text {
	margin: 0 0 16px;
	max-width: 52ch;
	color: var(--sc-scope-text);
	font-size: clamp(14px, 1.15vw, 16px);
	line-height: 1.55;
}

.sc-scope .sc-scope__link {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	color: var(--sc-scope-accent);
	font-size: clamp(14px, 1.15vw, 16px);
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	transition: color 180ms ease;
}

/* strzalka rysowana maska - bez ikony w Oxygenie */
.sc-scope .sc-scope__link::after {
	content: "";
	flex: 0 0 auto;
	width: 17px;
	height: 11px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 5.5h14'/%3E%3Cpath d='M10.5 1.5 14.75 5.5 10.5 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 5.5h14'/%3E%3Cpath d='M10.5 1.5 14.75 5.5 10.5 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sc-scope .sc-scope__link:hover,
.sc-scope .sc-scope__link:focus-visible {
	color: #fff;
}

.sc-scope .sc-scope__link:hover::after,
.sc-scope .sc-scope__link:focus-visible::after {
	transform: translateX(5px);
}

/* --- ikona obszaru --- */

/* klasa moze siedziec wprost na obrazku albo na wrapperze */
.sc-scope .sc-scope__icon {
	flex: 0 0 auto;
	display: block;
	width: clamp(30px, 2.6vw, 36px);
	max-width: none;
	height: auto;
	aspect-ratio: 1;
	border-radius: 9px;
	object-fit: contain;
}

.sc-scope .sc-scope__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* --- fokus klawiatury --- */

.sc-scope a:focus-visible {
	outline: 3px solid rgba(59, 116, 255, 0.6);
	outline-offset: 4px;
	border-radius: 6px;
}

/* --- responsywnosc --- */

@media (max-width: 991px) {
	.sc-scope > .ct-section-inner-wrap,
	.sc-scope > .sc-scope__inner {
		grid-template-columns: 1fr;
		gap: clamp(32px, 5vw, 48px);
	}

	.sc-scope .sc-scope__lead {
		max-width: none;
	}

	.sc-scope .sc-scope__left > img,
	.sc-scope .sc-scope__image {
		aspect-ratio: 16 / 10;
	}
}

@media (max-width: 560px) {
	.sc-scope .sc-scope__item {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	/* ikona nad trescia, zeby nie zwezala kolumny tekstu */
	.sc-scope .sc-scope__icon {
		order: -1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-scope .sc-scope__link,
	.sc-scope .sc-scope__link::after {
		transition-duration: 0.01ms !important;
	}
}


/* ===============================================================
   INDUSTRIES
   =============================================================== */

/* ---------------------------------------------------------------
   Sekcja "Branze" - karty z obrazkiem i plakietka
   Struktura powstaje w Oxygenie; selektory maja po dwie klasy,
   zeby wygrac z domyslnymi .ct-div-block / .ct-link-button.
   --------------------------------------------------------------- */

.sc-industries {
	--sc-ind-bg: #0e2149;
	--sc-ind-bg-deep: #0a1836;
	--sc-ind-accent: #4d8cff;
	--sc-ind-text: rgba(214, 226, 247, 0.74);
	--sc-ind-line: rgba(255, 255, 255, 0.11);
	--sc-ind-card: rgba(255, 255, 255, 0.035);
	--sc-ind-radius: 14px;

	width: 100%;
	color: #fff;
	background:
		radial-gradient(58% 42% at 50% 0%, rgba(45, 88, 180, 0.35) 0%, rgba(45, 88, 180, 0) 70%),
		linear-gradient(180deg, var(--sc-ind-bg) 0%, var(--sc-ind-bg-deep) 100%);
}

.sc-industries *,
.sc-industries *::before,
.sc-industries *::after {
	box-sizing: border-box;
}

.sc-industries > .ct-section-inner-wrap,
.sc-industries > .sc-industries__inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100% !important;
	max-width: var(--sc-container) !important;
	margin-inline: auto;
	padding: var(--sc-pad-y) var(--sc-pad-x);
}

/* --- naglowek --- */

.sc-industries .sc-industries__title {
	margin: 0 0 20px;
	color: #fff;
	font-size: var(--sc-h2);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.14;
	text-align: center;
	text-wrap: balance;
}

.sc-industries .sc-industries__lead {
	margin: 0 0 clamp(40px, 4.6vw, 68px);
	max-width: 62ch;
	color: var(--sc-ind-text);
	font-size: var(--sc-lead);
	line-height: 1.55;
	text-align: center;
	text-wrap: balance;
}

/* --- siatka kart --- */

.sc-industries .sc-industries__grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	align-items: stretch;
	gap: clamp(20px, 2.4vw, 34px);
	width: 100%;
	margin: 0 0 clamp(36px, 4vw, 58px);
	padding: 0;
	list-style: none;
}

.sc-industries .sc-industries__card {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	position: relative;
	margin: 0;
	background: var(--sc-ind-card);
	border: 1px solid var(--sc-ind-line);
	border-radius: var(--sc-ind-radius);
	overflow: hidden;
	transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), border-color 240ms ease, background-color 240ms ease;
}

.sc-industries .sc-industries__card:hover {
	transform: translateY(-4px);
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.22);
}

/* --- zdjecie w karcie --- */

.sc-industries .sc-industries__media {
	display: block !important;
	position: relative;
	width: 100%;
}

/* tylko bezposrednie dziecko - inaczej regula lapie tez ikone w plakietce */
.sc-industries .sc-industries__media > img,
.sc-industries .sc-industries__image {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 16 / 11;
	object-fit: cover;
}

/* --- plakietka na zdjeciu --- */

.sc-industries .sc-industries__tag {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	gap: 9px;
	margin: 0;
	padding: 9px 16px;
	color: #fff;
	background: rgba(10, 24, 54, 0.82);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	backdrop-filter: blur(6px);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
}

.sc-industries .sc-industries__tag .sc-industries__tag-icon {
	flex: 0 0 auto;
	display: block;
	width: 15px;
	height: 15px;
	max-width: none;
	object-fit: contain;
}

/* --- tresc karty --- */

.sc-industries .sc-industries__body {
	display: block !important;
	text-align: left;
	flex: 1 1 auto;
	padding: clamp(20px, 2vw, 26px) clamp(20px, 2vw, 26px) clamp(26px, 2.6vw, 34px);
}

.sc-industries .sc-industries__name {
	margin: 0 0 12px;
	color: #fff;
	font-size: clamp(17px, 1.4vw, 20px);
	font-weight: 400;
	letter-spacing: -0.005em;
	line-height: 1.3;
}

.sc-industries .sc-industries__text {
	margin: 0;
	color: var(--sc-ind-text);
	font-size: clamp(14px, 1.1vw, 16px);
	line-height: 1.65;
}

/* --- link pod kartami --- */

.sc-industries .sc-industries__more {
	display: inline-flex !important;
	align-items: center;
	gap: 14px;
	color: var(--sc-ind-accent);
	font-size: clamp(15px, 1.25vw, 18px);
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: color 180ms ease;
}

/* dluga strzalka rysowana maska - bez ikony w Oxygenie */
.sc-industries .sc-industries__more::after {
	content: "";
	flex: 0 0 auto;
	width: 34px;
	height: 12px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 6h31'/%3E%3Cpath d='M26.5 1.5 31.75 6 26.5 10.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 6h31'/%3E%3Cpath d='M26.5 1.5 31.75 6 26.5 10.5'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sc-industries .sc-industries__more:hover,
.sc-industries .sc-industries__more:focus-visible {
	color: #fff;
}

.sc-industries .sc-industries__more:hover::after,
.sc-industries .sc-industries__more:focus-visible::after {
	transform: translateX(6px);
}

/* --- fokus klawiatury --- */

.sc-industries a:focus-visible {
	outline: 3px solid rgba(77, 140, 255, 0.6);
	outline-offset: 5px;
	border-radius: 8px;
}

/* --- responsywnosc --- */

@media (max-width: 560px) {
	.sc-industries .sc-industries__grid {
		grid-template-columns: 1fr;
	}

	.sc-industries .sc-industries__media > img,
	.sc-industries .sc-industries__image {
		aspect-ratio: 16 / 9;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-industries .sc-industries__card,
	.sc-industries .sc-industries__more::after {
		transition-duration: 0.01ms !important;
	}
}


/* ===============================================================
   TRUST
   =============================================================== */

/* ---------------------------------------------------------------
   Sekcja "Zaufali nam"
   Struktura powstaje w Oxygenie, shortcode obsluguje tylko opinie.
   Selektory maja po dwie klasy, zeby wygrac z domyslnymi .ct-div-block.
   --------------------------------------------------------------- */

.sc-trust {
	--sc-trust-bg: #e9f0fe;
	--sc-trust-bg-soft: #f2f6ff;
	--sc-trust-ink: #10203f;
	--sc-trust-accent: #2f6bff;
	--sc-trust-muted: #5b6b86;
	--sc-trust-card: #fff;
	--sc-trust-navy: #0c2874;

	width: 100%;
	color: var(--sc-trust-ink);
	background:
		radial-gradient(70% 55% at 78% 62%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 62%),
		linear-gradient(180deg, var(--sc-trust-bg) 0%, var(--sc-trust-bg-soft) 100%);
}

/* wariant na biale tlo - uzywany na podstronach ofertowych */
.sc-trust.sc-trust--compliance {
	background: #fff;
}

.sc-trust *,
.sc-trust *::before,
.sc-trust *::after {
	box-sizing: border-box;
}

.sc-trust > .ct-section-inner-wrap,
.sc-trust > .sc-trust__inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	width: 100% !important;
	max-width: var(--sc-container) !important;
	margin-inline: auto;
	padding: var(--sc-pad-y) var(--sc-pad-x);
}

.sc-trust .sc-trust__title {
	margin: 0 0 clamp(36px, 4vw, 58px);
	color: var(--sc-trust-ink);
	font-size: var(--sc-h2);
	font-weight: 400;
	letter-spacing: -0.018em;
	line-height: 1.15;
	text-align: center;
}

/* --- pas logotypow --- */

.sc-trust .sc-trust__logos {
	display: block;
	width: 100%;
	margin-bottom: clamp(36px, 4vw, 56px);
	overflow: hidden;
}

/* -------------------------------------------------------------------
   Polaczony modul: klienci i partnerzy w jednym rzedzie

   Dwie osobne sekcje, kazda z wlasnym duzym naglowkiem, zajmowaly pol
   ekranu na siedem logotypow. Tutaj obie grupy stoja obok siebie,
   oddzielone kreska, a naglowki schodza do roli malych etykiet.
   Szerokosc grupy idzie za liczba logotypow (--sc-trust-count), zeby
   pieciu klientom nie bylo ciasno obok dwoch partnerow.
   ------------------------------------------------------------------- */

.sc-trust .sc-trust__groups {
	display: flex;
	align-items: center;
	gap: clamp(26px, 3vw, 52px);
	width: 100%;
	margin-bottom: clamp(30px, 3.4vw, 48px);
}

.sc-trust .sc-trust__group {
	flex: var(--sc-trust-count, 1) 1 0;
	min-width: 0;
}

.sc-trust .sc-trust__group + .sc-trust__group {
	padding-left: clamp(26px, 3vw, 52px);
	border-left: 1px solid #dfe6f3;
}

.sc-trust .sc-trust__label {
	margin: 0 0 clamp(14px, 1.6vw, 20px);
	color: var(--sc-muted);
	font-size: clamp(11px, 0.9vw, 13px);
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
}

/* wewnatrz modulu pas nie ma wlasnego marginesu - rozstaw trzyma siatka */
.sc-trust .sc-trust__group .sc-trust__logos {
	margin-bottom: 0;
}

.sc-trust .sc-trust__group .sc-trust__logos-track {
	gap: clamp(16px, 2vw, 30px);
}

.sc-trust .sc-trust__group .sc-trust__logos-track img {
	max-width: clamp(112px, 10.5vw, 152px);
	max-height: 62px;
}

/* na waskim ekranie grupy schodza pod siebie, kreska zmienia sie w gorna */
@media (max-width: 860px) {
	.sc-trust .sc-trust__groups {
		flex-direction: column;
		align-items: stretch;
		gap: clamp(22px, 4vw, 32px);
	}

	.sc-trust .sc-trust__group + .sc-trust__group {
		padding: clamp(22px, 4vw, 32px) 0 0;
		border-left: 0;
		border-top: 1px solid #dfe6f3;
	}
}


.sc-trust .sc-trust__logos-track {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	/* przy kilku logotypach zostaja razem na srodku; "safe" wraca do
	   lewej, gdy rzad sie nie miesci - inaczej scrollWidth nie widzialby
	   przepelnienia i karuzela by nie ruszyla */
	justify-content: safe center;
	gap: clamp(56px, 7vw, 124px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* dowolny element w rzedzie - obrazek z Oxygena albo wlasny wrapper */
.sc-trust .sc-trust__logos-track > * {
	flex: 0 0 auto;
	margin: 0;
}

.sc-trust .sc-trust__logos-track img {
	display: block;
	width: auto;
	max-width: clamp(124px, 12vw, 176px);
	height: auto;
	max-height: 62px;
	object-fit: contain;
	/* Bez mix-blend-mode: biale tlo jest usuniete z samych plikow (PNG
	   z przezroczystoscia). Mieszanie przestawalo dzialac, gdy karuzela
	   wlaczala animacje toru - animacja tworzy wlasny kontekst nakladania
	   i obrazek mieszal sie z przezroczystym torem zamiast z tlem sekcji. */
}

/* zastepnik, gdy logotyp nie ma jeszcze wgranego pliku */
.sc-trust .sc-trust__logo-name {
	display: block;
	color: #9fb0c9;
	font-size: clamp(15px, 1.3vw, 18px);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	white-space: nowrap;
}

/* karuzela wlacza sie dopiero, gdy logotypy nie mieszcza sie w rzedzie */
.sc-trust .sc-trust__logos.is-marquee {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.sc-trust .sc-trust__logos.is-marquee .sc-trust__logos-track {
	justify-content: flex-start;
	width: max-content;
	animation: sc-trust-marquee var(--sc-trust-marquee-duration, 40s) linear infinite;
}

.sc-trust .sc-trust__logos.is-marquee:hover .sc-trust__logos-track,
.sc-trust .sc-trust__logos.is-marquee:focus-within .sc-trust__logos-track {
	animation-play-state: paused;
}

@keyframes sc-trust-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		/* polowa sciezki - druga polowa to klon pierwszej */
		transform: translate3d(calc(-50% - var(--sc-trust-marquee-gap, 0px) / 2), 0, 0);
	}
}

/* --- kafelki z liczbami --- */

/* Wspolny kafelek z liczba jest w warstwie PRYMITYWY.
   Tutaj zostaje tylko odstep do slidera opinii. */
.sc-trust .sc-trust__stats {
	margin-bottom: clamp(44px, 5vw, 72px);
}

/* --- opinie: shortcode [smartcare_reviews] --- */

.sc-trust__reviews {
	width: 100%;
}

.sc-trust__slider {
	background: var(--sc-trust-card, #fff);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(20, 45, 100, 0.07);
}

.sc-trust__slides {
	display: grid;
	margin: 0;
	padding: clamp(28px, 3.4vw, 48px) clamp(24px, 3.6vw, 56px);
	list-style: none;
}

/* wszystkie slajdy w jednej komorce - wysokosc rowna najwyzszemu, bez skokow */
.sc-trust__slide {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 320ms ease, transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

.sc-trust__slide.is-current {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.sc-trust__quote {
	margin: 0 0 clamp(22px, 2.4vw, 32px);
	color: var(--sc-trust-ink, #10203f);
	font-size: clamp(16px, 1.35vw, 19px);
	font-weight: 400;
	line-height: 1.6;
}

.sc-trust__author {
	display: flex;
	align-items: center;
	gap: 16px;
}

.sc-trust__avatar {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 52px;
	aspect-ratio: 1;
	color: #fff;
	background: var(--sc-trust-navy, #0c2874);
	border-radius: 50%;
	overflow: hidden;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.sc-trust__avatar--photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sc-trust__author-text {
	min-width: 0;
}

.sc-trust__author-name {
	margin: 0 0 2px;
	color: var(--sc-trust-ink, #10203f);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.sc-trust__author-role {
	margin: 0;
	color: var(--sc-trust-muted, #5b6b86);
	font-size: 13px;
	line-height: 1.4;
}

/* --- sterowanie sliderem --- */

.sc-trust__controls {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: clamp(22px, 2.4vw, 32px);
}

.sc-trust__arrow {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 48px;
	aspect-ratio: 1;
	padding: 0;
	color: var(--sc-trust-accent, #2f6bff);
	background: var(--sc-trust-card, #fff);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 6px 18px rgba(20, 45, 100, 0.1);
	cursor: pointer;
	transition: transform 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.sc-trust__arrow::before {
	content: "";
	width: 9px;
	height: 9px;
	margin-left: 3px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}

.sc-trust__arrow[data-direction="prev"]::before {
	margin-left: -3px;
	transform: rotate(-135deg);
}

.sc-trust__arrow:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(20, 45, 100, 0.16);
}

.sc-trust__dots {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 0 10px;
	padding: 0;
	list-style: none;
}

.sc-trust__dots li {
	display: flex;
	margin: 0;
}

.sc-trust__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	background: #b9c4d6;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: width 260ms cubic-bezier(0.22, 1, 0.36, 1), background-color 200ms ease;
}

.sc-trust__dot.is-current {
	width: 34px;
	background: var(--sc-trust-accent, #2f6bff);
}

/* --- fokus klawiatury --- */

.sc-trust button:focus-visible,
.sc-trust a:focus-visible,
.sc-trust__reviews button:focus-visible {
	outline: 3px solid rgba(47, 107, 255, 0.45);
	outline-offset: 3px;
}

/* --- responsywnosc --- */

@media (max-width: 700px) {
	.sc-trust__author {
		gap: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-trust .sc-trust__logos.is-marquee .sc-trust__logos-track {
		animation: none;
	}

	.sc-trust .sc-trust__logos.is-marquee {
		overflow-x: auto;
	}

	.sc-trust__slide,
	.sc-trust__dot,
	.sc-trust__arrow {
		transition-duration: 0.01ms !important;
	}
}


/* ===============================================================
   MAP
   =============================================================== */

/* ---------------------------------------------------------------
   Sekcja "Dzialamy w calej Polsce"
   Struktura powstaje w Oxygenie; pinezke z podpisem stawia
   shortcode [smartcare_map_pin].
   --------------------------------------------------------------- */

.sc-map {
	--sc-map-ink: #10203f;
	--sc-map-navy: #16295c;
	--sc-map-accent: #2f6bff;
	--sc-map-muted: #55647e;

	width: 100%;
	color: var(--sc-map-ink);
	background: #fff;
}

.sc-map *,
.sc-map *::before,
.sc-map *::after {
	box-sizing: border-box;
}

.sc-map > .ct-section-inner-wrap,
.sc-map > .sc-map__inner {
	display: grid !important;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	align-items: center !important;
	gap: clamp(36px, 4.5vw, 76px);
	width: 100% !important;
	max-width: var(--sc-container) !important;
	margin-inline: auto;
	padding: var(--sc-pad-y) var(--sc-pad-x);
}

/* --- kolumna z trescia --- */

.sc-map .sc-map__body {
	display: block !important;
	width: 100%;
}

.sc-map .sc-map__title {
	margin: 0 0 24px;
	color: var(--sc-map-ink);
	font-size: var(--sc-h2);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.14;
}

.sc-map .sc-map__lead {
	margin: 0 0 clamp(30px, 3.4vw, 46px);
	max-width: 46ch;
	color: var(--sc-map-muted);
	font-size: var(--sc-lead);
	line-height: 1.6;
}

/* fragment do wyroznienia zaznacz w Oxygenie jako <strong> */
.sc-map .sc-map__lead strong,
.sc-map .sc-map__lead b {
	color: var(--sc-map-ink);
	font-weight: 500;
}

/* --- sposoby obslugi --- */

.sc-map .sc-map__features {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: clamp(24px, 3vw, 44px);
	margin: 0 0 clamp(30px, 3.4vw, 44px);
	padding: 0;
	list-style: none;
}

.sc-map .sc-map__feature {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 12px;
	margin: 0;
	color: var(--sc-map-ink);
	font-size: clamp(16px, 1.4vw, 20px);
	font-weight: 400;
	line-height: 1.3;
}

.sc-map .sc-map__feature .sc-map__feature-icon {
	flex: 0 0 auto;
	display: block;
	width: clamp(22px, 1.9vw, 26px);
	height: auto;
	max-width: none;
	object-fit: contain;
}

/* --- adres --- */

.sc-map .sc-map__address {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: fit-content;
	min-height: 60px;
	padding: 17px 34px;
	color: #fff;
	background: var(--sc-map-navy);
	border: 1px solid var(--sc-map-navy);
	border-radius: 999px;
	font-size: clamp(15px, 1.25vw, 18px);
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: background-color 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease;
}

.sc-map a.sc-map__address:hover,
.sc-map a.sc-map__address:focus-visible {
	color: #fff;
	background: #0c1c46;
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(12, 28, 70, 0.24);
}

/* --- mapa --- */

.sc-map .sc-map__media {
	display: block !important;
	position: relative;
	width: 100%;
}

.sc-map .sc-map__media > img,
.sc-map .sc-map__image {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}

/* --- pinezka z shortcode'u --- */

.sc-map__pin {
	position: absolute;
	top: var(--sc-pin-top, 58%);
	left: var(--sc-pin-left, 83%);
	z-index: 2;
	display: grid;
	justify-items: center;
	gap: 7px;
	width: max-content;
	/* punkt odniesienia to srodek ikony, nie rog bloku */
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* opakowanie ikony - na nim wisza pulsujace kregi */
.sc-map__pin-marker {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--sc-pin-size, 68px);
	height: var(--sc-pin-size, 68px);
}

.sc-map__pin .sc-map__pin-icon {
	position: relative;
	display: block;
	width: var(--sc-pin-size, 68px);
	height: var(--sc-pin-size, 68px);
	max-width: none;
	object-fit: contain;
}

/* dwa kregi z przesunieta faza - fala wychodzi spod ikony */
.sc-map__pin.is-pulsing .sc-map__pin-marker::before,
.sc-map__pin.is-pulsing .sc-map__pin-marker::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border: 2px solid var(--sc-map-accent, #2f6bff);
	border-radius: 50%;
	animation: sc-map-pulse 2800ms cubic-bezier(0.22, 0.6, 0.35, 1) infinite;
}

.sc-map__pin.is-pulsing .sc-map__pin-marker::after {
	animation-delay: 1400ms;
}

@keyframes sc-map-pulse {
	0% {
		transform: scale(1);
		opacity: 0.5;
	}

	70% {
		opacity: 0;
	}

	100% {
		transform: scale(2.4);
		opacity: 0;
	}
}

/* zapasowa pinezka, gdy w ustawieniach nie ma jeszcze ikony */
.sc-map__pin .sc-map__pin-icon--fallback {
	position: relative;
	background: var(--sc-map-accent, #2f6bff);
	border: 4px solid rgba(47, 107, 255, 0.22);
	border-radius: 50%;
	background-clip: padding-box;
}

.sc-map__pin .sc-map__pin-icon--fallback::after {
	content: "";
	position: absolute;
	inset: 26%;
	background: #fff;
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M20 10.5c0 5.4-8 12-8 12s-8-6.6-8-12a8 8 0 1 1 16 0z'/%3E%3Ccircle cx='12' cy='10.3' r='2.9'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M20 10.5c0 5.4-8 12-8 12s-8-6.6-8-12a8 8 0 1 1 16 0z'/%3E%3Ccircle cx='12' cy='10.3' r='2.9'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sc-map__pin-label {
	color: var(--sc-map-ink, #10203f);
	font-size: clamp(12px, 1vw, 14px);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
}

/* --- fokus klawiatury --- */

.sc-map a:focus-visible {
	outline: 3px solid rgba(47, 107, 255, 0.45);
	outline-offset: 4px;
	border-radius: 999px;
}

/* --- responsywnosc --- */

@media (max-width: 991px) {
	.sc-map > .ct-section-inner-wrap,
	.sc-map > .sc-map__inner {
		grid-template-columns: 1fr;
		gap: clamp(32px, 5vw, 48px);
	}

	.sc-map .sc-map__lead {
		max-width: none;
	}

	.sc-map .sc-map__media {
		max-width: 560px;
		margin-inline: auto;
	}
}

@media (max-width: 560px) {
	.sc-map .sc-map__features {
		gap: 18px 28px;
	}

	.sc-map .sc-map__address {
		width: 100%;
		padding-inline: 20px;
	}

	.sc-map__pin {
		--sc-pin-size: 46px;
	}

	.sc-map__pin-label {
		font-size: 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-map .sc-map__address {
		transition-duration: 0.01ms !important;
	}

	.sc-map__pin.is-pulsing .sc-map__pin-marker::before,
	.sc-map__pin.is-pulsing .sc-map__pin-marker::after {
		animation: none;
		opacity: 0.28;
	}
}


/* ===============================================================
   CONFIGURATOR
   =============================================================== */

/* ---------------------------------------------------------------
   Sekcja "Konfigurator" - naglowek sekcji.
   Sama karta formularza siedzi w Code Blocku w Oxygenie razem
   ze swoim CSS, zeby dalo sie ja pozniej wymienic w calosci.
   --------------------------------------------------------------- */

.sc-configurator {
	--sc-cfg-ink: #10203f;
	--sc-cfg-accent: #2f6bff;
	--sc-cfg-muted: #55647e;

	position: relative;
	isolation: isolate;
	width: 100%;
	overflow: hidden;
	color: var(--sc-cfg-ink);
	background: linear-gradient(180deg, #fff 0%, #fff 38%, #f6f9ff 100%);
}

.sc-configurator *,
.sc-configurator *::before,
.sc-configurator *::after {
	box-sizing: border-box;
}

/* delikatna siatka, jasny odpowiednik tej z sekcji granatowych */
.sc-configurator::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to right, rgba(16, 32, 66, 0.055) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(16, 32, 66, 0.055) 1px, transparent 1px);
	background-size: clamp(72px, 7vw, 104px) clamp(72px, 7vw, 104px);
	background-position: center top;
	-webkit-mask-image: radial-gradient(105% 80% at 50% 34%, #000 0%, rgba(0, 0, 0, 0.45) 55%, transparent 88%);
	mask-image: radial-gradient(105% 80% at 50% 34%, #000 0%, rgba(0, 0, 0, 0.45) 55%, transparent 88%);
	pointer-events: none;
}

.sc-configurator > .ct-section-inner-wrap,
.sc-configurator > .sc-configurator__inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100% !important;
	max-width: var(--sc-container-narrow) !important;
	margin-inline: auto;
	padding: var(--sc-pad-y) var(--sc-pad-x) calc(var(--sc-pad-y) * 1.12);
}

.sc-configurator .sc-configurator__title {
	margin: 0 0 18px;
	max-width: 760px;
	color: var(--sc-cfg-ink);
	font-size: var(--sc-h2);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.16;
	text-align: center;
	text-wrap: balance;
}

.sc-configurator .sc-configurator__lead {
	margin: 0 0 clamp(34px, 4vw, 56px);
	max-width: 720px;
	color: var(--sc-cfg-muted);
	font-size: var(--sc-lead);
	line-height: 1.6;
	text-align: center;
	text-wrap: balance;
}

/* Code Block z formularzem ma sie rozciagnac na szerokosc kolumny. */
.sc-configurator > .ct-section-inner-wrap > .ct-code-block,
.sc-configurator > .sc-configurator__inner > .ct-code-block {
	width: 100%;
}


/* ===============================================================
   FAQ
   =============================================================== */

/* ---------------------------------------------------------------
   Sekcja FAQ
   Naglowki buduje sie w Oxygenie, liste pytan wstawia
   shortcode [smartcare_faq set="..."].
   --------------------------------------------------------------- */

.sc-faq {
	--sc-faq-ink: #16296b;
	--sc-faq-accent: #2f6bff;
	--sc-faq-muted: #55647e;
	--sc-faq-card: #fff;

	width: 100%;
	color: var(--sc-faq-ink);
	background:
		radial-gradient(60% 45% at 82% 62%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 65%),
		linear-gradient(160deg, #eef3fd 0%, #e7effc 100%);
}

.sc-faq *,
.sc-faq *::before,
.sc-faq *::after {
	box-sizing: border-box;
}

.sc-faq > .ct-section-inner-wrap,
.sc-faq > .sc-faq__inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100% !important;
	max-width: var(--sc-container-narrow) !important;
	margin-inline: auto;
	padding: var(--sc-pad-y) var(--sc-pad-x);
}

.sc-faq .sc-faq__title {
	margin: 0 0 clamp(34px, 4vw, 56px);
	color: #10203f;
	font-size: var(--sc-h2);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.12;
	text-align: center;
}

/* --- lista z shortcode'u --- */

.sc-faq__list {
	display: grid;
	gap: clamp(14px, 1.6vw, 22px);
	width: 100%;
}

.sc-faq__item {
	background: var(--sc-faq-card);
	border-radius: 16px;
	box-shadow: 0 10px 28px rgba(22, 45, 105, 0.07);
	transition: box-shadow 240ms ease;
}

.sc-faq__item.is-open {
	box-shadow: 0 14px 36px rgba(22, 45, 105, 0.1);
}

/* h3 jest tu tylko opakowaniem semantycznym - wyglad niesie przycisk
   w srodku, wiec naglowek niczego nie narzuca */
.sc-faq__question {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;
}

.sc-faq__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.6vw, 34px);
	color: var(--sc-faq-ink);
	background: transparent;
	border: 0;
	border-radius: 16px;
	font-family: inherit;
	font-size: clamp(16px, 1.4vw, 20px);
	font-weight: 500;
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
	transition: color 180ms ease;
}

.sc-faq__trigger:hover {
	color: var(--sc-faq-accent);
}

/* plus zmieniajacy sie w minus - dwie kreski, pionowa znika */
.sc-faq__icon {
	position: relative;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	color: var(--sc-faq-accent);
}

.sc-faq__icon::before,
.sc-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	border-radius: 2px;
	transform: translate(-50%, -50%);
	transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
}

.sc-faq__icon::before {
	width: 24px;
	height: 2.5px;
}

.sc-faq__icon::after {
	width: 2.5px;
	height: 24px;
}

.sc-faq__item.is-open .sc-faq__icon::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg);
}

/* --- odpowiedz --- */

/* 0fr -> 1fr animuje realna wysokosc tresci, bez zgadywania max-height */
.sc-faq__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sc-faq__item.is-open .sc-faq__answer {
	grid-template-rows: 1fr;
}

.sc-faq__answer-inner {
	min-height: 0;
	overflow: hidden;
}

.sc-faq__text {
	margin: 0;
	padding: 0 clamp(22px, 2.6vw, 34px) clamp(22px, 2.4vw, 30px);
	color: var(--sc-faq-muted);
	font-size: clamp(15px, 1.2vw, 17px);
	line-height: 1.65;
}

/* --- fokus klawiatury --- */

.sc-faq__trigger:focus-visible {
	outline: 3px solid rgba(47, 107, 255, 0.45);
	outline-offset: -3px;
	border-radius: 16px;
}

/* --- responsywnosc --- */

@media (max-width: 560px) {
	.sc-faq__trigger {
		gap: 14px;
	}

	.sc-faq__icon {
		width: 20px;
		height: 20px;
	}

	.sc-faq__icon::before {
		width: 20px;
	}

	.sc-faq__icon::after {
		height: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-faq__answer,
	.sc-faq__icon::before,
	.sc-faq__icon::after,
	.sc-faq__item {
		transition-duration: 0.01ms !important;
	}
}


/* ===============================================================
   CTA
   =============================================================== */

/* ---------------------------------------------------------------
   Baner CTA na zdjeciu
   Zdjecie ustawiasz jako tlo sekcji w Oxygenie - tutaj dokladamy
   przyciemnienie, jasna karte i przyciski.
   --------------------------------------------------------------- */

.sc-cta {
	--sc-cta-ink: #10203f;
	--sc-cta-navy: #16295c;
	--sc-cta-blue: #2451c6;
	--sc-cta-blue-dark: #173fa9;
	--sc-cta-muted: #4a5b78;
	--sc-cta-card: rgba(244, 246, 251, 0.95);

	position: relative;
	isolation: isolate;
	width: 100%;
	color: var(--sc-cta-ink);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.sc-cta *,
.sc-cta *::before,
.sc-cta *::after {
	box-sizing: border-box;
}

/* Granatowa mgielka na zdjeciu. backdrop-filter wycisza kolory oryginalu,
   a gdy przegladarka go nie wspiera, zostaje samo przyciemnienie. */
.sc-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(90deg, rgba(14, 30, 64, 0.72) 0%, rgba(14, 30, 64, 0.5) 60%, rgba(14, 30, 64, 0.42) 100%);
	backdrop-filter: saturate(0.55) brightness(0.92);
	-webkit-backdrop-filter: saturate(0.55) brightness(0.92);
	pointer-events: none;
}

.sc-cta > .ct-section-inner-wrap,
.sc-cta > .sc-cta__inner {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-end !important;
	position: relative;
	z-index: 1;
	width: 100% !important;
	max-width: var(--sc-container) !important;
	min-height: clamp(360px, 34vw, 500px);
	margin-inline: auto;
	padding: clamp(40px, 4.5vw, 64px) clamp(20px, 4vw, 78px);
}

/* --- jasna karta --- */

.sc-cta .sc-cta__card {
	display: block !important;
	width: 100%;
	max-width: 650px;
	padding: clamp(28px, 3.4vw, 48px);
	background: var(--sc-cta-card);
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(6, 18, 46, 0.24);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.sc-cta .sc-cta__title {
	margin: 0 0 16px;
	color: var(--sc-cta-ink);
	font-size: var(--sc-h3);
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.2;
}

.sc-cta .sc-cta__text {
	margin: 0 0 clamp(24px, 2.6vw, 34px);
	color: var(--sc-cta-muted);
	font-size: clamp(15px, 1.25vw, 18px);
	line-height: 1.6;
}

/* --- przyciski --- */

.sc-cta .sc-cta__actions {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 14px;
}

.sc-cta .sc-cta__phone,
.sc-cta .sc-cta__link {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 11px;
	min-height: 58px;
	padding: 16px 30px;
	border-radius: 999px;
	font-size: clamp(14px, 1.15vw, 17px);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 200ms ease, color 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease;
}

.sc-cta .sc-cta__phone {
	color: #fff;
	background: var(--sc-cta-blue);
	border: 1px solid var(--sc-cta-blue);
	box-shadow: 0 12px 28px rgba(36, 81, 198, 0.28);
}

.sc-cta a.sc-cta__phone:hover,
.sc-cta a.sc-cta__phone:focus-visible {
	color: #fff;
	background: var(--sc-cta-blue-dark);
	border-color: var(--sc-cta-blue-dark);
	transform: translateY(-2px);
}

.sc-cta .sc-cta__phone.is-placeholder {
	cursor: default;
}

.sc-cta .sc-cta__link {
	color: var(--sc-cta-navy);
	background: transparent;
	border: 1.5px solid var(--sc-cta-navy);
	font-size: clamp(12px, 1vw, 14px);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sc-cta a.sc-cta__link:hover,
.sc-cta a.sc-cta__link:focus-visible {
	color: #fff;
	background: var(--sc-cta-navy);
	transform: translateY(-2px);
}

/* --- fokus klawiatury --- */

.sc-cta a:focus-visible {
	outline: 3px solid rgba(36, 81, 198, 0.5);
	outline-offset: 4px;
}

/* --- responsywnosc --- */

@media (max-width: 991px) {
	.sc-cta > .ct-section-inner-wrap,
	.sc-cta > .sc-cta__inner {
		justify-content: center !important;
	}

	.sc-cta::before {
		background: linear-gradient(180deg, rgba(14, 30, 64, 0.62) 0%, rgba(14, 30, 64, 0.72) 100%);
	}

	.sc-cta .sc-cta__card {
		max-width: 640px;
	}
}

@media (max-width: 560px) {
	.sc-cta .sc-cta__actions {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.sc-cta .sc-cta__phone,
	.sc-cta .sc-cta__link {
		width: 100%;
		padding-inline: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-cta .sc-cta__phone,
	.sc-cta .sc-cta__link {
		transition-duration: 0.01ms !important;
	}
}



/* --- warianty banera CTA -----------------------------------------
   Uzywane na podstronach ofertowych. Baza (.sc-cta) zostaje bez zmian,
   zeby wersja ze strony glownej nie drgnela.
   ----------------------------------------------------------------- */

/* karta na srodku zamiast przy prawej krawedzi */
.sc-cta.sc-cta--center > .ct-section-inner-wrap,
.sc-cta.sc-cta--center > .sc-cta__inner {
	justify-content: center !important;
}

/* mocniej przeswitujaca karta - zdjecie pod spodem zostaje czytelne */
.sc-cta.sc-cta--glass .sc-cta__card {
	background: rgba(246, 248, 252, 0.82);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

/* zamiana rol przyciskow: akcja glowna na niebiesko, telefon w ramce */

.sc-cta .sc-cta__link--solid {
	color: #fff;
	background: var(--sc-cta-blue);
	border-color: var(--sc-cta-blue);
	font-size: clamp(14px, 1.15vw, 17px);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: 0 12px 28px rgba(36, 81, 198, 0.28);
}

.sc-cta a.sc-cta__link--solid:hover,
.sc-cta a.sc-cta__link--solid:focus-visible {
	color: #fff;
	background: var(--sc-cta-blue-dark);
	border-color: var(--sc-cta-blue-dark);
}

/* strzalka rysowana maska - bez ikony w Oxygenie */
.sc-cta .sc-cta__link--solid::after {
	content: "";
	flex: 0 0 auto;
	width: 17px;
	height: 11px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 5.5h14'/%3E%3Cpath d='M10.5 1.5 14.75 5.5 10.5 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 5.5h14'/%3E%3Cpath d='M10.5 1.5 14.75 5.5 10.5 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sc-cta .sc-cta__link--solid:hover::after,
.sc-cta .sc-cta__link--solid:focus-visible::after {
	transform: translateX(4px);
}

.sc-cta .sc-cta__phone--ghost {
	color: var(--sc-cta-navy);
	background: transparent;
	border: 1.5px solid var(--sc-cta-navy);
	box-shadow: none;
}

.sc-cta a.sc-cta__phone--ghost:hover,
.sc-cta a.sc-cta__phone--ghost:focus-visible {
	color: #fff;
	background: var(--sc-cta-navy);
	border-color: var(--sc-cta-navy);
}


/* ===============================================================
   FOOTER
   =============================================================== */

/* ---------------------------------------------------------------
   Stopka SmartCare - shortcode [smartcare_footer]
   --------------------------------------------------------------- */

/* Sekcja Oxygena, ktora zawiera stopke, ma isc od krawedzi do krawedzi:
   znosimy content-width, padding i align-items:flex-start z inner-wrapa. */

/* Na krotkich stronach stopka siada na dole okna, a nie w polowie ekranu. */
body.oxygen-body:has(.sc-footer) {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

body.oxygen-body:has(.sc-footer) > .ct-section:has(.sc-footer) {
	margin-top: auto;
}

.ct-section:has(.sc-footer) {
	padding: 0 !important;
}

.ct-section:has(.sc-footer) > .ct-section-inner-wrap {
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	align-items: stretch !important;
}

.ct-shortcode:has(> .sc-footer),
.ct-div-block:has(> .sc-footer),
.ct-inner-content:has(.sc-footer) {
	width: 100% !important;
	max-width: none !important;
	align-self: stretch;
}

.sc-footer {
	--sc-footer-bg: #0b1c3d;
	--sc-footer-bg-deep: #081634;
	--sc-footer-accent: #3b74ff;
	--sc-footer-text: rgba(233, 239, 252, 0.86);
	--sc-footer-line: rgba(255, 255, 255, 0.14);

	width: 100%;
	color: var(--sc-footer-text);
	background: linear-gradient(180deg, var(--sc-footer-bg) 0%, var(--sc-footer-bg-deep) 100%);
	font-size: 16px;
	line-height: 1.6;
}

.sc-footer *,
.sc-footer *::before,
.sc-footer *::after {
	box-sizing: border-box;
}

.sc-footer__inner {
	width: 100%;
	max-width: 1500px;
	margin-inline: auto;
	padding: var(--sc-pad-y) var(--sc-pad-x) clamp(28px, 3vw, 40px);
}

/* --- logo w wersji bialej --- */

.sc-footer__brand {
	display: block;
	width: clamp(190px, 17vw, 240px);
	margin-bottom: clamp(40px, 4.5vw, 64px);
	line-height: 0;
	text-decoration: none;
}

.sc-footer__logo {
	display: block;
	width: 100%;
	height: auto;
	filter: brightness(0) invert(1);
}

/* --- siatka --- */

.sc-footer__grid {
	display: grid;
	/* kolumna z marka jest szersza, kolejne dosypuja sie automatycznie */
	grid-template-columns: 1.45fr;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: clamp(32px, 3.5vw, 56px) clamp(28px, 3.5vw, 64px);
	align-items: start;
}

.sc-footer__col {
	min-width: 0;
}

.sc-footer__col--brand {
	max-width: 420px;
	padding-right: clamp(0px, 3vw, 48px);
}

.sc-footer__intro {
	margin: 0 0 32px;
	max-width: 34ch;
	font-size: 17px;
	line-height: 1.65;
}

/* --- dane kontaktowe --- */

.sc-footer__contact {
	display: grid;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-footer__contact li {
	display: grid;
	grid-template-columns: 24px 1fr;
	align-items: center;
	gap: 14px;
	margin: 0;
}

.sc-footer__contact svg {
	color: var(--sc-footer-accent);
}

.sc-footer__contact a,
.sc-footer__contact span {
	color: inherit;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.sc-footer__contact a {
	transition: color 180ms ease;
}

.sc-footer__contact a:hover,
.sc-footer__contact a:focus-visible {
	color: #fff;
}

/* --- kolumny z linkami --- */

.sc-footer__heading {
	margin: 0 0 26px;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
}

.sc-footer__links {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-footer__links li {
	margin: 0;
}

.sc-footer__link {
	color: inherit;
	text-decoration: none;
	transition: color 180ms ease;
}

.sc-footer__link:hover,
.sc-footer__link:focus-visible {
	color: #fff;
}

/* --- kolumna z dotacjami --- */

.sc-footer__grants {
	display: grid;
	gap: 12px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.sc-footer__grants li {
	margin: 0;
}

.sc-footer__grant {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 18px;
	color: inherit;
	border: 1px dashed rgba(255, 255, 255, 0.3);
	border-radius: 10px;
	font-size: 15px;
	text-decoration: none;
	transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.sc-footer__grant::before {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border: 1.5px solid var(--sc-footer-accent);
	border-radius: 50%;
}

.sc-footer__grant:hover,
.sc-footer__grant:focus-visible {
	color: #fff;
	background: rgba(59, 116, 255, 0.1);
	border-color: rgba(59, 116, 255, 0.55);
	border-style: solid;
}

/* inline, zeby strzalka szla za ostatnim slowem, a nie uciekala w prawo przy zawijaniu */
.sc-footer__more {
	display: inline;
	color: var(--sc-footer-accent);
	font-weight: 700;
	text-decoration: none;
}

.sc-footer__arrow {
	margin-left: 8px;
	vertical-align: -3px;
	transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sc-footer__more:hover .sc-footer__arrow,
.sc-footer__more:focus-visible .sc-footer__arrow {
	transform: translateX(4px);
}

.sc-footer__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	margin-top: 26px;
	min-height: 52px;
	padding: 14px 28px;
	color: #fff;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.38);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 180ms ease, border-color 180ms ease;
}

.sc-footer__button:hover,
.sc-footer__button:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.7);
}

/* --- dolny pasek --- */

.sc-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	margin-top: clamp(48px, 6vw, 84px);
	padding-top: 26px;
	border-top: 1px solid var(--sc-footer-line);
	font-size: 15px;
}

.sc-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-footer__legal li {
	display: flex;
	align-items: center;
	gap: 10px 26px;
	margin: 0;
}

.sc-footer__legal li + li::before {
	content: "";
	width: 3px;
	height: 3px;
	background: currentColor;
	border-radius: 50%;
	opacity: 0.55;
}

.sc-footer__legal-link {
	color: inherit;
	text-decoration: none;
	transition: color 180ms ease;
}

.sc-footer__legal-link:hover,
.sc-footer__legal-link:focus-visible {
	color: #fff;
}

.sc-footer__copyright {
	margin: 0;
}

/* --- fokus klawiatury --- */

.sc-footer a:focus-visible {
	outline: 3px solid rgba(59, 116, 255, 0.55);
	outline-offset: 4px;
	border-radius: 8px;
}

/* --- responsywnosc --- */

@media (max-width: 1180px) {
	.sc-footer__grid {
		grid-template-columns: 1fr 1fr;
		grid-auto-flow: row;
	}

	.sc-footer__col--brand {
		grid-column: 1 / -1;
		max-width: none;
		padding-right: 0;
	}

	.sc-footer__intro {
		max-width: 48ch;
	}
}

@media (max-width: 700px) {
	.sc-footer__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.sc-footer__brand {
		width: min(200px, 60vw);
	}

	.sc-footer__heading {
		margin-bottom: 20px;
	}

	.sc-footer__button {
		width: 100%;
	}

	.sc-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	.sc-footer__legal {
		gap: 10px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-footer * {
		transition-duration: 0.01ms !important;
	}
}


/* ===============================================================
   PACKAGES
   =============================================================== */

.sc-packages {
	/* wysokosc granatowego pasa u dolu, na ktory nachodza karty */
	--sc-pack-band: 300px;
	--sc-pack-navy: #0e2149;
	--sc-pack-card: #eef2fb;
	--sc-pack-border: #dde6f7;
	--sc-pack-accent: #2451c6;

	width: 100%;
	color: var(--sc-ink);
	background: linear-gradient(
		180deg,
		#fbfcff 0%,
		#f5f8ff calc(100% - var(--sc-pack-band)),
		var(--sc-pack-navy) calc(100% - var(--sc-pack-band)),
		var(--sc-pack-navy) 100%
	);
}

.sc-packages *,
.sc-packages *::before,
.sc-packages *::after {
	box-sizing: border-box;
}

.sc-packages > .ct-section-inner-wrap,
.sc-packages > .sc-packages__inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100% !important;
	max-width: var(--sc-container) !important;
	margin-inline: auto;
	padding: var(--sc-pad-y) var(--sc-pad-x) 0;
}

.sc-packages .sc-packages__title {
	margin: 0 0 16px;
	color: var(--sc-ink);
	font-size: var(--sc-h2);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.15;
	text-align: center;
	text-wrap: balance;
}

.sc-packages .sc-packages__lead {
	margin: 0 0 clamp(48px, 5.5vw, 84px);
	max-width: 720px;
	color: var(--sc-muted);
	font-size: var(--sc-lead);
	line-height: 1.6;
	text-align: center;
	text-wrap: balance;
}

/* --- siatka kart --- */

.sc-packages .sc-packages__grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	align-items: stretch;
	gap: clamp(20px, 2.4vw, 34px);
	width: 100%;
	/* miejsce na plakietke wystajaca ponad wyrozniona karte */
	padding-top: 22px;
	padding-bottom: clamp(28px, 3vw, 44px);
}

.sc-packages .sc-packages__card {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	position: relative;
	padding: clamp(26px, 2.8vw, 38px) clamp(22px, 2.4vw, 32px) clamp(26px, 2.8vw, 36px);
	background: var(--sc-pack-card);
	/* ta sama grubosc co w karcie wyroznionej - inaczej przyciski
	   rozjezdzaja sie o pol piksela */
	border: 1.5px solid var(--sc-pack-border);
	border-radius: 20px;
}

/* wyrozniona karta: biala, podniesiona, z niebieska ramka */
.sc-packages .sc-packages__card.is-featured {
	z-index: 1;
	background: #fff;
	border: 1.5px solid var(--sc-pack-accent);
	box-shadow: 0 24px 60px rgba(18, 40, 92, 0.14);
}

.sc-packages .sc-packages__badge {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 2;
	padding: 9px 20px;
	color: #fff;
	background: var(--sc-pack-accent);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	/* siada okrakiem na gornej krawedzi karty */
	transform: translate(-50%, -50%);
}

.sc-packages .sc-packages__tier {
	margin: 0 0 12px;
	color: var(--sc-navy);
	font-size: clamp(14px, 1.2vw, 16px);
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.2;
}

.sc-packages .sc-packages__price {
	margin: 0;
	color: var(--sc-navy);
	font-size: clamp(20px, 1.9vw, 26px);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.sc-packages .sc-packages__note {
	margin: 6px 0 0;
	color: #93a2b8;
	font-size: 13px;
	line-height: 1.4;
}

/* kreska pod cena */
.sc-packages .sc-packages__for {
	margin: clamp(20px, 2.2vw, 28px) 0 0;
	padding: clamp(20px, 2.2vw, 28px) 0 0;
	border-top: 1px solid var(--sc-pack-border);
	color: var(--sc-muted);
	font-size: clamp(14px, 1.1vw, 15px);
	line-height: 1.55;
}

.sc-packages .sc-packages__for strong,
.sc-packages .sc-packages__for b {
	color: var(--sc-navy);
	font-weight: 700;
}

.sc-packages .sc-packages__card.is-featured .sc-packages__for {
	border-top-color: #e4eaf6;
}

/* --- lista cech --- */

.sc-packages .sc-packages__list {
	display: grid !important;
	gap: 14px;
	margin: clamp(18px, 2vw, 24px) 0 clamp(26px, 3vw, 36px);
	padding: 0;
	list-style: none;
}

.sc-packages .sc-packages__item {
	display: grid !important;
	grid-template-columns: 18px minmax(0, 1fr);
	align-items: start !important;
	gap: 12px;
	margin: 0;
	color: var(--sc-muted);
	font-size: clamp(14px, 1.1vw, 15px);
	line-height: 1.5;
}

/* ptaszek rysowany maska - bez ikony w Oxygenie */
.sc-packages .sc-packages__item::before {
	content: "";
	width: 18px;
	height: 18px;
	margin-top: 2px;
	background: var(--sc-pack-accent);
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.5 7 13l7.5-8'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.5 7 13l7.5-8'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- przyciski kart --- */

.sc-packages .sc-packages__cta {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	/* przyciski wszystkich kart wyrownuja sie do dolu */
	margin-top: auto;
	min-height: 56px;
	padding: 16px 24px;
	color: var(--sc-navy);
	background: #fff;
	border: 1px solid var(--sc-pack-border);
	border-radius: 999px;
	font-size: clamp(14px, 1.15vw, 16px);
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sc-packages a.sc-packages__cta:hover,
.sc-packages a.sc-packages__cta:focus-visible {
	color: var(--sc-navy);
	border-color: #b9c9e8;
	transform: translateY(-2px);
}

.sc-packages .sc-packages__cta--solid {
	color: #fff;
	background: var(--sc-pack-accent);
	border-color: var(--sc-pack-accent);
	font-weight: 600;
	box-shadow: 0 12px 28px rgba(36, 81, 198, 0.26);
}

.sc-packages a.sc-packages__cta--solid:hover,
.sc-packages a.sc-packages__cta--solid:focus-visible {
	color: #fff;
	background: #1c40a4;
	border-color: #1c40a4;
}

.sc-packages a:focus-visible {
	outline: 3px solid rgba(36, 81, 198, 0.45);
	outline-offset: 3px;
}

@media (max-width: 991px) {
	.sc-packages {
		--sc-pack-band: 210px;
	}
}


/* ===============================================================
   STEPS
   =============================================================== */

.sc-steps {
	--sc-steps-gap: clamp(20px, 2.6vw, 40px);
	--sc-step-size: clamp(44px, 3.6vw, 52px);
	--sc-steps-navy: #0e2149;
	--sc-steps-deep: #0a1a3c;

	position: relative;
	isolation: isolate;
	width: 100%;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(180deg, var(--sc-steps-navy) 0%, var(--sc-steps-deep) 100%);
}

.sc-steps *,
.sc-steps *::before,
.sc-steps *::after {
	box-sizing: border-box;
}

.sc-steps::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: var(--sc-grid-size) var(--sc-grid-size);
	-webkit-mask-image: radial-gradient(110% 90% at 78% 60%, #000 0%, rgba(0, 0, 0, 0.45) 55%, transparent 92%);
	mask-image: radial-gradient(110% 90% at 78% 60%, #000 0%, rgba(0, 0, 0, 0.45) 55%, transparent 92%);
	pointer-events: none;
}

.sc-steps > .ct-section-inner-wrap,
.sc-steps > .sc-steps__inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	width: 100% !important;
	max-width: var(--sc-container) !important;
	margin-inline: auto;
	padding: var(--sc-pad-y) var(--sc-pad-x);
}

.sc-steps .sc-steps__title {
	margin: 0 0 clamp(34px, 4vw, 58px);
	color: #fff;
	font-size: var(--sc-h2);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.14;
}

/* --- kroki --- */

.sc-steps .sc-steps__list {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	align-items: start;
	gap: clamp(32px, 4vw, 48px) var(--sc-steps-gap);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-steps .sc-steps__item {
	display: block !important;
	position: relative;
	margin: 0;
}

/* przerywana linia do nastepnego kroku */
.sc-steps .sc-steps__item::after {
	content: "";
	position: absolute;
	top: calc(var(--sc-step-size) / 2);
	left: calc(var(--sc-step-size) + 12px);
	right: calc(-1 * var(--sc-steps-gap) + 12px);
	border-top: 1px dashed rgba(255, 255, 255, 0.32);
}

.sc-steps .sc-steps__item:last-child::after {
	content: none;
}

.sc-steps .sc-steps__num {
	display: grid !important;
	place-items: center;
	width: var(--sc-step-size);
	height: var(--sc-step-size);
	margin: 0 0 clamp(20px, 2.4vw, 30px);
	color: #fff;
	background: #2451c6;
	border-radius: 50%;
	font-size: clamp(15px, 1.3vw, 18px);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.sc-steps .sc-steps__name {
	margin: 0 0 12px;
	color: #fff;
	font-size: clamp(17px, 1.5vw, 21px);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.sc-steps .sc-steps__text {
	margin: 0;
	max-width: 34ch;
	color: rgba(214, 226, 247, 0.74);
	font-size: clamp(14px, 1.1vw, 16px);
	line-height: 1.55;
}

@media (max-width: 700px) {
	/* w jednej kolumnie linia laczaca nie ma sensu */
	.sc-steps .sc-steps__item::after {
		content: none;
	}
}


/* ===============================================================
   CASES
   =============================================================== */

.sc-cases {
	/* ile kart widac naraz - zmienia sie w breakpointach nizej */
	--sc-cases-per-view: 3;
	--sc-cases-gap: clamp(20px, 2.2vw, 32px);
	--sc-cases-border: #dfe6f3;
	--sc-cases-accent: #2f6bff;

	width: 100%;
	color: var(--sc-ink);
	background: #fff;
}

.sc-cases *,
.sc-cases *::before,
.sc-cases *::after {
	box-sizing: border-box;
}

.sc-cases > .ct-section-inner-wrap,
.sc-cases > .sc-cases__inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	width: 100% !important;
	max-width: var(--sc-container) !important;
	margin-inline: auto;
	padding: var(--sc-pad-y) var(--sc-pad-x);
}

.sc-cases .sc-cases__title {
	margin: 0 0 16px;
	color: var(--sc-ink);
	font-size: var(--sc-h2);
	font-weight: 400;
	letter-spacing: -0.022em;
	line-height: 1.12;
}

.sc-cases .sc-cases__lead {
	margin: 0 0 clamp(34px, 4vw, 56px);
	max-width: 640px;
	color: var(--sc-muted);
	font-size: var(--sc-lead);
	line-height: 1.6;
}

/* --- karuzela --- */

.sc-cases__carousel {
	width: 100%;
}

.sc-cases .sc-cases__track {
	display: flex;
	gap: var(--sc-cases-gap);
	margin: 0;
	padding: 4px 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* pasek przewijania chowamy - do nawigacji sluza strzalki i gest */
	scrollbar-width: none;
}

.sc-cases__track::-webkit-scrollbar {
	display: none;
}

.sc-cases__track:focus-visible {
	outline: 3px solid rgba(47, 107, 255, 0.45);
	outline-offset: 4px;
	border-radius: 18px;
}

/* .sc-cases przed klasa: Oxygen ma :is(li, div._important){display:list-item},
   ktore ma wyzsza specyficznosc niz pojedyncza klasa na <li> */
.sc-cases .sc-cases__card {
	display: flex;
	flex-direction: column;
	flex: 0 0 calc(
		(100% - (var(--sc-cases-per-view) - 1) * var(--sc-cases-gap)) / var(--sc-cases-per-view)
	);
	margin: 0;
	padding: clamp(24px, 2.6vw, 34px) clamp(22px, 2.4vw, 30px);
	background: #fbfcff;
	border: 1px solid var(--sc-cases-border);
	border-radius: 16px;
	scroll-snap-align: start;
}

.sc-cases__logo {
	display: block;
	margin-bottom: 20px;
}

.sc-cases__logo img {
	display: block;
	width: auto;
	max-width: 160px;
	height: auto;
	max-height: 54px;
	object-fit: contain;
}

.sc-cases__tag {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	min-height: 30px;
	margin-bottom: 20px;
	padding: 6px 14px;
	color: var(--sc-navy);
	background: #fff;
	border: 1px solid var(--sc-cases-border);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

.sc-cases .sc-cases__name {
	margin: 0 0 18px;
	color: var(--sc-ink);
	font-size: clamp(16px, 1.35vw, 19px);
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1.35;
}

.sc-cases .sc-cases__points {
	display: grid;
	gap: 12px;
	margin: 0 0 clamp(22px, 2.4vw, 30px);
	padding: 0;
	list-style: none;
}

/* -------------------------------------------------------------------
   Realizacja w wersji rozbudowanej (.sc-cases__case)

   Pelne case study z dokumentu klienta: wyzwanie, zakres wsparcia,
   efekt i podsumowanie. Zajmuje cala szerokosc sekcji, bo skrocona
   karta w jednej z trzech kolumn nie miesci tej tresci.
   ------------------------------------------------------------------- */

.sc-cases .sc-cases__list {
	display: grid;
	gap: clamp(22px, 2.4vw, 34px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-cases .sc-cases__case {
	display: block;
	margin: 0;
	padding: clamp(26px, 2.8vw, 42px) clamp(24px, 2.6vw, 40px);
	background: #fbfcff;
	border: 1px solid var(--sc-cases-border);
	border-radius: 20px;
}

.sc-cases .sc-cases__case .sc-cases__name {
	margin: 14px 0 clamp(24px, 2.6vw, 34px);
	font-size: clamp(19px, 1.7vw, 25px);
	font-weight: 600;
	line-height: 1.3;
}

.sc-cases .sc-cases__layout {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: clamp(22px, 2.4vw, 32px) clamp(28px, 3vw, 48px);
}

.sc-cases .sc-cases__block {
	min-width: 0;
}

/* Wyzwanie i zakres biegna przez cala szerokosc, efekt i podsumowanie
   staja obok siebie - inaczej pierwszy akapit zostawialby pusta polowe. */
.sc-cases .sc-cases__case .sc-cases__block:first-child,
.sc-cases .sc-cases__case .sc-cases__block--scope {
	grid-column: 1 / -1;
}

/* siedem krotkich punktow czyta sie lepiej w dwoch kolumnach */
.sc-cases .sc-cases__block--scope .sc-cases__points {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px clamp(28px, 3vw, 48px);
	margin-bottom: 0;
}

.sc-cases .sc-cases__label {
	margin: 0 0 10px;
	color: var(--sc-cases-accent);
	font-size: clamp(12px, 1vw, 14px);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.sc-cases .sc-cases__copy {
	margin: 0;
	color: var(--sc-muted);
	font-size: clamp(14px, 1.15vw, 16px);
	line-height: 1.6;
}

.sc-cases .sc-cases__copy + .sc-cases__copy {
	margin-top: 0.75em;
}

.sc-cases .sc-cases__block--gain .sc-cases__copy {
	color: var(--sc-ink);
}

@media (max-width: 820px) {
	.sc-cases .sc-cases__layout,
	.sc-cases .sc-cases__block--scope .sc-cases__points {
		grid-template-columns: minmax(0, 1fr);
	}
}

.sc-cases .sc-cases__point {
	display: grid;
	grid-template-columns: 12px minmax(0, 1fr);
	align-items: start;
	gap: 10px;
	margin: 0;
	color: var(--sc-muted);
	font-size: clamp(13px, 1.05vw, 15px);
	line-height: 1.5;
}

/* plus zamiast punktora - zgodnie z projektem */
.sc-cases .sc-cases__point::before {
	content: "+";
	color: var(--sc-cases-accent);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
}

/* wskaznik siada na dole karty, wiec karty roznej dlugosci maja go w jednej linii */
.sc-cases .sc-cases__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: auto 0 0;
	padding-top: 6px;
}

.sc-cases__meta span {
	color: var(--sc-muted);
	font-size: clamp(13px, 1.05vw, 15px);
	line-height: 1.3;
}

.sc-cases__meta strong {
	color: var(--sc-cases-accent);
	font-size: clamp(15px, 1.25vw, 18px);
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

/* --- strzalki --- */

.sc-cases__controls {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: clamp(28px, 3.4vw, 46px);
}

.sc-cases__arrow {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	padding: 0;
	color: var(--sc-navy);
	background: #fff;
	border: 1px solid var(--sc-cases-border);
	border-radius: 50%;
	cursor: pointer;
	transition: border-color 180ms ease, transform 180ms ease, opacity 180ms ease;
}

.sc-cases__arrow::before {
	content: "";
	width: 20px;
	height: 13px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 13' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 6.5h17.5'/%3E%3Cpath d='M13.5 1.5 18.5 6.5 13.5 11.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 13' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 6.5h17.5'/%3E%3Cpath d='M13.5 1.5 18.5 6.5 13.5 11.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sc-cases__arrow[data-direction="prev"]::before {
	transform: scaleX(-1);
}

.sc-cases__arrow:hover {
	border-color: #b6c6e4;
	transform: translateY(-2px);
}

.sc-cases__arrow:focus-visible {
	outline: 3px solid rgba(47, 107, 255, 0.45);
	outline-offset: 3px;
}

/* na koncu listy strzalka gasnie, ale zostaje w ukladzie */
.sc-cases__arrow[aria-disabled="true"] {
	opacity: 0.35;
	cursor: default;
	transform: none;
}

/* --- responsywnosc --- */

@media (max-width: 1100px) {
	.sc-cases {
		--sc-cases-per-view: 2;
	}
}

@media (max-width: 700px) {
	.sc-cases {
		--sc-cases-per-view: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-cases__track {
		scroll-behavior: auto;
	}

	.sc-cases__arrow {
		transition-duration: 0.01ms;
	}
}


/* ===============================================================
   RESULTS
   =============================================================== */

.sc-results {
	width: 100%;
	color: var(--sc-ink);
	background: linear-gradient(180deg, #fafcff 0%, #f4f8ff 100%);
}

.sc-results *,
.sc-results *::before,
.sc-results *::after {
	box-sizing: border-box;
}

.sc-results > .ct-section-inner-wrap,
.sc-results > .sc-results__inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100% !important;
	max-width: var(--sc-container) !important;
	margin-inline: auto;
	padding: var(--sc-pad-y) var(--sc-pad-x);
}

.sc-results .sc-results__title {
	margin: 0 0 clamp(38px, 4.4vw, 62px);
	max-width: 860px;
	color: var(--sc-ink);
	font-size: var(--sc-h2);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.15;
	text-align: center;
	text-wrap: balance;
}


/* --- wariant sekcji zakresu: lista bez opisow, zdjecie pod tekstem ---
   Ten sam uklad co .sc-scope, wiec baza zostaje nietknieta.
   ------------------------------------------------------------------- */

/* zdjecie ida pod naglowek zamiast nad niego */
.sc-scope.sc-scope--plain .sc-scope__left > img,
.sc-scope.sc-scope--plain .sc-scope__image {
	margin: clamp(28px, 3.4vw, 46px) 0 0;
	aspect-ratio: 1 / 1;
}

/* pozycja to jedna linia tekstu - bez opisu, linku i ikony */
.sc-scope.sc-scope--plain .sc-scope__name {
	margin: 0;
	font-size: clamp(16px, 1.5vw, 20px);
	font-weight: 400;
	line-height: 1.4;
}

.sc-scope.sc-scope--plain .sc-scope__item {
	grid-template-columns: minmax(0, 1fr);
	padding-block: clamp(20px, 2.4vw, 30px);
}

/* dolna kreska nalezy do wiersza kontaktowego, wiec lista jej nie rysuje */
.sc-scope.sc-scope--plain .sc-scope__list {
	border-bottom: 0;
}

/* --- wiersz kontaktowy pod lista --- */

.sc-scope .sc-scope__contact {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 14px clamp(20px, 2.6vw, 40px);
	margin: 0;
	padding: clamp(24px, 2.8vw, 38px) 0 0;
	border-top: 1px solid var(--sc-scope-line);
}

.sc-scope .sc-scope__contact-item {
	display: inline-flex !important;
	align-items: center;
	gap: 12px;
	color: #fff;
	font-size: clamp(15px, 1.35vw, 19px);
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	transition: color 180ms ease;
}

.sc-scope .sc-scope__contact-item svg {
	flex: 0 0 auto;
	color: var(--sc-scope-accent);
}

.sc-scope a.sc-scope__contact-item:hover,
.sc-scope a.sc-scope__contact-item:focus-visible {
	color: var(--sc-scope-accent);
}

.sc-scope .sc-scope__contact-item.is-placeholder {
	cursor: default;
}

@media (max-width: 560px) {
	.sc-scope .sc-scope__contact-item {
		white-space: normal;
		overflow-wrap: anywhere;
	}
}


/* ===============================================================
   TABS
   =============================================================== */

.sc-tabs {
	--sc-tabs-gap: clamp(28px, 3.4vw, 48px);
	--sc-tabs-caret: 14px;
	--sc-tabs-panel-bg: #eaf0fd;
	--sc-tabs-border: #dde6f7;
	--sc-tabs-accent: #2451c6;

	position: relative;
	isolation: isolate;
	width: 100%;
	overflow: hidden;
	color: var(--sc-ink);
	background: #fff;
}

.sc-tabs *,
.sc-tabs *::before,
.sc-tabs *::after {
	box-sizing: border-box;
}

/* delikatna siatka tylko w gornej czesci sekcji */
.sc-tabs::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to right, rgba(16, 32, 66, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(16, 32, 66, 0.05) 1px, transparent 1px);
	background-size: var(--sc-grid-size) var(--sc-grid-size);
	background-position: center top;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 70%);
	mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 70%);
	pointer-events: none;
}

/* Panel ma isc od krawedzi do krawedzi, wiec kontener trzymaja
   pojedyncze elementy, a nie wspolny wrapper sekcji. */
.sc-tabs > .ct-section-inner-wrap,
.sc-tabs > .sc-tabs__inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0;
	padding: var(--sc-pad-y) 0 0;
}

.sc-tabs .sc-tabs__eyebrow,
.sc-tabs .sc-tabs__title {
	width: 100%;
	max-width: var(--sc-container);
	margin-inline: auto;
	padding-inline: var(--sc-pad-x);
}

.sc-tabs .sc-tabs__title {
	margin: 0 0 var(--sc-tabs-gap);
	color: var(--sc-ink);
	font-size: var(--sc-h2);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.16;
	text-align: center;
	text-wrap: balance;
}

/* --- przyciski zakladek -------------------------------------------
   Zakladki siedza we wspolnym torze, jak przelacznik - od razu widac,
   ze to jeden wybor z kilku, a nie trzy luzne przyciski. Numer przed
   nazwa mowi, ze to kolejne etapy.
   ------------------------------------------------------------------ */

.sc-tabs .sc-tabs__nav {
	/* padding toru (6) + ramka toru (1) + ramka zakladki (1) + 1 px
	   zakladki na panel, zeby na styku nie zostala szczelina */
	--sc-tabs-track: 9px;

	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
	justify-content: center !important;
	gap: 6px;
	width: auto;
	max-width: calc(100% - 2 * var(--sc-pad-x));
	margin: 0 auto var(--sc-tabs-gap);
	padding: 6px;
	background: #eef3fd;
	border: 1px solid var(--sc-tabs-border);
	border-radius: 18px;
	counter-reset: sc-tab;
}

.sc-tabs .sc-tabs__tab {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px;
	position: relative;
	flex: 0 1 auto;
	min-height: 58px;
	margin: 0;
	padding: 14px clamp(20px, 2.2vw, 30px) 14px clamp(14px, 1.4vw, 18px);
	color: var(--sc-ink);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 13px;
	font-size: clamp(15px, 1.25vw, 18px);
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	counter-increment: sc-tab;
	transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

/* numer etapu */
.sc-tabs .sc-tabs__tab::before {
	content: counter(sc-tab);
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	color: var(--sc-tabs-accent);
	background: #fff;
	border: 1px solid var(--sc-tabs-border);
	border-radius: 50%;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
}

.sc-tabs .sc-tabs__tab:hover {
	background: #fff;
	border-color: var(--sc-tabs-border);
}

.sc-tabs .sc-tabs__tab.is-active {
	color: #fff;
	background: var(--sc-tabs-accent);
	border-color: var(--sc-tabs-accent);
	box-shadow: 0 12px 26px rgba(36, 81, 198, 0.24);
}

.sc-tabs .sc-tabs__tab.is-active::before {
	color: #fff;
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.35);
}

/* dziobek pod aktywna zakladka - siada dokladnie na krawedzi panelu */
.sc-tabs .sc-tabs__tab.is-active::after {
	content: "";
	position: absolute;
	top: calc(100% + var(--sc-tabs-track) + var(--sc-tabs-gap) - var(--sc-tabs-caret));
	left: 50%;
	width: 0;
	height: 0;
	border-right: var(--sc-tabs-caret) solid transparent;
	border-bottom: var(--sc-tabs-caret) solid var(--sc-tabs-panel-bg);
	border-left: var(--sc-tabs-caret) solid transparent;
	transform: translateX(-50%);
}

.sc-tabs .sc-tabs__tab:focus-visible {
	outline: 3px solid rgba(36, 81, 198, 0.45);
	outline-offset: 3px;
}

/* --- panele --- */

.sc-tabs .sc-tabs__panels {
	display: block !important;
	width: 100%;
	background: var(--sc-tabs-panel-bg);
}

.sc-tabs .sc-tabs__panel {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center !important;
	gap: clamp(28px, 4vw, 64px);
	width: 100%;
	max-width: var(--sc-container);
	margin-inline: auto;
	padding: clamp(36px, 4vw, 60px) var(--sc-pad-x);
}

.sc-tabs .sc-tabs__panel[hidden] {
	display: none !important;
}

/* kolumna tekstu - opakowanie dokladane przez JS */
.sc-tabs .sc-tabs__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.sc-tabs .sc-tabs__step {
	margin: 0 0 clamp(18px, 2vw, 24px);
	color: var(--sc-tabs-accent);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.2;
	text-transform: uppercase;
}

.sc-tabs .sc-tabs__list {
	display: grid !important;
	gap: clamp(18px, 2vw, 26px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-tabs .sc-tabs__point {
	display: grid !important;
	grid-template-columns: 26px minmax(0, 1fr);
	align-items: start !important;
	gap: 16px;
	margin: 0;
	color: var(--sc-ink);
	font-size: clamp(17px, 1.45vw, 20px);
	line-height: 1.5;
}

/* znacznik: ptaszek w kolku - czytelniejszy niz kropka przy
   wiekszym stopniu pisma */
.sc-tabs .sc-tabs__point::before {
	content: "";
	width: 26px;
	height: 26px;
	margin-top: 0.08em;
	background:
		url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%232451c6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 13.4 3.3 3.2L18 9.8'/%3E%3C/svg%3E") center / 26px 26px no-repeat,
		#fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--sc-tabs-border);
}

/* przejscie do nastepnego etapu - dokladane przez JS */
.sc-tabs .sc-tabs__next {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	margin-top: clamp(28px, 3vw, 38px);
	padding: 13px 22px;
	color: var(--sc-tabs-accent);
	background: #fff;
	border: 1px solid var(--sc-tabs-border);
	border-radius: 999px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sc-tabs .sc-tabs__next::after {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 11px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 5.5h14'/%3E%3Cpath d='M10.5 1.5 14.75 5.5 10.5 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 5.5h14'/%3E%3Cpath d='M10.5 1.5 14.75 5.5 10.5 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sc-tabs .sc-tabs__next:hover {
	color: #fff;
	background: var(--sc-tabs-accent);
	border-color: var(--sc-tabs-accent);
}

.sc-tabs .sc-tabs__next:hover::after {
	transform: translateX(4px);
}

.sc-tabs .sc-tabs__next:focus-visible {
	outline: 3px solid rgba(36, 81, 198, 0.45);
	outline-offset: 3px;
}

/* Zdjecie nie moze wyznaczac wysokosci panelu - inaczej krotka lista
   wisi posrodku z pustka nad i pod soba. */
.sc-tabs .sc-tabs__panel > img,
.sc-tabs .sc-tabs__image {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	max-height: clamp(260px, 26vw, 380px);
	object-fit: contain;
	object-position: center;
}

/* --- responsywnosc --- */

@media (max-width: 860px) {
	.sc-tabs .sc-tabs__panel {
		grid-template-columns: 1fr;
	}

	/* w kolumnie dziobek nie wskazywalby juz na wlasciwa zakladke */
	.sc-tabs .sc-tabs__tab.is-active::after {
		content: none;
	}
}

@media (max-width: 640px) {
	.sc-tabs .sc-tabs__nav {
		flex-direction: column !important;
		width: calc(100% - 2 * var(--sc-pad-x));
	}

	.sc-tabs .sc-tabs__tab {
		justify-content: flex-start !important;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-tabs .sc-tabs__tab,
	.sc-tabs .sc-tabs__tab::before,
	.sc-tabs .sc-tabs__next,
	.sc-tabs .sc-tabs__next::after {
		transition-duration: 0.01ms !important;
	}
}


/* ===============================================================
   CALLS
   Naglowek sekcji. Sama lista naborow siedzi w Code Blocku
   w Oxygenie - docelowo zastapi ja CPT.
   =============================================================== */

.sc-calls {
	width: 100%;
	color: var(--sc-ink);
	background: #fff;
}

.sc-calls *,
.sc-calls *::before,
.sc-calls *::after {
	box-sizing: border-box;
}

.sc-calls > .ct-section-inner-wrap,
.sc-calls > .sc-calls__inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100% !important;
	max-width: var(--sc-container) !important;
	margin-inline: auto;
	padding: var(--sc-pad-y) var(--sc-pad-x);
}

.sc-calls .sc-calls__title {
	margin: 0 0 clamp(30px, 3.4vw, 48px);
	max-width: 900px;
	color: var(--sc-ink);
	font-size: var(--sc-h2);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.16;
	text-align: center;
	text-wrap: balance;
}

/* Code Block z lista naborow ma sie rozciagnac na szerokosc kolumny. */
.sc-calls > .ct-section-inner-wrap > .ct-code-block,
.sc-calls > .sc-calls__inner > .ct-code-block {
	width: 100%;
}


/* ===============================================================
   FIGURE
   Granatowy pas z wyrozniona liczba po lewej i tekstem po prawej.
   =============================================================== */

.sc-figure {
	--sc-figure-deep: #0b1d4c;
	--sc-figure-mid: #14306e;
	--sc-figure-accent: #4d8cff;
	--sc-figure-text: rgba(219, 229, 248, 0.82);
	--sc-figure-line: rgba(255, 255, 255, 0.15);

	position: relative;
	isolation: isolate;
	width: 100%;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(120deg, var(--sc-figure-deep) 0%, var(--sc-figure-mid) 100%);
}

.sc-figure *,
.sc-figure *::before,
.sc-figure *::after {
	box-sizing: border-box;
}

/* wielki znak procentu jako tlo - rysowany typografia, bez pliku */
.sc-figure::before {
	content: "%";
	position: absolute;
	top: 50%;
	left: clamp(-90px, -4vw, -30px);
	z-index: -1;
	color: rgba(255, 255, 255, 0.045);
	font-size: clamp(280px, 26vw, 420px);
	font-weight: 700;
	line-height: 0.8;
	letter-spacing: -0.04em;
	transform: translateY(-50%);
	pointer-events: none;
	user-select: none;
}

.sc-figure > .ct-section-inner-wrap,
.sc-figure > .sc-figure__inner {
	display: grid !important;
	grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
	align-items: center !important;
	gap: clamp(28px, 4vw, 64px);
	width: 100% !important;
	max-width: var(--sc-container) !important;
	margin-inline: auto;
	padding: clamp(40px, 4.6vw, 72px) var(--sc-pad-x);
}

/* --- kolumna z liczba --- */

.sc-figure .sc-figure__side {
	display: block !important;
	align-self: stretch;
	padding-right: clamp(20px, 3vw, 48px);
	border-right: 1px solid var(--sc-figure-line);
}

.sc-figure .sc-figure__value {
	display: block;
	margin: 0 0 14px;
	color: var(--sc-figure-accent);
	font-size: clamp(44px, 5.4vw, 80px);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.05;
}

/* "do" jest mniejsze od samej liczby */
.sc-figure .sc-figure__prefix {
	font-size: 0.55em;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.sc-figure .sc-figure__caption {
	margin: 0;
	color: rgba(214, 226, 247, 0.62);
	font-size: clamp(14px, 1.15vw, 16px);
	line-height: 1.5;
}

.sc-figure .sc-figure__caption em,
.sc-figure .sc-figure__caption i {
	font-style: italic;
}

/* --- kolumna z tekstem --- */

.sc-figure .sc-figure__body {
	display: block !important;
	min-width: 0;
}

.sc-figure .sc-figure__title {
	margin: 0 0 clamp(16px, 1.8vw, 24px);
	color: #fff;
	font-size: var(--sc-h2);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.16;
}

.sc-figure .sc-figure__text {
	margin: 0;
	max-width: 62ch;
	color: var(--sc-figure-text);
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.7;
}

/* --- responsywnosc --- */

@media (max-width: 860px) {
	.sc-figure > .ct-section-inner-wrap,
	.sc-figure > .sc-figure__inner {
		grid-template-columns: 1fr;
	}

	/* w kolumnie kreska idzie pod liczbe zamiast obok */
	.sc-figure .sc-figure__side {
		padding: 0 0 clamp(24px, 4vw, 34px);
		border-right: 0;
		border-bottom: 1px solid var(--sc-figure-line);
	}

	.sc-figure .sc-figure__text {
		max-width: none;
	}
}


/* ===============================================================
   CONSULT
   Wysrodkowany naglowek, pod nim zdjecie dochodzace do lewej
   krawedzi okna i kolumna z trescia.
   =============================================================== */

.sc-consult {
	--sc-consult-accent: #2451c6;
	--sc-consult-box: #f1f5fd;
	--sc-consult-line: #dfe6f3;
	--sc-consult-radius: 20px;

	width: 100%;
	color: var(--sc-ink);
	background: #fff;
}

.sc-consult *,
.sc-consult *::before,
.sc-consult *::after {
	box-sizing: border-box;
}

/* Zdjecie ma isc do krawedzi okna, wiec kontener trzymaja
   pojedyncze elementy, a nie wspolny wrapper sekcji. */
.sc-consult > .ct-section-inner-wrap,
.sc-consult > .sc-consult__inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0;
	padding: var(--sc-pad-y) 0;
}

.sc-consult .sc-consult__eyebrow,
.sc-consult .sc-consult__title {
	width: 100%;
	max-width: var(--sc-container);
	margin-inline: auto;
	padding-inline: var(--sc-pad-x);
}

.sc-consult .sc-consult__title {
	margin-bottom: clamp(34px, 4vw, 58px);
	color: var(--sc-ink);
	font-size: var(--sc-h2);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.16;
	text-align: center;
	text-wrap: balance;
}

/* prawa kolumna konczy sie w linii kontenera, lewa dotyka krawedzi okna */
.sc-consult .sc-consult__grid {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
	align-items: center !important;
	gap: clamp(32px, 4vw, 68px);
	width: 100%;
	padding-right: max(
		var(--sc-pad-x),
		calc((100% - var(--sc-container)) / 2 + var(--sc-pad-x))
	);
}

/* --- zdjecie --- */

.sc-consult .sc-consult__media {
	display: block !important;
	width: 100%;
	border-radius: 0 var(--sc-consult-radius) var(--sc-consult-radius) 0;
	overflow: hidden;
}

.sc-consult .sc-consult__media > img,
.sc-consult .sc-consult__image {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 11 / 10;
	object-fit: cover;
}

/* --- kolumna z trescia --- */

.sc-consult .sc-consult__body {
	display: block !important;
	min-width: 0;
}

.sc-consult .sc-consult__name {
	margin: 0 0 18px;
	color: var(--sc-ink);
	font-size: clamp(20px, 1.9vw, 26px);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.sc-consult .sc-consult__text {
	margin: 0 0 clamp(24px, 2.8vw, 34px);
	max-width: 46ch;
	color: var(--sc-muted);
	font-size: clamp(15px, 1.25vw, 18px);
	line-height: 1.6;
}

.sc-consult .sc-consult__cta {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: fit-content;
	min-height: 58px;
	padding: 16px 30px;
	color: #fff;
	background: var(--sc-consult-accent);
	border: 1px solid var(--sc-consult-accent);
	border-radius: 999px;
	box-shadow: 0 12px 28px rgba(36, 81, 198, 0.24);
	font-size: clamp(15px, 1.25vw, 18px);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* strzalka rysowana maska - bez ikony w Oxygenie */
.sc-consult .sc-consult__cta::after {
	content: "";
	flex: 0 0 auto;
	width: 17px;
	height: 11px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 5.5h14'/%3E%3Cpath d='M10.5 1.5 14.75 5.5 10.5 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 5.5h14'/%3E%3Cpath d='M10.5 1.5 14.75 5.5 10.5 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sc-consult a.sc-consult__cta:hover,
.sc-consult a.sc-consult__cta:focus-visible {
	color: #fff;
	background: #1c40a4;
	transform: translateY(-2px);
}

.sc-consult a.sc-consult__cta:hover::after,
.sc-consult a.sc-consult__cta:focus-visible::after {
	transform: translateX(4px);
}

/* --- ramka z podsumowaniem --- */

.sc-consult .sc-consult__box {
	display: block !important;
	margin-top: clamp(30px, 3.6vw, 48px);
	padding: clamp(24px, 2.6vw, 32px) clamp(22px, 2.6vw, 32px);
	background: var(--sc-consult-box);
	border: 1px solid var(--sc-consult-line);
	border-left: 3px solid var(--sc-consult-accent);
	border-radius: 0 10px 10px 0;
}

.sc-consult .sc-consult__box-title {
	margin: 0 0 20px;
	color: var(--sc-ink);
	font-size: clamp(17px, 1.5vw, 21px);
	font-weight: 700;
	letter-spacing: -0.005em;
	line-height: 1.3;
}

.sc-consult .sc-consult__list {
	display: grid !important;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-consult .sc-consult__item {
	display: grid !important;
	grid-template-columns: 18px minmax(0, 1fr);
	align-items: start !important;
	gap: 14px;
	margin: 0;
	color: var(--sc-muted);
	font-size: clamp(14px, 1.15vw, 16px);
	line-height: 1.5;
}

/* ptaszek rysowany maska - bez ikony w Oxygenie */
.sc-consult .sc-consult__item::before {
	content: "";
	width: 18px;
	height: 18px;
	margin-top: 2px;
	background: var(--sc-consult-accent);
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.5 7 13l7.5-8'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.5 7 13l7.5-8'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sc-consult a:focus-visible {
	outline: 3px solid rgba(36, 81, 198, 0.45);
	outline-offset: 4px;
}

/* --- responsywnosc --- */

@media (max-width: 860px) {
	.sc-consult .sc-consult__grid {
		grid-template-columns: 1fr;
		padding-inline: 0 var(--sc-pad-x);
	}

	.sc-consult .sc-consult__media > img,
	.sc-consult .sc-consult__image {
		aspect-ratio: 16 / 10;
	}

	.sc-consult .sc-consult__text {
		max-width: none;
	}
}

@media (max-width: 560px) {
	.sc-consult .sc-consult__cta {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-consult .sc-consult__cta,
	.sc-consult .sc-consult__cta::after {
		transition-duration: 0.01ms !important;
	}
}


/* --- wariant pakietow: naglowek po lewej, bez granatowego pasa ---
   Uzywany tam, gdzie pod sekcja nie ma juz ciemnego bloku.
   ----------------------------------------------------------------- */

.sc-packages.sc-packages--left {
	background: #fff;
}

.sc-packages.sc-packages--left > .ct-section-inner-wrap,
.sc-packages.sc-packages--left > .sc-packages__inner {
	align-items: flex-start !important;
	padding-bottom: var(--sc-pad-y);
}

.sc-packages.sc-packages--left .sc-packages__eyebrow,
.sc-packages.sc-packages--left .sc-packages__title {
	text-align: left;
}

.sc-packages.sc-packages--left .sc-packages__title {
	max-width: 960px;
	margin-bottom: clamp(40px, 4.6vw, 68px);
	/* przy tekscie do lewej balansowanie linii tylko psuje podzial */
	text-wrap: normal;
}

/* dolny odstep daje juz wrapper sekcji */
.sc-packages.sc-packages--left .sc-packages__grid {
	padding-bottom: 0;
}

.sc-packages.sc-packages--left .sc-packages__card {
	border-radius: 24px;
}


/* ===============================================================
   TEAM
   Bialy gorny pas, granatowy dolny, karty na styku.
   Strzalki przychodza z shortcode'u, ale dzieki display:contents
   siadaja w wierszu naglowka.
   =============================================================== */

.sc-team {
	--sc-team-per-view: 3;
	--sc-team-gap: clamp(18px, 2vw, 28px);
	/* wysokosc granatowego pasa liczona od dolu sekcji */
	--sc-team-band: 230px;
	/* ten sam granat co gora sekcji krokow - inaczej na styku widac szew */
	--sc-team-navy: #0e2149;
	--sc-team-accent: #2451c6;
	/* ten sam blekit kafla co w siatce .sc-people */
	--sc-team-tile: #eef3fc;

	width: 100%;
	color: var(--sc-ink);
	background: linear-gradient(
		180deg,
		#fff 0%,
		#fff calc(100% - var(--sc-team-band)),
		var(--sc-team-navy) calc(100% - var(--sc-team-band)),
		var(--sc-team-navy) 100%
	);
}

.sc-team *,
.sc-team *::before,
.sc-team *::after {
	box-sizing: border-box;
}

.sc-team > .ct-section-inner-wrap,
.sc-team > .sc-team__inner {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"head controls"
		"track track";
	align-items: center !important;
	gap: clamp(28px, 3.4vw, 46px) 24px;
	width: 100% !important;
	max-width: var(--sc-container) !important;
	margin-inline: auto;
	padding: var(--sc-pad-y) var(--sc-pad-x);
}

.sc-team .sc-team__head {
	grid-area: head;
	display: block !important;
	min-width: 0;
}

.sc-team .sc-team__title {
	margin: 0;
	color: var(--sc-ink);
	font-size: var(--sc-h2);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

/* wrapper shortcode'u znika z ukladu, zeby strzalki i tor
   staly sie bezposrednimi polami siatki sekcji */
.sc-team .ct-code-block:has(.sc-team__carousel),
.sc-team .ct-shortcode:has(.sc-team__carousel),
.sc-team .sc-team__carousel {
	display: contents;
}

/* --- strzalki --- */

.sc-team .sc-team__controls {
	grid-area: controls;
	display: flex !important;
	align-items: center;
	gap: 14px;
}

.sc-team .sc-team__arrow {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	padding: 0;
	color: #fff;
	background: var(--sc-team-accent);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 180ms ease, transform 180ms ease, opacity 180ms ease;
}

.sc-team .sc-team__arrow::before {
	content: "";
	width: 20px;
	height: 13px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 13' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 6.5h17.5'/%3E%3Cpath d='M13.5 1.5 18.5 6.5 13.5 11.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 13' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 6.5h17.5'/%3E%3Cpath d='M13.5 1.5 18.5 6.5 13.5 11.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sc-team .sc-team__arrow[data-direction="prev"]::before {
	transform: scaleX(-1);
}

.sc-team .sc-team__arrow:hover {
	background: #1c40a4;
	transform: translateY(-2px);
}

.sc-team .sc-team__arrow:focus-visible {
	outline: 3px solid rgba(36, 81, 198, 0.5);
	outline-offset: 3px;
}

.sc-team .sc-team__arrow[aria-disabled="true"] {
	opacity: 0.35;
	cursor: default;
	transform: none;
}

/* --- tor z kartami --- */

.sc-team .sc-team__track {
	grid-area: track;
	display: flex !important;
	gap: var(--sc-team-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.sc-team .sc-team__track::-webkit-scrollbar {
	display: none;
}

.sc-team .sc-team__track:focus-visible {
	outline: 3px solid rgba(36, 81, 198, 0.45);
	outline-offset: 4px;
	border-radius: 18px;
}

/* Ten sam kafel co w siatce .sc-people na podstronie "O nas" - obie
   sekcje pokazuja te sama liste osob, wiec maja wygladac tak samo. */
.sc-team .sc-team__card {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	flex: 0 0 calc(
		(100% - (var(--sc-team-per-view) - 1) * var(--sc-team-gap)) / var(--sc-team-per-view)
	);
	gap: 0;
	margin: 0;
	padding: clamp(24px, 2.4vw, 34px);
	background: var(--sc-team-tile);
	border-radius: 20px;
	scroll-snap-align: start;
}

.sc-team .sc-team__portrait {
	position: static;
	display: block;
	width: auto;
	border-radius: 0;
	overflow: visible;
}

.sc-team .sc-team__photo {
	display: block;
	width: clamp(150px, 15vw, 196px);
	max-width: none;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center 22%;
	border-radius: 16px;
}

.sc-team .sc-team__photo--empty {
	background: #dde4ef;
}

/* Podpis stoi pod zdjeciem, nie na nim. Nakladka gradientowa odpadla razem
   z duzym kadrem - na malej kwadratowej fotce nie bylo na nia miejsca. */
.sc-team .sc-team__caption {
	position: static;
	/* dolny padding daje pewny odstep nad przyciskiem - sam margin-top: auto
	   na przycisku nic nie zrobi, gdy karta nie ma wolnej przestrzeni */
	padding: clamp(16px, 1.7vw, 22px) 0 clamp(20px, 2.1vw, 28px);
	background: none;
}

.sc-team .sc-team__name {
	margin: 0 0 4px;
	color: var(--sc-ink);
	font-size: clamp(16px, 1.35vw, 19px);
	font-weight: 700;
	line-height: 1.3;
}

.sc-team .sc-team__role {
	margin: 0;
	color: var(--sc-team-accent);
	font-size: clamp(13px, 1.05vw, 15px);
	line-height: 1.35;
}

/* --- przycisk pod karta --- */

.sc-team .sc-team__cta {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: auto;
	min-height: 52px;
	padding: 14px 20px;
	color: var(--sc-ink);
	background: #fff;
	border: 1px solid #fff;
	border-radius: 999px;
	box-shadow: 0 10px 26px rgba(6, 18, 46, 0.18);
	font-size: clamp(13px, 1.1vw, 16px);
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease;
}

/* strzalka rysowana maska - bez ikony w Oxygenie */
.sc-team .sc-team__cta::after {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 11px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 5.5h14'/%3E%3Cpath d='M10.5 1.5 14.75 5.5 10.5 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 5.5h14'/%3E%3Cpath d='M10.5 1.5 14.75 5.5 10.5 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sc-team a.sc-team__cta:hover,
.sc-team a.sc-team__cta:focus-visible {
	color: var(--sc-ink);
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(6, 18, 46, 0.26);
}

.sc-team a.sc-team__cta:hover::after,
.sc-team a.sc-team__cta:focus-visible::after {
	transform: translateX(4px);
}

/* --- responsywnosc --- */

@media (max-width: 1100px) {
	.sc-team {
		--sc-team-per-view: 3;
	}
}

@media (max-width: 860px) {
	.sc-team {
		--sc-team-per-view: 2;
		--sc-team-band: 190px;
	}
}

@media (max-width: 560px) {
	.sc-team {
		--sc-team-per-view: 1;
	}

	.sc-team > .ct-section-inner-wrap,
	.sc-team > .sc-team__inner {
		grid-template-columns: 1fr;
		grid-template-areas:
			"head"
			"track"
			"controls";
	}

	/* strzalki pod torem - wysrodkowane, bo nie ma juz naglowka obok */
	.sc-team .sc-team__controls {
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-team .sc-team__track {
		scroll-behavior: auto;
	}

	.sc-team .sc-team__arrow,
	.sc-team .sc-team__cta,
	.sc-team .sc-team__cta::after {
		transition-duration: 0.01ms;
	}
}


/* --- styk dwoch ciemnych sekcji -----------------------------------
   Gdy pod zespolem stoi kolejna granatowa sekcja, odstep liczy sie
   raz. Bez tego padding dolny i gorny sumuja sie do ~170 px.
   ------------------------------------------------------------------ */

.sc-team:has(+ :is(.sc-steps, .sc-scope, .sc-figure, .sc-industries)) > .ct-section-inner-wrap,
.sc-team:has(+ :is(.sc-steps, .sc-scope, .sc-figure, .sc-industries)) > .sc-team__inner {
	padding-bottom: clamp(30px, 3.2vw, 46px);
}

.sc-team + :is(.sc-steps, .sc-scope, .sc-figure, .sc-industries) > .ct-section-inner-wrap {
	padding-top: clamp(40px, 4.4vw, 64px);
}




/* ===============================================================
   CREW
   Hero podstrony "O nas" (.sc-phero--crew) i pas ze zdjeciem
   grupowym (.sc-crew), ktory wchodzi w granat hero.
   Obie sekcje musza stac obok siebie - zejscie zdjecia w granat
   wlacza sie regula sasiedztwa, wiec .sc-crew uzyta samodzielnie
   nic nie zepsuje.
   =============================================================== */

/* --- hero: jedna kolumna, wysrodkowana --- */

.sc-phero.sc-phero--crew {
	--sc-crew-overlap: clamp(56px, 7vw, 120px);
	--sc-hero-rest-x: 50%;
	--sc-hero-rest-y: 18%;
	--sc-hero-mx: 50%;
	--sc-hero-my: 18%;
}

.sc-phero.sc-phero--crew > .ct-section-inner-wrap,
.sc-phero.sc-phero--crew > .sc-phero__inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100% !important;
	max-width: var(--sc-container) !important;
	margin-inline: auto;
	padding-block: var(--sc-phero-pad-y);
	padding-inline: var(--sc-phero-pad-x);
	text-align: center;
}

/* zapas na zdjecie, ktore wjezdza tu z sekcji ponizej */
.sc-phero.sc-phero--crew:has(+ .sc-crew) > .ct-section-inner-wrap,
.sc-phero.sc-phero--crew:has(+ .sc-crew) > .sc-phero__inner {
	padding-bottom: calc(var(--sc-phero-pad-y) + var(--sc-crew-overlap));
}

.sc-phero.sc-phero--crew .sc-phero__body {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	max-width: var(--sc-container-narrow);
}

.sc-phero.sc-phero--crew .sc-phero__crumbs {
	justify-content: center;
}

.sc-phero.sc-phero--crew .sc-phero__title {
	max-width: 38ch;
}

.sc-phero.sc-phero--crew .sc-phero__lead {
	margin-bottom: 0;
	max-width: 58ch;
}

/* Tekst przyszedl z wklejki i niesie twarde <br>, ktore trzymalo akapit
   na 439 px mimo limitu 58 znakow. O lamaniu ma decydowac szerokosc. */
.sc-phero.sc-phero--crew .sc-phero__lead br {
	display: none;
}

/* --- pas ze zdjeciem grupowym --- */

.sc-crew {
	--sc-crew-overlap: clamp(56px, 7vw, 120px);
	--sc-crew-radius: 20px;

	width: 100%;
	color: var(--sc-ink);
	background: #fff;
}

.sc-crew *,
.sc-crew *::before,
.sc-crew *::after {
	box-sizing: border-box;
}

.sc-crew > .ct-section-inner-wrap,
.sc-crew > .sc-crew__inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100% !important;
	max-width: var(--sc-container) !important;
	margin-inline: auto;
	padding: 0 var(--sc-pad-x) var(--sc-pad-y);
	text-align: center;
}

/* zdjecie siada na szwie: gorna polowa na granacie, dolna na bieli */
.sc-crew .sc-crew__media {
	display: block !important;
	position: relative;
	z-index: 1;
	width: 100%;
	border-radius: var(--sc-crew-radius);
	overflow: hidden;
	box-shadow: 0 30px 70px rgba(6, 20, 54, 0.26);
}

.sc-phero--crew + .sc-crew .sc-crew__media {
	margin-top: calc(-1 * var(--sc-crew-overlap));
}

.sc-crew .sc-crew__media > img,
.sc-crew .sc-crew__photo {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
}

/* --- tekst pod zdjeciem --- */

.sc-crew .sc-crew__note {
	margin: clamp(34px, 4vw, 56px) 0 0;
	max-width: 56ch;
	color: var(--sc-ink);
	font-size: clamp(19px, 1.7vw, 26px);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.5;
}

/* akcent na drugim zdaniu - do naklasowania na span w Oxygenie.
   Bywa tez uzywany jako osobny akapit pod naglowkiem sekcji i wtedy bez
   limitu rozciaga sie na cala szerokosc. max-width i margin-inline sa
   ignorowane, gdy klasa siedzi na spanie, wiec nie psuja starego uzycia. */
.sc-crew .sc-crew__note-accent {
	color: var(--sc-muted);
	/* Szerokosc dobrana do naglowka nad akapitem. 62ch dawalo 567 px,
	   co na desktopie wygladalo jak uklad mobilny. */
	max-width: 820px;
	margin-inline: auto;
}

/* Tresc wklejona z Worda przynosi twarde lamania linii. O szerokosci wiersza
   ma decydowac max-width, a nie <br> w tresci. Docelowo warto je usunac
   w Oxygenie - ta regula jest tylko zabezpieczeniem. */
.sc-crew .sc-crew__note-accent br {
	display: none;
}

/* --- responsywnosc --- */

@media (max-width: 991px) {
	.sc-crew .sc-crew__media > img,
	.sc-crew .sc-crew__photo {
		aspect-ratio: 16 / 10;
	}
}

@media (max-width: 560px) {
	.sc-phero.sc-phero--crew .sc-phero__title {
		max-width: none;
	}

	.sc-crew .sc-crew__media > img,
	.sc-crew .sc-crew__photo {
		aspect-ratio: 4 / 3;
	}
}


/* ===============================================================
   PEOPLE
   Zespol w siatce, z opisem pod kazda osoba - inaczej niz karuzela
   .sc-team, ktora ma podpis na zdjeciu i nie ma miejsca na tekst.
   Obie sekcje czytaja te sama liste osob z ustawien.
   =============================================================== */

.sc-people {
	--sc-people-cols: 3;
	--sc-people-gap: clamp(18px, 1.8vw, 26px);
	/* jasny blekit kafla - ten sam odcien co wyrozniony wiersz naborow */
	--sc-people-tile: #eef3fc;
	--sc-people-line: #dfe6f3;
	--sc-people-accent: #2451c6;

	width: 100%;
	color: var(--sc-ink);
	background: #fff;
}

.sc-people *,
.sc-people *::before,
.sc-people *::after {
	box-sizing: border-box;
}

.sc-people > .ct-section-inner-wrap,
.sc-people > .sc-people__inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	width: 100% !important;
	max-width: var(--sc-container) !important;
	margin-inline: auto;
	padding: var(--sc-pad-y) var(--sc-pad-x);
}

.sc-people .sc-people__title {
	margin: 0;
	color: var(--sc-ink);
	font-size: var(--sc-h2);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.sc-people .sc-people__lead {
	margin: clamp(16px, 1.8vw, 24px) 0 0;
	max-width: 62ch;
	color: var(--sc-muted);
	font-size: var(--sc-lead);
	line-height: 1.65;
}

/* --- zespol (grupa osob) --- */

.sc-people .sc-people__group {
	display: block !important;
	width: 100%;
	margin-top: clamp(40px, 4.6vw, 68px);
}

/* Nazwa zespolu z kreska biegnaca do prawej krawedzi kontenera.
   Kreska mowi, ze to podzial calosci, a nie kolejny naglowek. */
.sc-people .sc-people__group-title {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 18px;
	margin: 0 0 clamp(24px, 2.6vw, 36px);
	color: var(--sc-ink);
	font-size: clamp(19px, 1.6vw, 24px);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.sc-people .sc-people__group-title::before {
	content: "";
	flex: 0 0 auto;
	width: 28px;
	height: 2px;
	background: var(--sc-people-accent);
}

.sc-people .sc-people__group-title::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--sc-people-line);
}

/* wrapper shortcode'u nie moze sie zwezac do szerokosci tresci */
.sc-people .ct-shortcode:has(.sc-people__grid),
.sc-people .ct-code-block:has(.sc-people__grid) {
	width: 100%;
	min-width: 0;
}

/* --- siatka kart --- */

.sc-people .sc-people__grid {
	display: grid !important;
	grid-template-columns: repeat(var(--sc-people-cols), minmax(0, 1fr));
	align-items: stretch;
	gap: clamp(30px, 3.4vw, 48px) var(--sc-people-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Karta ma uklad siatki: miniatura po lewej, nazwisko i stanowisko obok niej,
   opis przez cala szerokosc pod spodem. Zdjecie na cala szerokosc kolumny
   robilo z sekcji sciane - przy trzech osobach to byly kafle po 800 px. */
.sc-people .sc-people__card {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	align-items: stretch !important;
	row-gap: 0;
	margin: 0;
	min-width: 0;
	padding: clamp(24px, 2.4vw, 34px);
	background: var(--sc-people-tile);
	border-radius: 20px;
}


.sc-people .sc-people__portrait {
	display: block;
	grid-column: 1;
	justify-self: start;
	width: clamp(150px, 15vw, 196px);
	border-radius: 16px;
	overflow: hidden;
	background: #dde4ef;
}

.sc-people .sc-people__portrait > img,
.sc-people .sc-people__photo {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	/* kadr kwadratowy - twarze siedza w gornej czesci zdjecia */
	object-position: center 22%;
}

.sc-people .sc-people__photo--empty {
	background: #dde4ef;
}

/* Dzieki temu nazwisko, stanowisko i opis trafiaja wprost do siatki karty. */
.sc-people .sc-people__body {
	display: contents !important;
}

.sc-people .sc-people__name {
	grid-column: 1;
	margin: clamp(16px, 1.7vw, 22px) 0 4px;
	color: var(--sc-ink);
	font-size: clamp(16px, 1.35vw, 19px);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.sc-people .sc-people__role {
	grid-column: 1;
	margin: 0;
	color: var(--sc-people-accent);
	font-size: clamp(13px, 1.05vw, 15px);
	font-weight: 500;
	line-height: 1.35;
}

/* Opis siedzi w kontenerze, ktory JS potrafi zwinac do kilku wierszy. */
.sc-people .sc-people__text {
	grid-column: 1 / -1;
	position: relative;
	margin-top: clamp(18px, 1.9vw, 24px);
}

.sc-people .sc-people__text.is-clamped {
	max-height: 13.5em;
	overflow: hidden;
}

/* zanik na ostatnim wierszu - zeby bylo widac, ze tekst idzie dalej */
.sc-people .sc-people__text.is-clamped::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 3.4em;
	background: linear-gradient(180deg, rgba(238, 243, 252, 0) 0%, var(--sc-people-tile) 82%);
	pointer-events: none;
}

.sc-people .sc-people__more {
	grid-column: 1 / -1;
	justify-self: start;
	margin-top: clamp(12px, 1.3vw, 16px);
	padding: 0;
	border: 0;
	background: none;
	color: var(--sc-people-accent);
	font-family: inherit;
	font-size: clamp(13px, 1.05vw, 15px);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.sc-people .sc-people__more:hover,
.sc-people .sc-people__more:focus-visible {
	text-decoration: underline;
}

.sc-people .sc-people__bio {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--sc-muted);
	font-size: clamp(14px, 1.1vw, 16px);
	line-height: 1.6;
}

/* opis osoby potrafi miec kilka akapitow - bez tego zlewaja sie w sciane */
.sc-people .sc-people__bio + .sc-people__bio {
	margin-top: 0.75em;
}

/* --- link pod opisem --- */

.sc-people .sc-people__cta {
	grid-column: 1 / -1;
	justify-self: start;
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 9px;
	margin-top: clamp(14px, 1.6vw, 20px);
	color: var(--sc-people-accent);
	font-size: clamp(13px, 1.05vw, 15px);
	font-weight: 600;
	line-height: 1.2;
	text-align: left;
	text-decoration: none;
	transition: color 180ms ease;
}

.sc-people .sc-people__cta::after {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 11px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 5.5h14'/%3E%3Cpath d='M10.5 1.5 14.75 5.5 10.5 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 5.5h14'/%3E%3Cpath d='M10.5 1.5 14.75 5.5 10.5 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sc-people a.sc-people__cta:hover,
.sc-people a.sc-people__cta:focus-visible {
	color: var(--sc-navy);
}

.sc-people a.sc-people__cta:hover::after,
.sc-people a.sc-people__cta:focus-visible::after {
	transform: translateX(4px);
}

.sc-people a:focus-visible {
	outline: 3px solid rgba(36, 81, 198, 0.45);
	outline-offset: 3px;
	border-radius: 6px;
}

/* --- responsywnosc --- */

@media (max-width: 820px) {
	.sc-people {
		--sc-people-cols: 2;
	}
}

@media (max-width: 520px) {
	.sc-people {
		--sc-people-cols: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-people .sc-people__cta,
	.sc-people .sc-people__cta::after {
		transition-duration: 0.01ms !important;
	}
}



/* ===============================================================
   CREDO
   Granatowy pas z jednym akapitem - miejsce, gdzie strona mowi
   wlasnym glosem. Uklad dwukolumnowy: po lewej krotka etykieta,
   po prawej wypowiedz. Bez ozdobnikow, cala robote robi skala
   tekstu i oddech wokol niego.
   =============================================================== */

.sc-credo {
	--sc-credo-navy: #0e2149;
	--sc-credo-navy-2: #14306e;
	--sc-credo-text: rgba(219, 229, 248, 0.88);

	position: relative;
	isolation: isolate;
	width: 100%;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(150deg, var(--sc-credo-navy) 0%, var(--sc-credo-navy-2) 100%);
}

.sc-credo *,
.sc-credo *::before,
.sc-credo *::after {
	box-sizing: border-box;
}

/* ta sama siatka techniczna co w hero - trzyma sekcje w rodzinie */
.sc-credo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: var(--sc-grid-size) var(--sc-grid-size);
	-webkit-mask-image: radial-gradient(110% 100% at 20% 0%, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 90%);
	mask-image: radial-gradient(110% 100% at 20% 0%, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 90%);
	pointer-events: none;
}

.sc-credo > .ct-section-inner-wrap,
.sc-credo > .sc-credo__inner {
	display: grid !important;
	grid-template-columns: minmax(0, 0.3fr) minmax(0, 1fr);
	align-items: start !important;
	gap: clamp(24px, 4vw, 72px);
	width: 100% !important;
	max-width: var(--sc-container) !important;
	margin-inline: auto;
	padding: var(--sc-pad-y) var(--sc-pad-x);
}

/* etykieta korzysta z prymitywu .sc-eyebrow - tu tylko dosuwamy
   ja do pierwszej linii tekstu obok. Reguła dotyczy wylacznie tej
   sekcji: w pozostalych eyebrow ma zostac odstep spod prymitywu. */
.sc-credo .sc-credo__eyebrow {
	margin-top: 0.55em;
	margin-bottom: 0;
}

.sc-credo .sc-credo__text {
	margin: 0;
	/* tekst wypelnia swoja kolumne - miare wyznacza siatka sekcji */
	color: var(--sc-credo-text);
	font-size: clamp(20px, 2.1vw, 30px);
	font-weight: 400;
	letter-spacing: -0.012em;
	line-height: 1.52;
}

/* fragment do wyroznienia zaznacz w Oxygenie jako <strong> */
.sc-credo .sc-credo__text strong,
.sc-credo .sc-credo__text b {
	color: #fff;
	font-weight: 500;
}

/* --- responsywnosc --- */

@media (max-width: 900px) {
	.sc-credo > .ct-section-inner-wrap,
	.sc-credo > .sc-credo__inner {
		grid-template-columns: 1fr;
	}

	.sc-credo .sc-credo__eyebrow {
		margin-top: 0;
		margin-bottom: 18px;
	}
}


/* ===============================================================
   CERTS
   Certyfikaty i uprawnienia. Kafelki stoja w jednej siatce
   rozdzielonej wloskowatymi liniami - gap ma 1px, a linie robi
   tlo siatki widoczne w szczelinach. Dzieki temu kreski trafiaja
   idealnie miedzy pola przy kazdej liczbie kolumn, bez liczenia
   nth-child przy zawijaniu.
   =============================================================== */

.sc-certs {
	--sc-certs-cols: 5;
	--sc-certs-line: #dfe6f3;
	--sc-certs-accent: #2451c6;
	--sc-certs-radius: 18px;

	width: 100%;
	color: var(--sc-ink);
	background: #fff;
}

.sc-certs *,
.sc-certs *::before,
.sc-certs *::after {
	box-sizing: border-box;
}

.sc-certs > .ct-section-inner-wrap,
.sc-certs > .sc-certs__inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	width: 100% !important;
	max-width: var(--sc-container) !important;
	margin-inline: auto;
	padding: var(--sc-pad-y) var(--sc-pad-x);
}

.sc-certs .sc-certs__title {
	margin: 0;
	color: var(--sc-ink);
	font-size: var(--sc-h2);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.sc-certs .sc-certs__lead {
	margin: clamp(16px, 1.8vw, 24px) 0 0;
	max-width: 62ch;
	color: var(--sc-muted);
	font-size: var(--sc-lead);
	line-height: 1.65;
}

/* wrapper shortcode'u nie moze sie zwezac do szerokosci tresci */
.sc-certs .ct-shortcode:has(.sc-certs__grid),
.sc-certs .ct-code-block:has(.sc-certs__grid) {
	width: 100%;
	min-width: 0;
}

/* --- siatka --- */

.sc-certs .sc-certs__grid {
	display: grid !important;
	grid-template-columns: repeat(var(--sc-certs-cols), minmax(0, 1fr));
	gap: 1px;
	margin: clamp(34px, 3.8vw, 54px) 0 0;
	padding: 0;
	list-style: none;
	background: var(--sc-certs-line);
	border: 1px solid var(--sc-certs-line);
	border-radius: var(--sc-certs-radius);
	overflow: hidden;
}

.sc-certs .sc-certs__item {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: clamp(16px, 1.8vw, 22px);
	margin: 0;
	padding: clamp(26px, 2.8vw, 38px) clamp(16px, 1.8vw, 24px);
	min-width: 0;
	background: #fff;
	text-align: center;
}

/* pole z linkiem wypelnia caly kafelek, zeby klikalne bylo wszystko */
.sc-certs .sc-certs__link {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: inherit;
	width: 100%;
	color: inherit;
	text-align: center;
	text-decoration: none;
}

.sc-certs .sc-certs__item:has(.sc-certs__link) {
	padding: 0;
	transition: background-color 180ms ease;
}

.sc-certs .sc-certs__item:has(.sc-certs__link) .sc-certs__link {
	gap: clamp(16px, 1.8vw, 22px);
	padding: clamp(26px, 2.8vw, 38px) clamp(16px, 1.8vw, 24px);
}

.sc-certs .sc-certs__item:has(.sc-certs__link:hover),
.sc-certs .sc-certs__item:has(.sc-certs__link:focus-visible) {
	background: #f6f9ff;
}

/* --- znak --- */

.sc-certs .sc-certs__mark {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: clamp(56px, 6vw, 78px);
}

.sc-certs .sc-certs__mark > img,
.sc-certs .sc-certs__logo {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 100%;
	height: auto;
	object-fit: contain;
}

.sc-certs .sc-certs__mark--empty {
	border-radius: 10px;
	background: #eef2f9;
}

/* --- podpisy --- */

.sc-certs .sc-certs__name {
	margin: 0;
	color: var(--sc-ink);
	font-size: clamp(15px, 1.25vw, 18px);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.sc-certs .sc-certs__desc {
	margin: 6px 0 0;
	color: var(--sc-muted);
	font-size: clamp(13px, 1.05vw, 15px);
	line-height: 1.45;
}

.sc-certs a.sc-certs__link:hover .sc-certs__name,
.sc-certs a.sc-certs__link:focus-visible .sc-certs__name {
	color: var(--sc-certs-accent);
}

.sc-certs a:focus-visible {
	outline: 3px solid rgba(36, 81, 198, 0.45);
	outline-offset: -3px;
}

/* --- responsywnosc --- */

@media (max-width: 1180px) {
	.sc-certs .sc-certs__grid {
		--sc-certs-cols: 3 !important;
	}
}

@media (max-width: 640px) {
	.sc-certs .sc-certs__grid {
		--sc-certs-cols: 2 !important;
	}
}

@media (max-width: 400px) {
	.sc-certs .sc-certs__grid {
		--sc-certs-cols: 1 !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-certs .sc-certs__item:has(.sc-certs__link) {
		transition-duration: 0.01ms !important;
	}
}


/* --- styki sekcji podstrony "O nas" -------------------------------
   Wszystkie te sekcje sa biale, wiec padding dolny jednej i gorny
   nastepnej sumuja sie do ~180 px i robi sie dziura. Liczymy odstep
   raz, tak jak na styku zespolu z krokami.
   ------------------------------------------------------------------ */

.sc-crew:has(+ .sc-people) > .ct-section-inner-wrap,
.sc-crew:has(+ .sc-people) > .sc-crew__inner,
.sc-certs:has(+ :is(.sc-map, .sc-consult)) > .ct-section-inner-wrap,
.sc-certs:has(+ :is(.sc-map, .sc-consult)) > .sc-certs__inner {
	padding-bottom: clamp(30px, 3.2vw, 46px);
}

.sc-crew + .sc-people > .ct-section-inner-wrap,
.sc-crew + .sc-people > .sc-people__inner,
.sc-certs + :is(.sc-map, .sc-consult) > .ct-section-inner-wrap,
.sc-certs + :is(.sc-map, .sc-consult) > .sc-map__inner {
	padding-top: clamp(40px, 4.4vw, 64px);
}


/* ===============================================================
   CONTACT
   Dane stale: telefon, e-mail, adres. Trzy rowne pola w jednej
   ramce - ta sama siatka z wloskowatymi liniami co przy
   certyfikatach, zeby podstrony mowily tym samym jezykiem.
   =============================================================== */

.sc-contact {
	--sc-contact-cols: 3;
	--sc-contact-line: #dfe6f3;
	--sc-contact-accent: #2451c6;
	--sc-contact-radius: 18px;

	width: 100%;
	color: var(--sc-ink);
	background: #fff;
}

.sc-contact *,
.sc-contact *::before,
.sc-contact *::after {
	box-sizing: border-box;
}

.sc-contact > .ct-section-inner-wrap,
.sc-contact > .sc-contact__inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	width: 100% !important;
	max-width: var(--sc-container) !important;
	margin-inline: auto;
	padding: var(--sc-pad-y) var(--sc-pad-x);
}

.sc-contact .sc-contact__title {
	margin: 0;
	color: var(--sc-ink);
	font-size: var(--sc-h2);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.sc-contact .sc-contact__lead {
	margin: clamp(16px, 1.8vw, 24px) 0 0;
	max-width: 62ch;
	color: var(--sc-muted);
	font-size: var(--sc-lead);
	line-height: 1.65;
}

/* --- siatka danych --- */

.sc-contact .sc-contact__grid {
	display: grid !important;
	grid-template-columns: repeat(var(--sc-contact-cols), minmax(0, 1fr));
	align-items: stretch !important;
	gap: 1px;
	margin: clamp(34px, 3.8vw, 54px) 0 0;
	padding: 0;
	list-style: none;
	background: var(--sc-contact-line);
	border: 1px solid var(--sc-contact-line);
	border-radius: var(--sc-contact-radius);
	overflow: hidden;
}

.sc-contact .sc-contact__card {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 10px;
	margin: 0;
	padding: clamp(26px, 2.8vw, 38px) clamp(22px, 2.4vw, 32px);
	min-width: 0;
	background: #fff;
}

.sc-contact .sc-contact__label {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 10px;
	margin: 0;
	color: var(--sc-muted);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* ikona to obrazek wstawiony w Oxygenie - trzymamy ja w ryzach */
.sc-contact .sc-contact__label .sc-contact__icon {
	flex: 0 0 auto;
	display: block;
	width: 18px;
	height: auto;
	max-width: none;
	object-fit: contain;
}

/* wartosc stawiaja shortcody [smartcare_phone] / [smartcare_email] /
   [smartcare_address], wiec selektor musi zlapac i link, i span */
.sc-contact .sc-contact__value {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 10px;
	margin: 0;
	color: var(--sc-ink);
	font-size: clamp(17px, 1.5vw, 22px);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.35;
	text-align: left;
	text-decoration: none;
	transition: color 180ms ease;
}

/* ikona przychodzi z shortcode'u - te same znaki co w stopce */
.sc-contact .sc-contact__value .sc-icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	color: var(--sc-contact-accent);
	transition: color 180ms ease;
}

.sc-contact a.sc-contact__value:hover,
.sc-contact a.sc-contact__value:focus-visible {
	color: var(--sc-contact-accent);
}

.sc-contact .sc-contact__note {
	margin: 0;
	color: var(--sc-muted);
	font-size: clamp(13px, 1.05vw, 15px);
	line-height: 1.5;
}

/* --- klauzula pod danymi --- */

.sc-contact .sc-contact__privacy,
.sc-contact .ct-shortcode:has(.sc-privacy) {
	margin-top: clamp(20px, 2.2vw, 28px);
}

.sc-contact a:focus-visible {
	outline: 3px solid rgba(36, 81, 198, 0.45);
	outline-offset: 3px;
	border-radius: 6px;
}

/* --- responsywnosc --- */

@media (max-width: 900px) {
	.sc-contact {
		--sc-contact-cols: 1;
	}
}


/* ===============================================================
   FORM SKIN
   Wyglad pol formularza, niezalezny od wtyczki. Zakladasz klase
   .sc-form na element w Oxygenie, w ktorym siedzi shortcode
   formularza - style lapia zwykle inputy, listy i przyciski,
   wiec dzialaja tak samo dla Fluent Forms, WPForms i dla
   recznie napisanego HTML-a.

   Selektory celuja w typ elementu, a nie w klasy wtyczki, zeby
   zmiana wtyczki nie wymagala przepisywania stylow. Nazwy klas
   komunikatow sa dolozone jako aliasy - jedyne miejsce, gdzie
   dotykamy konkretnej wtyczki.
   =============================================================== */

.sc-form {
	--sc-form-ink: var(--sc-ink);
	--sc-form-muted: var(--sc-muted);
	--sc-form-accent: #2451c6;
	--sc-form-accent-dark: #1c40a4;
	--sc-form-line: #dfe6f3;
	--sc-form-field: #fbfcff;
	--sc-form-error: #c02626;
	--sc-form-ok: #157a4a;

	width: 100%;
	color: var(--sc-form-ink);
}

.sc-form *,
.sc-form *::before,
.sc-form *::after {
	box-sizing: border-box;
}

/* --- etykiety --- */

.sc-form label {
	display: block;
	margin-bottom: 8px;
	color: var(--sc-form-ink);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

/* gwiazdka pola wymaganego - wtyczki wstawiaja ja w spanie */
.sc-form label .ff-el-is-required,
.sc-form label .wpforms-required-label,
.sc-form .sc-form__required {
	color: var(--sc-form-error);
	font-weight: 600;
}

/* --- pola --- */

.sc-form input[type="text"],
.sc-form input[type="email"],
.sc-form input[type="tel"],
.sc-form input[type="url"],
.sc-form input[type="number"],
.sc-form input[type="date"],
.sc-form input[type="search"],
.sc-form select,
.sc-form textarea {
	width: 100%;
	max-width: none;
	min-height: 52px;
	padding: 14px 16px;
	color: var(--sc-form-ink);
	background: var(--sc-form-field);
	border: 1px solid var(--sc-form-line);
	border-radius: 10px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.sc-form input::placeholder,
.sc-form textarea::placeholder {
	color: #93a1b8;
	opacity: 1;
}

.sc-form input:hover,
.sc-form select:hover,
.sc-form textarea:hover {
	border-color: #c3d0e7;
}

.sc-form input:focus,
.sc-form select:focus,
.sc-form textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--sc-form-accent);
	box-shadow: 0 0 0 3px rgba(36, 81, 198, 0.16);
}

.sc-form textarea {
	min-height: 118px;
	resize: vertical;
}

/* strzalka listy rysowana tlem - bez pliku z ikona */
.sc-form select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2355647e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
	cursor: pointer;
}

/* --- zgody i wybory --- */

.sc-form input[type="checkbox"],
.sc-form input[type="radio"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	min-height: 0;
	margin: 1px 10px 0 0;
	padding: 0;
	accent-color: var(--sc-form-accent);
	cursor: pointer;
}

/* etykieta obok pola wyboru lezy w linii, nie nad nim */
.sc-form label:has(> input[type="checkbox"]),
.sc-form label:has(> input[type="radio"]) {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	margin-bottom: 0;
	color: var(--sc-form-muted);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
}

.sc-form a {
	color: var(--sc-form-accent);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sc-form a:hover,
.sc-form a:focus-visible {
	color: var(--sc-navy);
}

/* --- przycisk --- */

.sc-form button[type="submit"],
.sc-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 58px;
	padding: 16px 32px;
	color: #fff;
	background: var(--sc-form-accent);
	border: 1px solid var(--sc-form-accent);
	border-radius: 999px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease;
}

.sc-form button[type="submit"]:hover,
.sc-form input[type="submit"]:hover {
	background: var(--sc-form-accent-dark);
	border-color: var(--sc-form-accent-dark);
	transform: translateY(-2px);
	box-shadow: 0 16px 34px rgba(20, 48, 110, 0.3);
}

.sc-form button[type="submit"]:disabled,
.sc-form input[type="submit"]:disabled {
	opacity: 0.55;
	transform: none;
	box-shadow: none;
	cursor: default;
}

.sc-form :focus-visible {
	outline: 3px solid rgba(36, 81, 198, 0.5);
	outline-offset: 3px;
}

/* --- komunikaty --------------------------------------------------
   Jedyne miejsce z nazwami klas konkretnych wtyczek. Gdyby doszla
   trzecia, dopisujesz jej klasy tutaj i nic wiecej.
   ------------------------------------------------------------------ */

.sc-form .sc-form__error,
.sc-form .ff-el-is-error .text-danger,
.sc-form .error,
.sc-form .wpforms-error {
	margin: 6px 0 0;
	color: var(--sc-form-error);
	font-size: 13px;
	line-height: 1.45;
}

.sc-form .ff-el-is-error input,
.sc-form .ff-el-is-error select,
.sc-form .ff-el-is-error textarea,
.sc-form input.wpforms-error,
.sc-form select.wpforms-error,
.sc-form textarea.wpforms-error {
	border-color: var(--sc-form-error);
	background: #fff8f8;
}

.sc-form .sc-form__success,
.sc-form .ff-message-success,
.sc-form .wpforms-confirmation-container-full {
	margin: 0;
	padding: 18px 22px;
	color: var(--sc-form-ok);
	background: #f1faf5;
	border: 1px solid #bfe3d0;
	border-radius: 12px;
	font-size: 15px;
	line-height: 1.55;
}

/* --- karta z formularzem --------------------------------------
   Wariant do postawienia na ciemnym tle, jak w module analizy.
   ------------------------------------------------------------------ */

.sc-form.sc-form--card {
	padding: clamp(26px, 3vw, 40px);
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 30px 70px rgba(6, 20, 54, 0.3);
}

@media (prefers-reduced-motion: reduce) {
	.sc-form input,
	.sc-form select,
	.sc-form textarea,
	.sc-form button[type="submit"],
	.sc-form input[type="submit"] {
		transition-duration: 0.01ms !important;
	}
}


/* ===============================================================
   POSTS
   Siatka wpisow bloga - wystawia ja shortcode [smartcare_posts].
   Liczbe kolumn podaje shortcode zmienna --sc-posts-cols, wiec
   ten sam CSS obsluguje listing bloga i skrocona liste na
   podstronie tematycznej.
   =============================================================== */

.sc-posts {
	--sc-posts-cols: 3;
	--sc-posts-line: #dfe6f3;
	--sc-posts-accent: #2451c6;
	--sc-posts-radius: 18px;

	width: 100%;
	min-width: 0;
	color: var(--sc-ink);
}

.sc-posts *,
.sc-posts *::before,
.sc-posts *::after {
	box-sizing: border-box;
}

/* wrapper shortcode'u w Oxygenie nie moze sie zwezac do tresci */
.ct-shortcode:has(> .sc-posts),
.ct-code-block:has(> .sc-posts) {
	width: 100%;
	min-width: 0;
}

.sc-posts .sc-posts__grid {
	display: grid !important;
	grid-template-columns: repeat(var(--sc-posts-cols), minmax(0, 1fr));
	align-items: stretch;
	gap: clamp(24px, 2.8vw, 40px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- karta --- */

.sc-posts .sc-posts__card {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	position: relative;
	margin: 0;
	min-width: 0;
	background: #fff;
	border: 1px solid var(--sc-posts-line);
	border-radius: var(--sc-posts-radius);
	overflow: hidden;
	transition: border-color 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease;
}

.sc-posts .sc-posts__card:hover {
	border-color: #c3d0e7;
	transform: translateY(-3px);
	box-shadow: 0 20px 44px rgba(6, 20, 54, 0.12);
}

/* --- obrazek --- */

.sc-posts .sc-posts__media {
	display: block !important;
	width: 100%;
	text-decoration: none;
}

.sc-posts .sc-posts__thumb {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	background: #eef2f9;
}

.sc-posts .sc-posts__thumb > img,
.sc-posts .sc-posts__image {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sc-posts .sc-posts__card:hover .sc-posts__image {
	transform: scale(1.03);
}

/* Zastepnik dla wpisu bez obrazka. Zamiast szarej dziury - firmowy
   granat z siatka i znakiem z logo, zeby kafelek wygladal na
   zaprojektowany, a nie na zepsuty. */
.sc-posts .sc-posts__thumb--empty {
	aspect-ratio: 16 / 10;
	background:
		linear-gradient(150deg, #0e2149 0%, #14306e 100%);
}

.sc-posts .sc-posts__thumb--empty::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
	background-size: 48px 48px;
}

.sc-posts .sc-posts__thumb--empty::after {
	content: "";
	position: absolute;
	right: -6%;
	bottom: -14%;
	width: 62%;
	height: 78%;
	background: rgba(255, 255, 255, 0.14);
	-webkit-mask: url("../images/smartcare-wing.svg") right bottom / contain no-repeat;
	mask: url("../images/smartcare-wing.svg") right bottom / contain no-repeat;
}

/* --- tresc karty --- */

.sc-posts .sc-posts__body {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	flex: 1 1 auto;
	gap: 0;
	padding: clamp(20px, 2.2vw, 28px);
	min-width: 0;
}

.sc-posts .sc-posts__meta {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 10px 14px;
	margin-bottom: 14px;
}

.sc-posts .sc-posts__category {
	display: inline-flex !important;
	align-items: center;
	position: relative;
	z-index: 1;
	padding: 6px 12px;
	color: var(--sc-posts-accent);
	background: #eef3ff;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 180ms ease, color 180ms ease;
}

.sc-posts a.sc-posts__category:hover,
.sc-posts a.sc-posts__category:focus-visible {
	color: #fff;
	background: var(--sc-posts-accent);
}

.sc-posts .sc-posts__date {
	color: var(--sc-muted);
	font-size: 13px;
	line-height: 1.3;
}

.sc-posts .sc-posts__title {
	margin: 0 0 12px;
	color: var(--sc-ink);
	font-size: clamp(18px, 1.55vw, 22px);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.32;
}

/* Link tytulu rozciaga sie na cala karte - jeden odnosnik dla
   czytnika ekranu, a klikalna zostaje cala plytka. */
.sc-posts .sc-posts__link {
	color: inherit;
	text-decoration: none;
}

.sc-posts .sc-posts__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
}

.sc-posts .sc-posts__card:hover .sc-posts__link {
	color: var(--sc-posts-accent);
}

/* trzy linijki, zeby karty w rzedzie mialy ten sam rytm */
.sc-posts .sc-posts__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	margin: 0 0 clamp(16px, 1.8vw, 22px);
	overflow: hidden;
	color: var(--sc-muted);
	font-size: clamp(14px, 1.1vw, 16px);
	line-height: 1.6;
}

/* --- tagi --- */

.sc-posts .sc-posts__tags {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px;
	margin: auto 0 0;
	padding: 0;
	list-style: none;
}

.sc-posts .sc-posts__tag {
	display: block !important;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-posts .sc-posts__tag a {
	display: inline-block;
	position: relative;
	z-index: 1;
	padding: 4px 10px;
	color: var(--sc-muted);
	background: #fff;
	border: 1px solid var(--sc-posts-line);
	border-radius: 6px;
	font-size: 12px;
	line-height: 1.35;
	text-decoration: none;
	transition: border-color 180ms ease, color 180ms ease;
}

.sc-posts .sc-posts__tag a::before {
	content: "#";
	opacity: 0.55;
}

.sc-posts .sc-posts__tag a:hover,
.sc-posts .sc-posts__tag a:focus-visible {
	color: var(--sc-posts-accent);
	border-color: #b9c9e8;
}

/* --- "czytaj dalej" --- */

.sc-posts .sc-posts__more {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 9px;
	margin-top: clamp(16px, 1.8vw, 22px);
	color: var(--sc-posts-accent);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
}

.sc-posts .sc-posts__more::after {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 11px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 5.5h14'/%3E%3Cpath d='M10.5 1.5 14.75 5.5 10.5 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 5.5h14'/%3E%3Cpath d='M10.5 1.5 14.75 5.5 10.5 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sc-posts .sc-posts__card:hover .sc-posts__more::after {
	transform: translateX(4px);
}

.sc-posts .sc-posts__card:focus-within {
	border-color: var(--sc-posts-accent);
}

.sc-posts .sc-posts__link:focus-visible {
	outline: 3px solid rgba(36, 81, 198, 0.45);
	outline-offset: 4px;
	border-radius: 6px;
}

/* --- brak wpisow --- */

.sc-posts__empty {
	margin: 0;
	padding: clamp(28px, 3vw, 40px);
	color: var(--sc-muted);
	background: #f6f9ff;
	border: 1px dashed #cfdaee;
	border-radius: 14px;
	font-size: 16px;
	text-align: center;
}

/* --- paginacja --- */

.sc-posts .sc-posts__pagination {
	margin-top: clamp(34px, 3.8vw, 54px);
}

.sc-posts .sc-posts__pages {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-posts .sc-posts__pages li {
	display: block !important;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-posts .sc-posts__pages .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	color: var(--sc-ink);
	background: #fff;
	border: 1px solid var(--sc-posts-line);
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.sc-posts .sc-posts__pages a.page-numbers:hover,
.sc-posts .sc-posts__pages a.page-numbers:focus-visible {
	color: var(--sc-posts-accent);
	border-color: #b9c9e8;
	background: #f6f9ff;
}

.sc-posts .sc-posts__pages .page-numbers.current {
	color: #fff;
	background: var(--sc-posts-accent);
	border-color: var(--sc-posts-accent);
}

.sc-posts .sc-posts__pages .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

.sc-posts .sc-posts__page-arrow {
	display: block;
	width: 17px;
	height: 11px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 5.5h14'/%3E%3Cpath d='M10.5 1.5 14.75 5.5 10.5 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 5.5h14'/%3E%3Cpath d='M10.5 1.5 14.75 5.5 10.5 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sc-posts .sc-posts__pages .prev .sc-posts__page-arrow {
	transform: scaleX(-1);
}

/* --- responsywnosc --- */

@media (max-width: 1100px) {
	.sc-posts {
		--sc-posts-cols: 2 !important;
	}
}

@media (max-width: 700px) {
	.sc-posts {
		--sc-posts-cols: 1 !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-posts .sc-posts__card,
	.sc-posts .sc-posts__image,
	.sc-posts .sc-posts__more::after {
		transition-duration: 0.01ms !important;
	}

	.sc-posts .sc-posts__card:hover {
		transform: none;
	}

	.sc-posts .sc-posts__card:hover .sc-posts__image {
		transform: none;
	}
}


/* ===============================================================
   BLOG
   Naglowek strony bloga i uklad tresci z panelem filtrow.
   Siatke wpisow wstawia [smartcare_posts], filtry
   [smartcare_post_filters] - tutaj jest tylko rusztowanie.
   =============================================================== */

.sc-blog {
	--sc-blog-aside: 300px;
	--sc-blog-line: #dfe6f3;
	--sc-blog-accent: #2451c6;

	width: 100%;
	color: var(--sc-ink);
	background: #fff;
}

.sc-blog *,
.sc-blog *::before,
.sc-blog *::after {
	box-sizing: border-box;
}

.sc-blog > .ct-section-inner-wrap,
.sc-blog > .sc-blog__inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	width: 100% !important;
	max-width: var(--sc-container) !important;
	margin-inline: auto;
	padding: var(--sc-pad-y) var(--sc-pad-x);
}

/* --- naglowek strony --- */

.sc-blog .sc-blog__head {
	/* Eyebrow i tytul po lewej, lead po prawej. Uklad robi siatka na
	   samym naglowku, wiec w Oxygenie zostaja trzy elementy obok
	   siebie - bez dodatkowego diva na lewa kolumne. */
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
	/* trzeci wiersz jest pusty i elastyczny - to on wchlania nadmiar
	   wysokosci leadu, zamiast rozpychac wiersz eyebrow i tytulu */
	grid-template-rows: auto auto 1fr;
	align-items: start !important;
	column-gap: clamp(32px, 4vw, 80px);
	width: 100%;
	margin-bottom: clamp(36px, 4vw, 58px);
	padding-bottom: clamp(28px, 3.2vw, 44px);
	border-bottom: 1px solid var(--sc-blog-line);
}

.sc-blog .sc-blog__eyebrow {
	grid-column: 1;
	grid-row: 1;
}

.sc-blog .sc-blog__title {
	grid-column: 1;
	grid-row: 2;
}

.sc-blog .sc-blog__title {
	margin: 0;
	max-width: none;
	color: var(--sc-ink);
	font-size: var(--sc-h1-page);
	font-weight: 400;
	letter-spacing: -0.022em;
	line-height: 1.12;
}

/* lead startuje w tej samej linii co eyebrow - prawa kolumna ma
   wtedy wspolna krawedz gorna z lewa */
.sc-blog .sc-blog__lead {
	grid-column: 2;
	grid-row: 1 / -1;
	align-self: start;
	margin: 0;
	max-width: 46ch;
	color: var(--sc-muted);
	font-size: var(--sc-lead-lg);
	line-height: 1.65;
}

/* --- tresc i panel boczny --- */

.sc-blog .sc-blog__body {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) var(--sc-blog-aside);
	align-items: start !important;
	gap: clamp(32px, 3.6vw, 60px);
	width: 100%;
}

.sc-blog .sc-blog__main {
	display: block !important;
	min-width: 0;
}

.sc-blog .sc-blog__aside {
	display: block !important;
	position: sticky;
	/* naglowek strony jest przyklejony, wiec panel musi zaczac sie nizej */
	top: clamp(96px, 10vw, 130px);
	min-width: 0;
}

/* --- panel filtrow (shortcode) --- */

.sc-filters {
	display: flex;
	flex-direction: column;
	gap: clamp(26px, 3vw, 38px);
	width: 100%;
	color: var(--sc-ink);
}

.sc-filters *,
.sc-filters *::before,
.sc-filters *::after {
	box-sizing: border-box;
}

.sc-filters .sc-filters__block {
	display: block;
	width: 100%;
}

.sc-filters .sc-filters__heading {
	margin: 0 0 16px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--sc-blog-line, #dfe6f3);
	color: var(--sc-ink);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* --- kategorie --- */

.sc-filters .sc-filters__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-filters .sc-filters__item {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-filters .sc-filters__link {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	color: var(--sc-muted);
	border-radius: 8px;
	font-size: 15px;
	line-height: 1.4;
	text-decoration: none;
	transition: color 180ms ease, background-color 180ms ease;
}

.sc-filters .sc-filters__link:hover,
.sc-filters .sc-filters__link:focus-visible {
	color: var(--sc-ink);
	background: #f6f9ff;
}

.sc-filters .sc-filters__link.is-active {
	color: #fff;
	background: var(--sc-blog-accent, #2451c6);
	font-weight: 600;
}

.sc-filters .sc-filters__count {
	flex: 0 0 auto;
	color: inherit;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	opacity: 0.65;
}

/* --- tagi --- */

.sc-filters .sc-filters__tags {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-filters .sc-filters__tag {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-filters .sc-filters__chip {
	display: inline-block;
	padding: 6px 12px;
	color: var(--sc-muted);
	background: #fff;
	border: 1px solid var(--sc-blog-line, #dfe6f3);
	border-radius: 999px;
	font-size: 13px;
	line-height: 1.35;
	text-decoration: none;
	transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.sc-filters .sc-filters__chip::before {
	content: "#";
	opacity: 0.55;
}

.sc-filters .sc-filters__chip:hover,
.sc-filters .sc-filters__chip:focus-visible {
	color: var(--sc-blog-accent, #2451c6);
	border-color: #b9c9e8;
	background: #f6f9ff;
}

.sc-filters .sc-filters__chip.is-active {
	color: #fff;
	background: var(--sc-blog-accent, #2451c6);
	border-color: var(--sc-blog-accent, #2451c6);
}

.sc-filters .sc-filters__chip.is-active::before {
	opacity: 0.8;
}

.sc-filters a:focus-visible {
	outline: 3px solid rgba(36, 81, 198, 0.45);
	outline-offset: 2px;
}

/* --- responsywnosc --------------------------------------------
   Na wezszym ekranie panel ladauje nad wpisami, a nie pod nimi -
   filtr, ktorego nie widac przed lista, nie sluzy nikomu.
   ------------------------------------------------------------------ */

@media (max-width: 1000px) {
	.sc-blog .sc-blog__body {
		grid-template-columns: 1fr;
	}

	.sc-blog .sc-blog__aside {
		order: -1;
		position: static;
	}

	.sc-filters {
		flex-direction: row;
		flex-wrap: wrap;
		gap: clamp(20px, 3vw, 32px);
	}

	.sc-filters .sc-filters__block {
		flex: 1 1 260px;
	}

	.sc-filters .sc-filters__list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
	}

	.sc-filters .sc-filters__link {
		border: 1px solid var(--sc-blog-line, #dfe6f3);
		border-radius: 999px;
	}

	.sc-filters .sc-filters__link.is-active {
		border-color: var(--sc-blog-accent, #2451c6);
	}
}

@media (max-width: 860px) {
	.sc-blog .sc-blog__head {
		grid-template-columns: 1fr;
	}

	.sc-blog .sc-blog__eyebrow,
	.sc-blog .sc-blog__title,
	.sc-blog .sc-blog__lead {
		grid-column: 1;
		grid-row: auto;
	}

	.sc-blog .sc-blog__lead {
		margin-top: clamp(16px, 1.8vw, 24px);
		max-width: none;
	}
}


/* ===============================================================
   SINGLE
   Caly widok wpisu z shortcode'u [smartcare_single]: naglowek,
   tresc, panel boczny ze spisem tresci i blok proponowanych.
   Tresc pochodzi z edytora, wiec selektory celuja w zwykle
   znaczniki - autor wpisu nie musi nic klasowac.
   =============================================================== */

.sc-single {
	--sc-single-aside: 300px;
	--sc-single-measure: 68ch;
	--sc-single-line: #dfe6f3;
	--sc-single-accent: #2451c6;

	display: block;
	width: 100%;
	color: var(--sc-ink);
}

.sc-single *,
.sc-single *::before,
.sc-single *::after {
	box-sizing: border-box;
}

/* Wrapper shortcode'u w Oxygenie jest dzieckiem flexa z
   align-items: flex-start, wiec bez tego zwezalby sie do szerokosci
   tresci i hero nie dochodziloby do krawedzi okna. */
.ct-shortcode:has(> .sc-single),
.ct-code-block:has(> .sc-single) {
	width: 100%;
	min-width: 0;
}

/* tresc i proponowane siedza w kontenerze; hero jest pelnej szerokosci */
.sc-single .sc-single__wrap {
	display: block;
	width: 100%;
	max-width: var(--sc-container);
	margin-inline: auto;
	padding: var(--sc-pad-y) var(--sc-pad-x);
}

/* --- hero ---------------------------------------------------------
   Zdjecie wyrozniajace wchodzi w tlo zmienna --sc-single-cover,
   ustawiana inline przez shortcode. Gdy wpis go nie ma, zostaje
   granat ze skrzydlem - ten sam motyw co kafelki bez obrazka.
   ------------------------------------------------------------------ */

.sc-single .sc-single__hero {
	--sc-single-hero-pad-y: clamp(52px, 6vw, 96px);

	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	width: 100%;
	min-height: clamp(360px, 36vw, 520px);
	overflow: hidden;
	color: #fff;
	background: linear-gradient(150deg, #0e2149 0%, #14306e 100%);
}

/* siatka techniczna - ta sama rodzina co pozostale ciemne sekcje */
.sc-single .sc-single__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: var(--sc-grid-size) var(--sc-grid-size);
	-webkit-mask-image: radial-gradient(110% 100% at 18% 0%, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 92%);
	mask-image: radial-gradient(110% 100% at 18% 0%, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 92%);
	pointer-events: none;
}

/* Wariant ze zdjeciem: obraz w tle plus przyciemnienie od dolu i od
   lewej, zeby tekst byl czytelny niezaleznie od kadru. */
.sc-single .sc-single__hero--image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image:
		linear-gradient(to top, rgba(8, 20, 48, 0.92) 0%, rgba(8, 20, 48, 0.66) 42%, rgba(8, 20, 48, 0.42) 100%),
		linear-gradient(to right, rgba(8, 20, 48, 0.6) 0%, rgba(8, 20, 48, 0.12) 62%),
		var(--sc-single-cover);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	pointer-events: none;
}

/* Wariant bez zdjecia: skrzydlo z logo jako znak wodny. */
.sc-single .sc-single__hero--plain::after {
	content: "";
	position: absolute;
	right: -4%;
	bottom: -18%;
	z-index: -2;
	width: 54%;
	height: 92%;
	background: rgba(255, 255, 255, 0.13);
	-webkit-mask: url("../images/smartcare-wing.svg") right bottom / contain no-repeat;
	mask: url("../images/smartcare-wing.svg") right bottom / contain no-repeat;
	pointer-events: none;
}

.sc-single .sc-single__hero-inner {
	display: block;
	width: 100%;
	max-width: var(--sc-container);
	margin-inline: auto;
	padding: var(--sc-single-hero-pad-y) var(--sc-pad-x);
}

.sc-single .sc-single__back {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 9px;
	margin-bottom: clamp(20px, 2.4vw, 30px);
	color: rgba(215, 226, 246, 0.82);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: color 180ms ease;
}

.sc-single .sc-single__back::before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 11px;
	background: currentColor;
	transform: scaleX(-1);
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 5.5h14'/%3E%3Cpath d='M10.5 1.5 14.75 5.5 10.5 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 5.5h14'/%3E%3Cpath d='M10.5 1.5 14.75 5.5 10.5 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sc-single a.sc-single__back:hover,
.sc-single a.sc-single__back:focus-visible {
	color: #fff;
}

.sc-single .sc-single__meta {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin-bottom: clamp(16px, 1.8vw, 22px);
}

.sc-single .sc-single__category {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	color: #fff;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	/* na zdjeciu plaster potrafi zniknac - rozmycie tla trzyma kontrast */
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background-color 180ms ease, border-color 180ms ease;
}

.sc-single a.sc-single__category:hover,
.sc-single a.sc-single__category:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, 0.24);
	border-color: rgba(255, 255, 255, 0.45);
}

.sc-single .sc-single__date,
.sc-single .sc-single__reading {
	color: rgba(215, 226, 246, 0.85);
	font-size: 13px;
	line-height: 1.3;
}

/* kropka rozdzielajaca date od czasu czytania */
.sc-single .sc-single__reading::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	margin-right: 10px;
	vertical-align: 3px;
	background: currentColor;
	border-radius: 50%;
	opacity: 0.6;
}

.sc-single .sc-single__title {
	margin: 0;
	max-width: 20ch;
	color: #fff;
	font-size: var(--sc-h1-page);
	font-weight: 400;
	letter-spacing: -0.022em;
	line-height: 1.14;
	text-wrap: balance;
}

.sc-single .sc-single__lead {
	margin: clamp(18px, 2vw, 26px) 0 0;
	max-width: 58ch;
	color: rgba(215, 226, 246, 0.86);
	font-size: var(--sc-lead-lg);
	line-height: 1.6;
}

/* --- uklad tresci i panelu --- */

/* Tresc startuje od lewej krawedzi kontenera - tej samej co tytul
   w hero i logo - a panel przylega do prawej. Kolumna tekstu bierze
   cala przestrzen miedzy nimi, wiec nie ma pustki pomiedzy, a odstep
   robi sam gap. Tekst nie jest przyciety do miary, bo wtedy ta sama
   pustka wracalaby po jego prawej stronie. */
.sc-single .sc-single__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--sc-single-aside);
	align-items: start;
	gap: clamp(40px, 5vw, 96px);
	width: 100%;
}

.sc-single .sc-single__content {
	min-width: 0;
	max-width: none;
}

.sc-single .sc-single__aside {
	position: sticky;
	top: clamp(96px, 10vw, 130px);
	display: flex;
	flex-direction: column;
	gap: clamp(26px, 3vw, 38px);
	min-width: 0;
}

/* --- typografia tresci -----------------------------------------
   Tekst pisze klient w edytorze, wiec stylujemy same znaczniki.
   ------------------------------------------------------------------ */

.sc-single .sc-single__content > * {
	margin-block: 0 clamp(18px, 2vw, 26px);
}

.sc-single .sc-single__content > *:last-child {
	margin-bottom: 0;
}

.sc-single .sc-single__content > p {
	color: var(--sc-muted);
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.75;
}

.sc-single .sc-single__content h2,
.sc-single .sc-single__content h3,
.sc-single .sc-single__content h4 {
	color: var(--sc-ink);
	font-weight: 600;
	letter-spacing: -0.015em;
	/* kotwica ze spisu tresci nie moze chowac naglowka pod naglowkiem strony */
	scroll-margin-top: clamp(96px, 10vw, 130px);
}

.sc-single .sc-single__content h2 {
	margin-top: clamp(38px, 4vw, 56px);
	margin-bottom: clamp(14px, 1.6vw, 20px);
	font-size: var(--sc-prose-h2);
	line-height: 1.25;
}

.sc-single .sc-single__content h3 {
	margin-top: clamp(30px, 3.2vw, 42px);
	margin-bottom: 12px;
	font-size: var(--sc-prose-h3);
	line-height: 1.3;
}

.sc-single .sc-single__content h4 {
	margin-top: clamp(26px, 2.8vw, 34px);
	margin-bottom: 10px;
	font-size: var(--sc-prose-h4);
	line-height: 1.35;
}

.sc-single .sc-single__content strong,
.sc-single .sc-single__content b {
	color: var(--sc-ink);
	font-weight: 600;
}

.sc-single .sc-single__content > :is(p, ul, ol, blockquote, figure) a {
	color: var(--sc-single-accent);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 180ms ease;
}

.sc-single .sc-single__content > :is(p, ul, ol, blockquote, figure) a:hover,
.sc-single .sc-single__content > :is(p, ul, ol, blockquote, figure) a:focus-visible {
	color: var(--sc-navy);
}

.sc-single .sc-single__content > ul,
.sc-single .sc-single__content > ol {
	padding-left: 0;
	list-style: none;
}

.sc-single .sc-single__content > :is(ul, ol) > li {
	position: relative;
	margin: 0 0 12px;
	padding-left: 30px;
	color: var(--sc-muted);
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.7;
}

.sc-single .sc-single__content li:last-child {
	margin-bottom: 0;
}

/* punktor rysowany, zeby zgadzal sie z reszta strony */
.sc-single .sc-single__content > ul > li::before {
	content: "";
	position: absolute;
	top: 0.66em;
	left: 6px;
	width: 7px;
	height: 7px;
	background: var(--sc-single-accent);
	border-radius: 50%;
}

.sc-single .sc-single__content > ol {
	counter-reset: sc-single-list;
}

.sc-single .sc-single__content > ol > li {
	counter-increment: sc-single-list;
}

.sc-single .sc-single__content > ol > li::before {
	content: counter(sc-single-list) ".";
	position: absolute;
	top: 0;
	left: 0;
	color: var(--sc-single-accent);
	font-weight: 700;
}

.sc-single .sc-single__content blockquote {
	margin-inline: 0;
	padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.4vw, 32px);
	background: #f6f9ff;
	border-left: 3px solid var(--sc-single-accent);
	border-radius: 0 12px 12px 0;
}

.sc-single .sc-single__content blockquote p {
	color: var(--sc-ink);
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.6;
}

.sc-single .sc-single__content blockquote p:last-child {
	margin-bottom: 0;
}

.sc-single .sc-single__content img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 14px;
}

.sc-single .sc-single__content figure {
	margin-inline: 0;
}

.sc-single .sc-single__content figcaption {
	margin-top: 10px;
	color: var(--sc-muted);
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}

.sc-single .sc-single__content hr {
	height: 1px;
	margin-block: clamp(30px, 3.4vw, 46px);
	background: var(--sc-single-line);
	border: 0;
}

/* szerokie tabele przewijaja sie same, strona nie */
.sc-single .sc-single__content .wp-block-table,
.sc-single .sc-single__content figure.wp-block-table {
	overflow-x: auto;
}

.sc-single .sc-single__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.sc-single .sc-single__content th,
.sc-single .sc-single__content td {
	padding: 12px 14px;
	border: 1px solid var(--sc-single-line);
	text-align: left;
}

.sc-single .sc-single__content th {
	color: var(--sc-ink);
	background: #f6f9ff;
	font-weight: 600;
}

/* --- widzety w panelu --- */

.sc-single .sc-single__widget {
	display: block;
	width: 100%;
}

.sc-single .sc-single__widget-title {
	margin: 0 0 16px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--sc-single-line);
	color: var(--sc-ink);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* --- spis tresci --- */

.sc-toc {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.sc-toc .sc-toc__item {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-toc .sc-toc__link {
	display: block;
	padding: 8px 12px;
	color: var(--sc-muted);
	border-left: 2px solid var(--sc-single-line, #dfe6f3);
	font-size: 14px;
	line-height: 1.45;
	text-decoration: none;
	transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.sc-toc .sc-toc__item--h3 .sc-toc__link {
	padding-left: 24px;
	font-size: 13px;
}

.sc-toc .sc-toc__link:hover,
.sc-toc .sc-toc__link:focus-visible {
	color: var(--sc-ink);
	background: #f6f9ff;
	border-color: var(--sc-single-accent, #2451c6);
}

/* --- proponowane wpisy --- */

.sc-single .sc-single__related {
	margin-top: clamp(56px, 6vw, 92px);
	padding-top: clamp(34px, 3.8vw, 54px);
	border-top: 1px solid var(--sc-single-line);
}

.sc-single .sc-single__related-title {
	margin: 0 0 clamp(26px, 3vw, 38px);
	color: var(--sc-ink);
	font-size: var(--sc-h3);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.sc-single a:focus-visible {
	outline: 3px solid rgba(36, 81, 198, 0.45);
	outline-offset: 3px;
	border-radius: 6px;
}

/* --- responsywnosc --- */

@media (max-width: 1000px) {
	.sc-single .sc-single__body {
		grid-template-columns: 1fr;
		justify-content: stretch;
	}

	.sc-single .sc-single__aside {
		order: -1;
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		gap: clamp(20px, 3vw, 32px);
		padding-bottom: clamp(24px, 3vw, 34px);
		border-bottom: 1px solid var(--sc-single-line);
	}

	.sc-single .sc-single__widget {
		flex: 1 1 240px;
	}

	.sc-single .sc-single__content {
		max-width: none;
	}

	.sc-single .sc-single__hero {
		min-height: clamp(300px, 44vw, 420px);
	}

	.sc-single .sc-single__title {
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-single a,
	.sc-toc .sc-toc__link {
		transition-duration: 0.01ms !important;
	}
}


/* ===============================================================
   BLOKI EDYTORA
   Trzy bloki ACF wstawiane w tresc wpisu. Musza wygladac dobrze
   w waskiej kolumnie artykulu (~620 px), wiec ukladaja sie
   pionowo, a nie na pelna szerokosc strony.
   =============================================================== */

.sc-block {
	--sc-block-accent: #2451c6;
	--sc-block-line: #dfe6f3;
	--sc-block-radius: 18px;

	position: relative;
	isolation: isolate;
	width: 100%;
	overflow: hidden;
	border-radius: var(--sc-block-radius);
}

.sc-block *,
.sc-block *::before,
.sc-block *::after {
	box-sizing: border-box;
}

/* odstep dziala tez, gdy blok stoi w tresci wpisu */
.sc-single .sc-single__content > .sc-block {
	margin-block: clamp(30px, 3.4vw, 44px);
}

/* Blok ze zdjeciem ustawia kolumny wedlug szerokosci swojego
   pojemnika, a nie okna - w kolumnie artykulu jest na to za malo
   miejsca, na pelnej szerokosci strony juz tak. Poza tymi dwoma
   miejscami blok po prostu zostaje w jednej kolumnie.
   Klase .sc-block-host dokladasz w Oxygenie na kontener sekcji. */
.sc-single .sc-single__content,
.sc-block-host {
	container-type: inline-size;
}

.sc-block .sc-block__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(26px, 3vw, 38px);
}

.sc-block .sc-block__title {
	margin: 0;
	color: inherit;
	font-size: clamp(20px, 1.9vw, 26px);
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.28;
}

.sc-block .sc-block__text {
	margin: 12px 0 0;
	font-size: clamp(15px, 1.2vw, 17px);
	line-height: 1.6;
}

/* --- przycisk --- */

.sc-block .sc-block__button {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: clamp(20px, 2.2vw, 26px);
	min-height: 52px;
	padding: 14px 28px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease, background-color 200ms ease;
}

.sc-block .sc-block__button::after {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 11px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 5.5h14'/%3E%3Cpath d='M10.5 1.5 14.75 5.5 10.5 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 5.5h14'/%3E%3Cpath d='M10.5 1.5 14.75 5.5 10.5 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sc-block a.sc-block__button:hover::after,
.sc-block a.sc-block__button:focus-visible::after {
	transform: translateX(4px);
}

/* --- wariant granatowy --- */

.sc-block.sc-block--dark {
	color: #fff;
	background: linear-gradient(150deg, #0e2149 0%, #14306e 100%);
}

/* siatka techniczna - ten sam motyw co ciemne sekcje strony */
.sc-block.sc-block--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(110% 100% at 15% 0%, #000 0%, rgba(0, 0, 0, 0.5) 60%, transparent 95%);
	mask-image: radial-gradient(110% 100% at 15% 0%, #000 0%, rgba(0, 0, 0, 0.5) 60%, transparent 95%);
	pointer-events: none;
}

.sc-block.sc-block--dark .sc-block__text {
	color: rgba(215, 226, 246, 0.86);
}

.sc-block.sc-block--dark .sc-block__button {
	color: #10203f;
	background: #fff;
}

.sc-block.sc-block--dark a.sc-block__button:hover,
.sc-block.sc-block--dark a.sc-block__button:focus-visible {
	color: #10203f;
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(4, 14, 46, 0.35);
}

/* --- wariant jasny --- */

.sc-block.sc-block--light {
	color: var(--sc-ink);
	background: #f6f9ff;
	border: 1px solid var(--sc-block-line);
}

.sc-block.sc-block--light .sc-block__text {
	color: var(--sc-muted);
}

.sc-block.sc-block--light .sc-block__button {
	color: #fff;
	background: var(--sc-block-accent);
}

.sc-block.sc-block--light a.sc-block__button:hover,
.sc-block.sc-block--light a.sc-block__button:focus-visible {
	color: #fff;
	background: #1c40a4;
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(20, 48, 110, 0.28);
}

/* --- wariant ze zdjeciem -------------------------------------------
   W kolumnie artykulu zdjecie i tekst stoja obok siebie tylko wtedy,
   gdy jest na to miejsce - stad zapytanie o kontener.
   ------------------------------------------------------------------ */

.sc-block.sc-block--image {
	display: grid;
	grid-template-columns: 1fr;
	align-items: stretch;
	color: var(--sc-ink);
	background: #fff;
	border: 1px solid var(--sc-block-line);
}

.sc-block.sc-block--image .sc-block__media {
	display: block;
	position: relative;
	min-width: 0;
	overflow: hidden;
}

/* Kadr jest staly, a zdjecie sie do niego przycina - inaczej pionowe
   zdjecie rozciagaloby caly blok. W jednej kolumnie decyduje
   proporcja, w dwoch - wysokosc kolumny z tekstem. */
.sc-block.sc-block--image .sc-block__image {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: center;
}

/* brak zdjecia - firmowy granat ze skrzydlem, jak na kafelkach wpisow */
.sc-block.sc-block--image .sc-block__image--empty {
	background: linear-gradient(150deg, #0e2149 0%, #14306e 100%);
}

.sc-block.sc-block--image .sc-block__image--empty::after {
	content: "";
	position: absolute;
	right: -6%;
	bottom: -14%;
	width: 62%;
	height: 78%;
	background: rgba(255, 255, 255, 0.14);
	-webkit-mask: url("../images/smartcare-wing.svg") right bottom / contain no-repeat;
	mask: url("../images/smartcare-wing.svg") right bottom / contain no-repeat;
}

.sc-block.sc-block--image .sc-block__text {
	color: var(--sc-muted);
}

.sc-block.sc-block--image .sc-block__button {
	color: #fff;
	background: var(--sc-block-accent);
}

.sc-block.sc-block--image a.sc-block__button:hover,
.sc-block.sc-block--image a.sc-block__button:focus-visible {
	color: #fff;
	background: #1c40a4;
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(20, 48, 110, 0.28);
}

@container (min-width: 600px) {
	.sc-block.sc-block--image {
		grid-template-columns: 0.62fr 1fr;
	}

	/* w waskiej kolumnie artykulu kazde 10 px tekstu sie liczy */
	.sc-block.sc-block--image .sc-block__body {
		padding: clamp(22px, 2.4vw, 34px);
	}

	/* Zdjecie wypelnia kolumne bez wplywu na wysokosc bloku: kadr
	   rozciaga sie do wysokosci wiersza, a obraz jest w nim
	   pozycjonowany absolutnie i przyciety. Dzieki temu pionowe,
	   kwadratowe i panoramiczne zdjecie daja identyczny uklad. */
	.sc-block.sc-block--image .sc-block__media {
		min-height: 240px;
	}

	.sc-block.sc-block--image .sc-block__image {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
	}

	.sc-block.sc-block--image.sc-block--media-right .sc-block__media {
		order: 2;
	}
}

/* --- kontakt do osoby --- */

.sc-block.sc-block--person {
	color: var(--sc-ink);
	background: #fff;
	border: 1px solid var(--sc-block-line);
	padding: clamp(24px, 2.8vw, 34px);
}

.sc-block.sc-block--person .sc-block__note {
	margin: 0 0 clamp(18px, 2vw, 24px);
	padding-bottom: clamp(16px, 1.8vw, 22px);
	border-bottom: 1px solid var(--sc-block-line);
	color: var(--sc-ink);
	font-size: clamp(16px, 1.35vw, 19px);
	font-weight: 500;
	line-height: 1.45;
}

.sc-block.sc-block--person .sc-block__person {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: clamp(16px, 1.8vw, 22px);
}

.sc-block .sc-block__avatar {
	flex: 0 0 auto;
	display: block;
	width: clamp(72px, 8vw, 92px);
	height: clamp(72px, 8vw, 92px);
	border-radius: 50%;
	overflow: hidden;
	background: #eef2f9;
}

.sc-block .sc-block__avatar-image,
.sc-block .sc-block__avatar > img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

.sc-block .sc-block__person-body {
	min-width: 0;
}

.sc-block .sc-block__name {
	margin: 0;
	color: var(--sc-ink);
	font-size: clamp(16px, 1.35vw, 19px);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.sc-block .sc-block__role {
	margin: 3px 0 0;
	color: var(--sc-block-accent);
	font-size: clamp(13px, 1.05vw, 15px);
	font-weight: 500;
	line-height: 1.35;
}

.sc-block .sc-block__contacts {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin-top: clamp(14px, 1.6vw, 18px);
}

.sc-block .sc-block__contact {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	color: var(--sc-ink);
	font-size: clamp(14px, 1.15vw, 16px);
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	transition: color 180ms ease;
}

.sc-block .sc-block__contact .sc-icon {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	color: var(--sc-block-accent);
}

.sc-block a.sc-block__contact:hover,
.sc-block a.sc-block__contact:focus-visible {
	color: var(--sc-block-accent);
}

.sc-block a:focus-visible {
	outline: 3px solid rgba(36, 81, 198, 0.45);
	outline-offset: 3px;
	border-radius: 8px;
}

/* podpowiedz widoczna tylko w edytorze */
.sc-block__hint {
	margin: 0;
	padding: 22px;
	color: #6a7789;
	background: #f6f9ff;
	border: 1px dashed #cfdaee;
	border-radius: 14px;
	font-size: 14px;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.sc-block .sc-block__button,
	.sc-block .sc-block__button::after,
	.sc-block .sc-block__contact {
		transition-duration: 0.01ms !important;
	}
}


/* ===============================================================
   AUDIENCE
   "Dla kogo" na podstronach branzowych: krotki opis odbiorcy
   i rozwidlenie do wlasciwego pakietu.
   =============================================================== */

.sc-audience {
	--sc-aud-line: #dfe6f3;
	--sc-aud-accent: #2451c6;

	width: 100%;
	color: var(--sc-ink);
	background: #fff;
}

.sc-audience *,
.sc-audience *::before,
.sc-audience *::after {
	box-sizing: border-box;
}

.sc-audience > .ct-section-inner-wrap,
.sc-audience > .sc-audience__inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	width: 100% !important;
	max-width: var(--sc-container) !important;
	margin-inline: auto;
	padding: var(--sc-pad-y) var(--sc-pad-x);
}

.sc-audience .sc-audience__title {
	margin: 0 0 clamp(16px, 1.8vw, 24px);
	color: var(--sc-ink);
	font-size: var(--sc-h2);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.16;
}

.sc-audience .sc-audience__text {
	margin: 0;
	max-width: 62ch;
	color: var(--sc-muted);
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.65;
}

/* --- rozwidlenie sciezek --- */

.sc-audience .sc-audience__paths {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
	gap: clamp(14px, 1.6vw, 22px);
	margin-top: clamp(26px, 3vw, 40px);
	padding: 0;
	list-style: none;
}

.sc-audience .sc-audience__path {
	display: inline-flex !important;
	/* .ct-link Oxygena ma flex-direction: column i text-align: center */
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	text-align: left;
	gap: clamp(12px, 1.4vw, 18px);
	margin: 0;
	padding: clamp(16px, 1.8vw, 22px) clamp(20px, 2.2vw, 28px);
	background: #fbfcff;
	border: 1px solid var(--sc-aud-line);
	border-radius: 12px;
	font-size: clamp(14px, 1.15vw, 17px);
	line-height: 1.35;
	text-decoration: none;
	transition: border-color 200ms ease, background-color 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sc-audience .sc-audience__path-from {
	color: var(--sc-muted);
}

/* strzalka miedzy "skad" a "dokad" - rysowana maska, bez ikony */
.sc-audience .sc-audience__path-from::after {
	content: "";
	display: inline-block;
	width: 18px;
	height: 11px;
	margin-left: clamp(12px, 1.4vw, 18px);
	vertical-align: -1px;
	background: var(--sc-aud-accent);
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 5.5h14'/%3E%3Cpath d='M10.5 1.5 14.75 5.5 10.5 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 5.5h14'/%3E%3Cpath d='M10.5 1.5 14.75 5.5 10.5 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sc-audience .sc-audience__path-to {
	color: var(--sc-navy);
	font-weight: 600;
}

.sc-audience a.sc-audience__path:hover,
.sc-audience a.sc-audience__path:focus-visible {
	background: #f4f8ff;
	border-color: #b9c9e8;
	transform: translateY(-2px);
}

.sc-audience a.sc-audience__path:hover .sc-audience__path-from::after,
.sc-audience a.sc-audience__path:focus-visible .sc-audience__path-from::after {
	transform: translateX(4px);
}

.sc-audience a:focus-visible {
	outline: 3px solid rgba(36, 81, 198, 0.45);
	outline-offset: 3px;
}

/* --- ciemny wariant, gdyby sekcja trafila miedzy granatowe --- */

.sc-audience.sc-audience--dark {
	--sc-aud-line: rgba(255, 255, 255, 0.16);
	--sc-aud-accent: var(--sc-accent-on-dark);
	--sc-eyebrow-color: var(--sc-accent-on-dark);

	color: #fff;
	background: linear-gradient(160deg, #0a1b44 0%, #0e2149 100%);
}

.sc-audience.sc-audience--dark .sc-audience__title {
	color: #fff;
}

.sc-audience.sc-audience--dark .sc-audience__text,
.sc-audience.sc-audience--dark .sc-audience__path-from {
	color: rgba(215, 226, 246, 0.78);
}

.sc-audience.sc-audience--dark .sc-audience__path {
	background: rgba(255, 255, 255, 0.04);
}

.sc-audience.sc-audience--dark .sc-audience__path-to {
	color: #fff;
}

.sc-audience.sc-audience--dark a.sc-audience__path:hover,
.sc-audience.sc-audience--dark a.sc-audience__path:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.32);
}

/* --- responsywnosc --- */

@media (max-width: 560px) {
	.sc-audience .sc-audience__paths {
		flex-direction: column !important;
	}

	.sc-audience .sc-audience__path {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-audience .sc-audience__path,
	.sc-audience .sc-audience__path-from::after {
		transition-duration: 0.01ms !important;
	}
}


/* --- przeciaganie karuzel myszka -----------------------------------
   Kursor sygnalizuje, ze tor da sie zlapac. Na dotyku nic sie nie
   zmienia - tam dziala natywny gest.
   -------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
	.sc-cases .sc-cases__track,
	.sc-team .sc-team__track {
		cursor: grab;
	}

	.sc-cases .sc-cases__track.is-dragging,
	.sc-team .sc-team__track.is-dragging {
		cursor: grabbing;
		/* w trakcie ciagniecia nie zaznaczamy tekstu w kartach */
		user-select: none;
		scroll-behavior: auto;
	}

	.sc-cases .sc-cases__track.is-dragging img,
	.sc-team .sc-team__track.is-dragging img {
		pointer-events: none;
	}
}

/* ===============================================================
   AUDIENCE - KAFELKI
   Wersja "Dla kogo" z siatka odbiorcow po prawej. Uklad wlacza sie
   sam, gdy w sekcji jest .sc-audience__tiles - stara wersja bez
   kafelkow zostaje nietknieta.
   Motyw z szablonu referencyjnego: kafelek w cienkiej ramce,
   ikona, nazwa i jedno zdanie.
   =============================================================== */

.sc-audience > .ct-section-inner-wrap:has(> .sc-audience__tiles),
.sc-audience > .sc-audience__inner:has(> .sc-audience__tiles) {
	display: grid !important;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	align-items: start !important;
	gap: clamp(36px, 5vw, 96px);
}

.sc-audience .sc-audience__head {
	display: block !important;
	min-width: 0;
	/* naglowek zostaje w polu widzenia, gdy kafelki sa wyzsze */
	position: sticky;
	top: clamp(96px, 10vw, 130px);
}

.sc-audience .sc-audience__head .sc-audience__text {
	max-width: 40ch;
}

/* --- siatka kafelkow --- */

.sc-audience .sc-audience__tiles {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch !important;
	gap: clamp(14px, 1.6vw, 22px);
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-audience .sc-audience__tile {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	margin: 0;
	padding: clamp(24px, 2.6vw, 34px);
	min-width: 0;
	background: #fff;
	border: 1px solid var(--sc-aud-line);
	border-radius: 16px;
	transition: border-color 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease;
}

.sc-audience .sc-audience__tile:hover {
	border-color: #b9c9e8;
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(6, 20, 54, 0.1);
}

/* Ikona to obrazek wstawiony w Oxygenie. Pole z tlem robi sam
   obrazek przez padding, wiec nie trzeba go opakowywac. */
.sc-audience .sc-audience__tile .sc-audience__icon {
	display: block;
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	max-width: none;
	margin-bottom: clamp(20px, 2.2vw, 28px);
	padding: 14px;
	background: #eef3ff;
	border-radius: 14px;
	object-fit: contain;
}

.sc-audience .sc-audience__tile-title {
	margin: 0 0 10px;
	color: var(--sc-ink);
	font-size: clamp(17px, 1.45vw, 21px);
	font-weight: 600;
	letter-spacing: -0.012em;
	line-height: 1.3;
}

.sc-audience .sc-audience__tile-text {
	margin: 0;
	color: var(--sc-muted);
	font-size: clamp(14px, 1.1vw, 16px);
	line-height: 1.6;
}

/* --- jasne tlo sekcji, gdy sasiednie sekcje sa biale --- */

.sc-audience.sc-audience--tinted {
	background: #f6f9ff;
}

/* --- ciemny wariant --- */

.sc-audience.sc-audience--dark .sc-audience__tile {
	background: rgba(255, 255, 255, 0.04);
}

.sc-audience.sc-audience--dark .sc-audience__tile:hover {
	border-color: rgba(255, 255, 255, 0.32);
	box-shadow: none;
}

.sc-audience.sc-audience--dark .sc-audience__tile .sc-audience__icon {
	background: rgba(255, 255, 255, 0.1);
}

.sc-audience.sc-audience--dark .sc-audience__tile-title {
	color: #fff;
}

.sc-audience.sc-audience--dark .sc-audience__tile-text {
	color: rgba(215, 226, 246, 0.78);
}

/* --- responsywnosc --- */

@media (max-width: 1000px) {
	.sc-audience > .ct-section-inner-wrap:has(> .sc-audience__tiles),
	.sc-audience > .sc-audience__inner:has(> .sc-audience__tiles) {
		grid-template-columns: 1fr;
	}

	.sc-audience .sc-audience__head {
		position: static;
	}

	.sc-audience .sc-audience__head .sc-audience__text {
		max-width: 60ch;
	}
}

@media (max-width: 560px) {
	.sc-audience .sc-audience__tiles {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-audience .sc-audience__tile {
		transition-duration: 0.01ms !important;
	}

	.sc-audience .sc-audience__tile:hover {
		transform: none;
	}
}


/* ===============================================================
   VIDEO MODAL
   Okno z filmem otwierane przyciskiem play w hero. Buduje je JS
   jako natywny <dialog>, wiec Esc i blokada fokusu dzialaja same.
   =============================================================== */

.sc-video-modal {
	/* proporcje filmu ustawia JS po wczytaniu metadanych */
	--sc-video-ratio: 1.7778;
	--sc-video-room: calc(100dvh - 120px);

	width: min(1100px, calc(100vw - 32px), calc(var(--sc-video-room) * var(--sc-video-ratio)));
	max-width: none;
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: 0;
	overflow: visible;
	background: transparent;
	border: 0;
}

.sc-video-modal::backdrop {
	background: rgba(6, 16, 42, 0.86);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.sc-video-modal[open] {
	animation: sc-video-in 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes sc-video-in {
	from {
		opacity: 0;
		transform: scale(0.96);
	}
}

/* przewijanie strony stoi, gdy film jest otwarty */
html.sc-video-open {
	overflow: hidden;
}

.sc-video-modal .sc-video-modal__frame {
	position: relative;
	width: 100%;
	background: #000;
	border-radius: 16px;
	box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
}

.sc-video-modal .sc-video-modal__video {
	display: block;
	width: 100%;
	max-height: var(--sc-video-room);
	aspect-ratio: var(--sc-video-ratio);
	object-fit: contain;
	background: #000;
	border-radius: 16px;
}

.sc-video-modal .sc-video-modal__close {
	position: absolute;
	top: -52px;
	right: 0;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 180ms ease;
}

.sc-video-modal .sc-video-modal__close::before {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 3l10 10M13 3 3 13'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 3l10 10M13 3 3 13'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sc-video-modal .sc-video-modal__close:hover {
	background: rgba(255, 255, 255, 0.24);
}

.sc-video-modal .sc-video-modal__close:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.7);
	outline-offset: 3px;
}

/* na niskim ekranie nad filmem nie ma miejsca - krzyzyk wchodzi w kadr */
@media (max-height: 560px), (max-width: 560px) {
	.sc-video-modal .sc-video-modal__close {
		top: 10px;
		right: 10px;
		z-index: 2;
		background: rgba(0, 0, 0, 0.5);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-video-modal[open] {
		animation: none;
	}
}

/* ===============================================================
   ANIMACJE
   Jeden mechanizm na cala strone: sekcje wchodza przy przewijaniu,
   hero uklada sie po wejsciu na strone, liczby w statystykach
   doliczaja do swojej wartosci.

   Wszystko wisi na klasie .sc-anim, ktora dokłada skrypt. Bez JS
   klasa sie nie pojawia i tresc jest po prostu widoczna - nic nie
   zostaje ukryte na stale. Przy ograniczonej animacji w systemie
   caly mechanizm sie wylacza.
   =============================================================== */

.sc-anim [data-sc-reveal] {
	opacity: 0;
	transform: translate3d(0, 16px, 0);
	transition:
		opacity 620ms cubic-bezier(0.22, 1, 0.36, 1) var(--sc-reveal-delay, 0ms),
		transform 620ms cubic-bezier(0.22, 1, 0.36, 1) var(--sc-reveal-delay, 0ms);
	will-change: opacity, transform;
}

.sc-anim [data-sc-reveal].is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Kadr ze zdjeciem albo filmem dochodzi z lekkim powiekszeniem -
   ruch jest wtedy spokojniejszy niz samo przesuniecie. */
.sc-anim [data-sc-reveal="media"] {
	transform: translate3d(0, 20px, 0) scale(0.985);
}

/* Hero uklada sie samo po wejsciu, bez czekania na przewijanie. */
.sc-anim [data-sc-enter] {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	animation: sc-enter 760ms cubic-bezier(0.22, 1, 0.36, 1) var(--sc-reveal-delay, 0ms) forwards;
}

@keyframes sc-enter {
	to {
		opacity: 1;
		transform: none;
	}
}

/* liczba w trakcie doliczania nie moze zmieniac szerokosci */
.sc-anim .sc-stat__value,
.sc-anim .sc-figure__value {
	font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
	.sc-anim [data-sc-reveal],
	.sc-anim [data-sc-enter] {
		opacity: 1;
		transform: none;
		animation: none;
		transition: none;
	}
}

/* -------------------------------------------------------------------
   TYMCZASOWO UKRYTE - odnosniki "Dowiedz sie wiecej" (Compliance dla firm)

   Prosba klienta z 02.10.2026: nie usuwac, tylko schowac do czasu, az
   powstana docelowe podstrony dla Sygnalistow, AML, Antykorupcji i RODO.
   Zeby je przywrocic, wystarczy skasowac ta regule.
   ------------------------------------------------------------------- */

.sc-scope .sc-scope__link {
	display: none !important;
}


/* -------------------------------------------------------------------
   Pakiety cenowe (.sc-pack)

   Karta pokazuje nazwe, cene i kilka punktow, reszta opisu chowa sie
   pod przyciskiem "Szczegoly pakietu". Liczba kolumn idzie za liczba
   kart (--sc-pack-count), zeby trzy i cztery pakiety wygladaly rowno.
   ------------------------------------------------------------------- */

.sc-packages .sc-pack__grid,
.sc-pack__grid {
	display: grid !important;
	grid-template-columns: repeat(var(--sc-pack-count, 3), minmax(0, 1fr));
	align-items: start;
	gap: clamp(18px, 2vw, 28px);
	margin: clamp(30px, 3.4vw, 48px) 0 0;
	padding: 0;
	list-style: none;
}

.sc-pack__card {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	margin: 0;
	padding: clamp(24px, 2.6vw, 34px);
	min-width: 0;
	background: #fff;
	border: 1px solid #dfe6f3;
	border-radius: 18px;
}

.sc-pack__card--featured {
	background: #f6f9ff;
	border-color: #2451c6;
	box-shadow: 0 18px 40px rgba(14, 33, 73, 0.1);
}

.sc-pack__badge {
	align-self: flex-start;
	margin: 0 0 12px;
	padding: 5px 12px;
	background: #2451c6;
	border-radius: 999px;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sc-pack__name {
	margin: 0 0 6px;
	color: #0e2149;
	font-size: clamp(18px, 1.5vw, 22px);
	font-weight: 600;
	line-height: 1.25;
}

.sc-pack__tagline {
	margin: 0 0 clamp(14px, 1.6vw, 20px);
	color: #5b6b86;
	font-size: clamp(13px, 1.05vw, 15px);
	line-height: 1.5;
}

.sc-pack__price {
	margin: 0;
	color: #2451c6;
	font-size: clamp(17px, 1.45vw, 21px);
	font-weight: 700;
	line-height: 1.3;
}

.sc-pack__price-note {
	margin: 4px 0 0;
	color: #5b6b86;
	font-size: clamp(12px, 1vw, 14px);
	line-height: 1.4;
}

.sc-pack__audience {
	margin: clamp(16px, 1.8vw, 22px) 0 0;
	color: #5b6b86;
	font-size: clamp(13px, 1.05vw, 15px);
	line-height: 1.55;
}

.sc-pack__audience strong {
	color: #26354a;
}

.sc-pack .sc-pack__points,
.sc-pack__points {
	display: grid;
	gap: 9px;
	margin: clamp(16px, 1.8vw, 22px) 0 0;
	padding: 0;
	list-style: none;
}

.sc-pack__point {
	position: relative;
	display: block;
	margin: 0;
	padding-left: 24px;
	color: #26354a;
	font-size: clamp(13px, 1.05vw, 15px);
	line-height: 1.5;
}

.sc-pack__point::before {
	content: "";
	position: absolute;
	top: 0.42em;
	left: 0;
	width: 13px;
	height: 9px;
	background: #2451c6;
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 9'%3E%3Cpath d='M1 4.6 4.5 8 12 1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 9'%3E%3Cpath d='M1 4.6 4.5 8 12 1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

.sc-pack__cta {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	margin: clamp(20px, 2.2vw, 28px) 0 0;
	min-height: 48px;
	padding: 12px 22px;
	background: #2451c6;
	border-radius: 999px;
	color: #fff;
	font-size: clamp(13px, 1.1vw, 15px);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 180ms ease;
}

.sc-pack__cta:hover,
.sc-pack__cta:focus-visible {
	background: #1b3fa0;
}

.sc-pack__more {
	align-self: flex-start;
	margin: clamp(14px, 1.6vw, 18px) 0 0;
	padding: 0;
	appearance: none;
	border: 0;
	background: none;
	color: #2451c6;
	font-family: inherit;
	font-size: clamp(13px, 1.05vw, 15px);
	font-weight: 600;
	line-height: 1.2;
	text-align: left;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.sc-pack__detail[hidden] {
	display: none;
}

.sc-pack__detail {
	margin-top: clamp(16px, 1.8vw, 22px);
	padding-top: clamp(16px, 1.8vw, 22px);
	border-top: 1px solid #dfe6f3;
}

.sc-pack__label {
	margin: clamp(14px, 1.6vw, 18px) 0 8px;
	color: #2451c6;
	font-size: clamp(11px, 0.9vw, 13px);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sc-pack__detail > .sc-pack__label:first-child {
	margin-top: 0;
}

.sc-pack .sc-pack__list,
.sc-pack__list {
	display: grid;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-pack__item {
	position: relative;
	display: block;
	margin: 0;
	padding-left: 17px;
	color: #5b6b86;
	font-size: clamp(12px, 1vw, 14px);
	line-height: 1.5;
}

.sc-pack__item::before {
	content: "";
	position: absolute;
	top: 0.6em;
	left: 0;
	width: 5px;
	height: 5px;
	background: #9fb0c9;
	border-radius: 50%;
}

.sc-pack__variants {
	display: grid;
	gap: 1px;
	background: #dfe6f3;
	border: 1px solid #dfe6f3;
	border-radius: 10px;
	overflow: hidden;
}

.sc-pack__variant {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 13px;
	background: #fff;
	font-size: clamp(12px, 1vw, 14px);
	line-height: 1.4;
}

.sc-pack__variant span {
	color: #5b6b86;
}

.sc-pack__variant strong {
	color: #0e2149;
	font-weight: 600;
	white-space: nowrap;
}

.sc-pack__meta {
	margin: clamp(14px, 1.6vw, 18px) 0 0;
	color: #26354a;
	font-size: clamp(12px, 1vw, 14px);
	line-height: 1.5;
}

.sc-pack__meta span {
	color: #5b6b86;
}

.sc-pack__result {
	margin: 10px 0 0;
	color: #5b6b86;
	font-size: clamp(12px, 1vw, 14px);
	font-style: italic;
	line-height: 1.55;
}

@media (max-width: 1100px) {
	.sc-packages .sc-pack__grid,
	.sc-pack__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 680px) {
	.sc-packages .sc-pack__grid,
	.sc-pack__grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}


/* -------------------------------------------------------------------
   Formularze (.sc-form)

   Pole-pulapka na boty musi byc niewidoczne dla czlowieka, ale wciaz
   obecne w drzewie - dlatego odsuwamy je poza ekran zamiast chowac
   przez display:none, ktorego czesc botow sie spodziewa.
   ------------------------------------------------------------------- */

.sc-form {
	width: 100%;
	color: var(--sc-ink, #26354a);
}

.sc-form__title {
	margin: 0 0 clamp(18px, 2vw, 26px);
	color: var(--sc-ink, #26354a);
	font-size: clamp(20px, 1.8vw, 26px);
	font-weight: 600;
	line-height: 1.25;
}

.sc-form .sc-form__form {
	display: grid !important;
	gap: clamp(14px, 1.6vw, 20px);
	margin: 0;
}

.sc-form__row {
	display: grid;
	gap: 7px;
	margin: 0;
	min-width: 0;
	border: 0;
	padding: 0;
}

.sc-form__label {
	margin: 0;
	padding: 0;
	color: var(--sc-ink, #26354a);
	font-size: clamp(13px, 1.05vw, 15px);
	font-weight: 600;
	line-height: 1.35;
}

.sc-form__req {
	color: #c0392b;
}

.sc-form .sc-form__input {
	width: 100%;
	max-width: none;
	padding: 13px 16px;
	background: #fff;
	border: 1px solid #dfe6f3;
	border-radius: 10px;
	color: var(--sc-ink, #26354a);
	font-family: inherit;
	font-size: clamp(14px, 1.1vw, 16px);
	line-height: 1.5;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.sc-form .sc-form__input:focus {
	outline: none;
	border-color: #2451c6;
	box-shadow: 0 0 0 3px rgba(36, 81, 198, 0.18);
}

.sc-form textarea.sc-form__input {
	resize: vertical;
	min-height: 120px;
}

/* --- pola wyboru jako pigulki --- */

.sc-form__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sc-form__chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin: 0;
	cursor: pointer;
}

.sc-form__chip input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.sc-form__chip span {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 18px;
	background: #fff;
	border: 1px solid #dfe6f3;
	border-radius: 999px;
	font-size: clamp(13px, 1.05vw, 15px);
	line-height: 1.2;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.sc-form__chip input:checked + span {
	background: #2451c6;
	border-color: #2451c6;
	color: #fff;
}

.sc-form__chip input:focus-visible + span {
	outline: 3px solid rgba(36, 81, 198, 0.45);
	outline-offset: 2px;
}

/* --- zgoda --- */

.sc-form__check {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 11px;
	margin: 0;
	color: var(--sc-muted, #5b6b86);
	font-size: clamp(12px, 1vw, 14px);
	line-height: 1.55;
	cursor: pointer;
}

.sc-form__check input {
	margin: 3px 0 0;
	width: 18px;
	height: 18px;
	accent-color: #2451c6;
}

.sc-form__privacy {
	color: #2451c6;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --- przycisk --- */

.sc-form .sc-form__submit {
	justify-self: start;
	margin-top: 4px;
	min-height: 52px;
	padding: 14px 32px;
	appearance: none;
	background: #2451c6;
	border: 0;
	border-radius: 999px;
	color: #fff;
	font-family: inherit;
	font-size: clamp(14px, 1.1vw, 16px);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 180ms ease;
}

.sc-form .sc-form__submit:hover,
.sc-form .sc-form__submit:focus-visible {
	background: #1b3fa0;
}

/* --- komunikaty --- */

.sc-form__notice {
	margin: 0 0 clamp(14px, 1.6vw, 20px);
	padding: 14px 18px;
	border-radius: 10px;
	font-size: clamp(13px, 1.05vw, 15px);
	line-height: 1.5;
}

.sc-form__notice--ok {
	background: #e8f6ee;
	border: 1px solid #b7e0c8;
	color: #1d6b3f;
}

.sc-form__notice--error {
	background: #fdecea;
	border: 1px solid #f3c0ba;
	color: #a32b1c;
}

/* pulapka na boty - poza ekranem, ale obecna w drzewie */
.sc-form__trap {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* --- boks formularza i uklad pol --- */

/* O ukladzie decyduje szerokosc SAMEGO BOKSU, a nie okna przegladarki.
   Dzieki temu ten sam shortcode uklada sie jednokolumnowo, gdy stoi w
   waskiej kolumnie obok tekstu, i parami, gdy dostanie cala szerokosc.
   Zwykly @media tego nie potrafi - mierzylby okno, nie kolumne. */
.sc-form {
	container-type: inline-size;
	container-name: scform;
}

.sc-form--box {
	padding: clamp(24px, 3vw, 44px);
	background: #ffffff;
	border-radius: 22px;
	box-shadow: 0 24px 60px rgba(14, 33, 73, 0.1);
}

.sc-form .sc-form__form {
	grid-template-columns: minmax(0, 1fr);
}

@container scform (min-width: 540px) {
	.sc-form .sc-form__form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(16px, 1.8vw, 24px);
	}

	.sc-form .sc-form__row,
	.sc-form .sc-form__notice {
		grid-column: 1 / -1;
	}

	/* pola oznaczone jako polowkowe staja parami */
	.sc-form .sc-form__row--half {
		grid-column: auto;
	}
}



/* -------------------------------------------------------------------
   Konfigurator w ukladzie dwukolumnowym (.sc-configurator--split)

   Wariant sekcji .sc-configurator: po lewej tresc, po prawej boks
   formularza. Podstawowa wersja jest wysrodkowana i waska, przez co na
   szerokim ekranie zostawiala puste boki - tu kolumna z tekstem je
   wypelnia. Struktura powstaje w Oxygenie, stad same klasy.
   ------------------------------------------------------------------- */

.sc-configurator.sc-configurator--split > .ct-section-inner-wrap,
.sc-configurator.sc-configurator--split > .sc-configurator__inner {
	align-items: stretch !important;
	max-width: var(--sc-container) !important;
}

.sc-configurator--split .sc-configurator__grid {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 4vw, 64px);
	width: 100%;
}

@media (min-width: 980px) {
	.sc-configurator--split .sc-configurator__grid {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	}
}

.sc-configurator--split .sc-configurator__intro {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	min-width: 0;
}

/* w tym wariancie tekst jest do lewej, nie na srodku */
.sc-configurator--split .sc-configurator__eyebrow,
.sc-configurator--split .sc-configurator__title,
.sc-configurator--split .sc-configurator__lead {
	max-width: none;
	text-align: left;
}

.sc-configurator--split .sc-configurator__lead {
	margin-bottom: clamp(22px, 2.6vw, 32px);
	max-width: 48ch;
}

.sc-configurator--split .sc-configurator__points {
	display: grid !important;
	gap: clamp(12px, 1.4vw, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-configurator--split .sc-configurator__point {
	position: relative;
	display: block;
	margin: 0;
	padding-left: 34px;
	color: var(--sc-cfg-ink);
	font-size: clamp(14px, 1.15vw, 16px);
	line-height: 1.5;
}

.sc-configurator--split .sc-configurator__point::before {
	content: "";
	position: absolute;
	top: 0.1em;
	left: 0;
	width: 22px;
	height: 22px;
	background: rgba(47, 107, 255, 0.12);
	border-radius: 50%;
}

.sc-configurator--split .sc-configurator__point::after {
	content: "";
	position: absolute;
	top: 0.52em;
	left: 6px;
	width: 11px;
	height: 8px;
	background: var(--sc-cfg-accent);
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8'%3E%3Cpath d='M1 4.2 3.9 7 10 1' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8'%3E%3Cpath d='M1 4.2 3.9 7 10 1' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

.sc-configurator--split .sc-configurator__note {
	margin: clamp(22px, 2.6vw, 32px) 0 0;
	padding-top: clamp(18px, 2vw, 24px);
	border-top: 1px solid rgba(16, 32, 66, 0.1);
	max-width: 46ch;
	color: var(--sc-cfg-muted);
	font-size: clamp(12px, 1vw, 14px);
	line-height: 1.55;
}

.sc-configurator--split .sc-configurator__form {
	display: block !important;
	min-width: 0;
	width: 100%;
}


/* -------------------------------------------------------------------
   Kontakt w ukladzie dwukolumnowym (.sc-contact--split)

   Wariant sekcji .sc-contact: po lewej dane kontaktowe, po prawej boks
   formularza. W tym ukladzie karty z telefonem, mailem i adresem stoja
   jedna pod druga - w waskiej kolumnie trzy obok siebie bylyby za ciasne.
   Struktura powstaje w Oxygenie, stad same klasy.
   ------------------------------------------------------------------- */

.sc-contact--split .sc-contact__split {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: clamp(32px, 4vw, 64px);
	width: 100%;
}

@media (min-width: 980px) {
	.sc-contact--split .sc-contact__split {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	}
}

.sc-contact--split .sc-contact__intro {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	min-width: 0;
}

/* karty jedna pod druga - kreski rozdzielajace daje ta sama siatka */
.sc-contact--split .sc-contact__grid {
	grid-template-columns: minmax(0, 1fr);
	margin-top: clamp(26px, 3vw, 38px);
}

.sc-contact--split .sc-contact__card {
	padding: clamp(20px, 2.2vw, 28px) clamp(20px, 2.2vw, 28px);
}

.sc-contact--split .sc-contact__lead {
	max-width: 46ch;
}

.sc-contact--split .sc-contact__form {
	display: block !important;
	min-width: 0;
	width: 100%;
}

/* --- baner cookies ---------------------------------------------------
   Pasek siedzi przy dolnej krawedzi okna. Na telefonie zajmuje cala
   szerokosc, na szerszym ekranie jest waska karta w lewym rogu, zeby
   nie zaslaniala tresci.
   --------------------------------------------------------------------- */

.sc-cookies {
	position: fixed;
	z-index: 9999;
	right: 16px;
	bottom: 16px;
	left: 16px;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.sc-cookies.is-open {
	opacity: 1;
	transform: none;
}

.sc-cookies__box {
	box-sizing: border-box;
	max-width: 520px;
	padding: 20px 22px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 18px 44px rgba(12, 40, 116, 0.18);
}

.sc-cookies__title {
	margin: 0 0 8px;
	color: #10203f;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.sc-cookies__text {
	margin: 0 0 16px;
	color: #4a5a74;
	font-size: 14px;
	line-height: 1.55;
}

.sc-cookies__link {
	color: #2f6bff;
	text-decoration: underline;
}

.sc-cookies__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Oba przyciski maja te sama wage - odmowa nie moze byc trudniejsza
   do znalezienia niz zgoda. */
.sc-cookies__btn {
	flex: 1 1 160px;
	padding: 12px 18px;
	border: 1px solid #2f6bff;
	border-radius: 999px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.sc-cookies__btn--accept {
	color: #fff;
	background: #2f6bff;
}

.sc-cookies__btn--accept:hover {
	background: #1b51d8;
	border-color: #1b51d8;
}

.sc-cookies__btn--reject {
	color: #2f6bff;
	background: #fff;
}

.sc-cookies__btn--reject:hover {
	background: #eef3ff;
}

.sc-cookies__btn:focus-visible {
	outline: 2px solid #10203f;
	outline-offset: 2px;
}

/* Przycisk w stopce ma wygladac jak sasiednie linki prawne. */
.sc-footer__legal-button {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-decoration: underline;
}

@media (min-width: 720px) {
	.sc-cookies {
		right: auto;
		bottom: 24px;
		left: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-cookies {
		transition: none;
	}
}
/* ===============================================================
   4. UTILE
   Klasy pomocnicze do dokladania na sekcje w Oxygenie.
   Padding sekcji siedzi na .ct-section-inner-wrap, wiec kazda
   klasa celuje i w sekcje, i w jej wrapper. To jedyne miejsce
   w tym pliku, gdzie !important jest w porzadku - utile z
   zalozenia maja nadpisywac reguly sekcji.
   =============================================================== */

.sc-pt-0,
.sc-pt-0 > .ct-section-inner-wrap,
.sc-pt-0 > [class$="__inner"] {
	padding-top: 0 !important;
}

.sc-pb-0,
.sc-pb-0 > .ct-section-inner-wrap,
.sc-pb-0 > [class$="__inner"] {
	padding-bottom: 0 !important;
}


/* --- karuzele: wrapper shortcode'u musi trzymac szerokosc kolumny ---
   Oxygenowy .ct-section-inner-wrap to flex w kolumnie z align-items:
   flex-start, wiec dziecko dobiera szerokosc do max-content. Dla toru
   z kartami to szerokosc wszystkich kart razem - i strona zaczyna sie
   przewijac w poziomie. Wymuszamy 100% i pozwalamy sie kurczyc.
   -------------------------------------------------------------------- */

.sc-cases > .ct-section-inner-wrap,
.sc-cases > .sc-cases__inner {
	align-items: stretch !important;
}

.sc-cases .ct-shortcode:has(.sc-cases__carousel),
.sc-cases .ct-code-block:has(.sc-cases__carousel),
.sc-cases .sc-cases__carousel,
.sc-trust .ct-shortcode:has(.sc-trust__logos),
.sc-trust .sc-trust__logos {
	width: 100%;
	min-width: 0;
}

.sc-cases .sc-cases__track,
.sc-team .sc-team__track,
.sc-trust .sc-trust__logos-track {
	min-width: 0;
}


/* --- jasna wersja sekcji zakresu ----------------------------------
   Ten sam uklad, odwrocona paleta. Wiekszosc zalatwiaja zmienne
   sekcji; osobno nadpisujemy tylko te miejsca, gdzie w bazie
   siedzi twarde #fff.
   ------------------------------------------------------------------- */

.sc-scope.sc-scope--light {
	--sc-scope-deep: #ffffff;
	--sc-scope-mid: #f6f9ff;
	--sc-scope-accent: #2f6bff;
	--sc-scope-text: #55647e;
	--sc-scope-line: #dfe6f3;
	/* eyebrow wraca do ciemniejszego niebieskiego - wersja "on dark"
	   bylaby na bialym za jasna */
	--sc-eyebrow-color: var(--sc-accent);

	color: var(--sc-ink);
}

/* siatka w tle: ciemne linie na jasnym zamiast odwrotnie */
.sc-scope.sc-scope--light::before {
	background-image:
		linear-gradient(to right, rgba(16, 32, 66, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(16, 32, 66, 0.05) 1px, transparent 1px);
}

.sc-scope.sc-scope--light .sc-scope__title,
.sc-scope.sc-scope--light .sc-scope__name {
	color: var(--sc-ink);
}

/* w wersji ciemnej hover rozjasnial link do bieli - tutaj musi ciemniec */
.sc-scope.sc-scope--light .sc-scope__link:hover,
.sc-scope.sc-scope--light .sc-scope__link:focus-visible {
	color: var(--sc-navy);
}

/* wiersz kontaktowy z wariantu --plain */
.sc-scope.sc-scope--light .sc-scope__contact-item {
	color: var(--sc-ink);
}

.sc-scope.sc-scope--light a.sc-scope__contact-item:hover,
.sc-scope.sc-scope--light a.sc-scope__contact-item:focus-visible {
	color: var(--sc-scope-accent);
}

.sc-scope.sc-scope--light a:focus-visible {
	outline-color: rgba(47, 107, 255, 0.45);
}


/* Tekst tylko dla czytnikow ekranu. Uzywa go m.in. paginacja
   wpisow - strzalka jest ozdoba, opis kryje sie tutaj. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	white-space: normal;
}

/* -------------------------------------------------------------------
   Odstepy - klasy pomocnicze do dokladania w Oxygenie

   Liczba w nazwie to pikseli: .mt-24 = margin-top 24px.
   mt = od gory, mb = od dolu. !important, bo utile maja wygrywac
   z regulami sekcji - to jest ich jedyne zadanie.
   ------------------------------------------------------------------- */

.mt-0 { margin-top: 0 !important; }
.mt-4 { margin-top: 4px !important; }
.mt-8 { margin-top: 8px !important; }
.mt-12 { margin-top: 12px !important; }
.mt-16 { margin-top: 16px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-24 { margin-top: 24px !important; }
.mt-32 { margin-top: 32px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-48 { margin-top: 48px !important; }
.mt-56 { margin-top: 56px !important; }
.mt-64 { margin-top: 64px !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-4 { margin-bottom: 4px !important; }
.mb-8 { margin-bottom: 8px !important; }
.mb-12 { margin-bottom: 12px !important; }
.mb-16 { margin-bottom: 16px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-24 { margin-bottom: 24px !important; }
.mb-32 { margin-bottom: 32px !important; }
.mb-40 { margin-bottom: 40px !important; }
.mb-48 { margin-bottom: 48px !important; }
.mb-56 { margin-bottom: 56px !important; }
.mb-64 { margin-bottom: 64px !important; }

/* Szerokosc wiersza tekstu - zeby akapit nie rozciagal sie na cala sekcje.
   .measure = wygodna dlugosc do czytania, .measure-wide = szerzej. */
.measure { max-width: 820px !important; }
.measure-wide { max-width: 1040px !important; }
.measure-narrow { max-width: 640px !important; }

/* wysrodkowanie bloku z ograniczona szerokoscia */
.mx-auto { margin-inline: auto !important; }