/* ============================================================
   IJS-CUSTOM.CSS — centralny plik stylów modułów Ijsbergen
   ============================================================
   Ładowany PO stylach motywu i Beavera, działa WYŁĄCZNIE na
   klasy .ijs-* — nie dotyka strony głównej ani innych modułów.

   >>> NIE EDYTUJ TEGO PLIKU <<<
   Patche Claude'a go nadpisują. Swoje rozmiary, kolory i własne
   reguły trzymaj w assets/ijs-vars.css — tamten plik jest Twój
   i nigdy nie jest nadpisywany (ładuje się PO tym, więc wygrywa).
   Wartości :root poniżej to tylko domyślne fallbacki.
   ============================================================ */

:root {
	/* Kolory akcentów (presety w modułach) */
	--ijs-green: #5fe08e;
	--ijs-blue:  #8ed3f4;

	/* Tytuły sekcji (H2 w modułach: karty, checklista, usługi, certyfikaty, licznik) */
	--ijs-h-section: 50px;
	--ijs-h-section-mobile: 30px;

	/* Tła (te same co na makiecie):
	   strona/sekcja ciemna  #0b0e11
	   sekcja jaśniejsza     #12161a  ← ustaw jako tło wiersza w Beaverze (co drugi wiersz)
	   karty                 #16191d (gradient #1a1e23 → #131619) */

	/* Tytuł hero (H1) */
	--ijs-h-hero: 60px;
	--ijs-h-hero-mobile: 32px;

	/* Tytuły kart / punktów (H3) */
	--ijs-h-card: 21px;
	--ijs-h-check: 19px;

	/* Teksty */
	--ijs-sub-size: 16.5px;    /* opisy pod tytułami sekcji */
	--ijs-text-size: 15.5px;   /* teksty w kartach/punktach */
	--ijs-text-color: #aeb6bd; /* szary tekstów */

	/* Białe kafle certyfikatów */
	--ijs-cert-name: 1.4rem;   /* nazwa certyfikatu */
	--ijs-cert-desc: 1.2rem;   /* opis pod nazwą */
}

/* Kafle certyfikatów — rozmiary sterowane zmiennymi powyżej
   (motyw nadpisuje przez --font-size, stąd !important) */
.ijs-cert-tile .ijs-cert-tile__name {
	font-size: var(--ijs-cert-name) !important;
	line-height: 1.25 !important;
}
.ijs-cert-tile .ijs-cert-tile__desc {
	font-size: var(--ijs-cert-desc) !important;
	line-height: 1.35 !important;
}

/* ------------------------------------------------------------
   Wymuszenie rozmiarów — motyw nadpisuje nagłówki przez
   html h1–h6 { --font-size }, stąd !important na naszych klasach.
   ------------------------------------------------------------ */

/* Tytuły sekcji (H2) */
.fl-builder-content .ijs-numcards-heading,
.fl-builder-content .ijs-checklist-heading,
.fl-builder-content .ijs-svc-heading,
.fl-builder-content .ijs-cert-heading,
.fl-builder-content .ijs-stat-heading,
.ijs-numcards-heading,
.ijs-checklist-heading,
.ijs-svc-heading,
.ijs-cert-heading,
.ijs-stat-heading {
	font-size: var(--ijs-h-section) !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	color: #ffffff !important;
}

/* Tytuł hero (H1/H2) */
.fl-builder-content .ijs-hero__title,
.ijs-hero__title {
	font-size: var(--ijs-h-hero) !important;
	line-height: 1.15 !important;
	font-weight: 700 !important;
	color: #ffffff !important;
}

/* Tytuły kart (H3) */
.fl-builder-content .ijs-numcard__title,
.fl-builder-content .ijs-svc-card__title,
.ijs-numcard__title,
.ijs-svc-card__title {
	font-size: var(--ijs-h-card) !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
	color: #ffffff !important;
}

/* Tytuły punktów checklisty (H3) */
.fl-builder-content .ijs-check-item__title,
.ijs-check-item__title {
	font-size: var(--ijs-h-check) !important;
	line-height: 1.35 !important;
	font-weight: 700 !important;
	color: #ffffff !important;
}

/* Opisy pod tytułami sekcji */
.ijs-numcards-sub, .ijs-numcards-sub p,
.ijs-checklist-sub, .ijs-checklist-sub p,
.ijs-svc-sub, .ijs-svc-sub p,
.ijs-cert-sub, .ijs-cert-sub p,
.ijs-stat-text, .ijs-stat-text p,
.ijs-hero__text, .ijs-hero__text p {
	font-size: var(--ijs-sub-size) !important;
	line-height: 1.6 !important;
	color: var(--ijs-text-color) !important;
}

/* Teksty w kartach i punktach */
.ijs-numcard__text, .ijs-numcard__text p,
.ijs-check-item__text, .ijs-check-item__text p,
.ijs-svc-card__list li {
	font-size: var(--ijs-text-size) !important;
	line-height: 1.6 !important;
	color: var(--ijs-text-color) !important;
}

/* Fragmenty tytułów w *gwiazdkach* — kolor akcentu ponad motywem.
   font-size/weight/family: inherit — motyw stylował spany w nagłówkach
   i fragment renderował się inną wielkością niż reszta tytułu. */
.ijs-accent-text {
	color: var(--ijs-accent, var(--ijs-green)) !important;
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
}

/* ------------------------------------------------------------
   Karty usług — motyw wstrzykuje własne (pomarańczowe) ikony list.
   Wymuszamy nasze kółka ✔ i czyścimy style list motywu.
   ------------------------------------------------------------ */
.fl-builder-content .ijs-svc-card__list,
.ijs-svc-card__list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.ijs-svc-card__list li::marker { content: none !important; }
.fl-builder-content .ijs-svc-card__list li,
.ijs-svc-card__list li {
	position: relative !important;
	padding-left: 30px !important;
	margin: 0 !important;
	background: none !important;
}
.fl-builder-content .ijs-svc-card__list li::before,
.ijs-svc-card__list li::before {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	top: 2px !important;
	width: 20px !important;
	height: 20px !important;
	border-radius: 50% !important;
	background-color: var(--ijs-accent, var(--ijs-blue)) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' stroke='%230b0e11' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-size: 12px 12px !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}

/* Placeholder [ zdjęcie ] w kartach usług — padding i oddech od tekstu */
.ijs-svc-card__placeholder {
	padding: 14px !important;
	text-align: center !important;
}
.ijs-svc-card__placeholder span {
	line-height: 1.5 !important;
	word-break: break-word;
}
.ijs-svc-card { column-gap: 24px !important; }

/* ------------------------------------------------------------
   Hero — poświata pod zdjęciem (opcja w module: „Poświata pod zdjęciem")
   Kolor z akcentu modułu: zielony w sekcjach eko, niebieski w brandowych.
   Siła: --ijs-hero-glow-soft / --ijs-hero-glow-strong (ijs-vars.css).
   Tutaj, a nie tylko w CSS modułu, żeby zmiana działała bez czyszczenia
   cache'u Beavera (BB kompiluje style modułów do plików per strona).
   ------------------------------------------------------------ */
.ijs-hero--glow-soft .ijs-hero__media img {
	box-shadow:
		0 26px 70px -20px color-mix(in srgb, var(--ijs-accent, var(--ijs-green)) var(--ijs-hero-glow-soft, 42%), transparent),
		0 10px 26px -14px rgba(0, 0, 0, 0.55) !important;
}
.ijs-hero--glow-strong .ijs-hero__media img {
	box-shadow:
		0 32px 90px -16px color-mix(in srgb, var(--ijs-accent, var(--ijs-green)) var(--ijs-hero-glow-strong, 62%), transparent),
		0 12px 30px -14px rgba(0, 0, 0, 0.6) !important;
}

/* ------------------------------------------------------------
   Certyfikaty — lodowy hover (opcja „Efekt po najechaniu → Lodowy")
   Szron narasta od czterech rogów do środka, kafel dostaje lodową
   obwódkę, ikona zamarza na błękitno.

   Warstwy (ważne): ::before i ::after mają z-index 1, treść kafla
   z-index 2 — dzięki temu ikona i teksty są NAD szronem, nie pod nim.
   Ikona dostaje ciemniejszy lód niż szron, inaczej ginęłaby na tle.

   Siła szronu: --ijs-ice-frost (ijs-vars.css).
   Duplikat CSS modułu — Beaver kompiluje style modułów do plików per
   strona, więc bez tej kopii efekt pojawiłby się dopiero po przebudowie
   cache'u Beavera.
   ------------------------------------------------------------ */
.ijs-cert-grid--ice .ijs-cert-tile {
	position: relative;
	overflow: hidden;
}
.ijs-cert-grid--ice .ijs-cert-tile > * {
	position: relative;
	z-index: 2;
}
.ijs-cert-grid--ice .ijs-cert-tile::before {
	content: "";
	position: absolute;
	inset: -2px;
	z-index: 1;
	background:
		radial-gradient(60% 60% at 0% 0%, rgba(207, 238, 255, var(--ijs-ice-frost, 0.95)), transparent 68%),
		radial-gradient(60% 60% at 100% 0%, rgba(207, 238, 255, calc(var(--ijs-ice-frost, 0.95) * 0.95)), transparent 68%),
		radial-gradient(65% 65% at 0% 100%, rgba(180, 226, 250, calc(var(--ijs-ice-frost, 0.95) * 0.9)), transparent 70%),
		radial-gradient(65% 65% at 100% 100%, rgba(180, 226, 250, calc(var(--ijs-ice-frost, 0.95) * 0.9)), transparent 70%);
	opacity: 0;
	transform: scale(1.25);
	transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ijs-cert-grid--ice .ijs-cert-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 14px;
	pointer-events: none;
	box-shadow:
		inset 0 0 26px rgba(142, 211, 244, 0.7),
		inset 0 0 0 1px rgba(142, 211, 244, 0.7);
	opacity: 0;
	transition: opacity 0.5s ease;
}
.ijs-cert-grid--ice .ijs-cert-tile:hover {
	transform: translateY(-3px);
	box-shadow:
		0 22px 44px -16px rgba(142, 211, 244, 0.6),
		0 6px 18px rgba(0, 0, 0, 0.35);
}
.ijs-cert-grid--ice .ijs-cert-tile:hover::before {
	opacity: 1;
	transform: scale(1);
}
.ijs-cert-grid--ice .ijs-cert-tile:hover::after {
	opacity: 1;
}
.ijs-cert-grid--ice .ijs-cert-tile:hover .ijs-cert-tile__icon {
	background: linear-gradient(135deg, #1f6d99 0%, #3fa3d4 55%, #7cc9ee 100%);
	transform: translateY(-2px) scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.ijs-cert-grid--ice .ijs-cert-tile::before,
	.ijs-cert-grid--ice .ijs-cert-tile::after { transition: none; }
	.ijs-cert-grid--ice .ijs-cert-tile:hover { transform: none; }
	.ijs-cert-grid--ice .ijs-cert-tile:hover::before { transform: scale(1); }
}

/* (duplikat CSS modułów — patrz uwaga przy lodowym hoverze) */
/* ------------------------------------------------------------
   Checklista — rysowany ptaszek (opcja „Efekt po najechaniu → Rysowany ptaszek")
   Ptaszek rysuje się od nowa (stroke-dashoffset), kółko odbija sprężyście,
   tytuł przechodzi w kolor akcentu. Ujemne marginesy = tło hovera wychodzi
   poza tekst, ale punkty zostają w tej samej siatce co bez efektu.
   ------------------------------------------------------------ */
.ijs-checklist--draw .ijs-check-item {
	position: relative;
	padding: 14px 16px;
	margin: -14px -16px;
	border-radius: 14px;
	transition: background 0.3s ease;
}
.ijs-checklist--draw .ijs-check-item:hover {
	background: rgba(255, 255, 255, 0.025);
}
.ijs-checklist--draw .ijs-check-item__ic {
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.ijs-checklist--draw .ijs-check-item__ic path {
	stroke-dasharray: 21;
}
.ijs-checklist--draw .ijs-check-item:hover .ijs-check-item__ic {
	transform: scale(1.08);
	box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--ijs-accent, #5fe08e) 85%, transparent);
}
.ijs-checklist--draw .ijs-check-item:hover .ijs-check-item__ic path {
	animation: ijs-draw-tick 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes ijs-draw-tick {
	from { stroke-dashoffset: 21; }
	to   { stroke-dashoffset: 0; }
}
.ijs-checklist--draw .ijs-check-item__title {
	transition: color 0.3s ease;
}
.ijs-checklist--draw .ijs-check-item:hover .ijs-check-item__title {
	color: var(--ijs-accent, #5fe08e);
}
/* ------------------------------------------------------------
   Formularz — aktywne pole z gradientem w ruchu
   (opcja „Aktywne pole formularza → Gradient w ruchu")

   Gradient siedzi na ::before pola (1px dookoła inputa), a nie na tle
   samego inputa. Powód: bazowe reguły pól mają background z !important,
   a !important wygrywa z animacją CSS — gradient stałby w miejscu.
   Na focusie input dostaje przezroczystą ramkę i background-clip:
   padding-box, więc gradient prześwituje też przez samą ramkę — stąd
   obrys jest wyraźny (w praktyce 2px: 1px na zewnątrz + 1px ramki).

   NIE zamieniać tego na gradient wprost na ramce pola — próbowane
   w 1.12.9 i 1.12.11, na docelowej stronie wychodzi blado i rozmyto.

   Selektory celują TYLKO w pola z polem tekstowym. Checkbox zgody nie ma
   własnego ciemnego tła, które przykrywa gradient, więc łapał się na
   pełne zielone tło pod tekstem — stąd wykluczenia typów.

   Pasek nad „Bericht": zmierzone na żywej stronie — textarea ma z motywu
   margin-top: 15px, czyli 15px pustego miejsca WEWNĄTRZ kontenera, nad
   polem. Przenosimy odstęp z pola na kontener: wygląd zostaje identyczny
   (zmierzone: 33px przed i po), a obrys przylega równo.

   Tempo przepływu: --ijs-focus-speed (ijs-vars.css).
   ------------------------------------------------------------ */
.ijs-contact__form--focus-anim .wpforms-field:has(> input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"])),
.ijs-contact__form--focus-anim .wpforms-field:has(> textarea),
.ijs-contact__form--focus-anim .wpforms-field:has(> select) {
	position: relative;
	display: flex;
	flex-direction: column;
}
.ijs-contact__form--focus-anim textarea {
	display: block;
	margin-top: 0 !important;
}
.ijs-contact__form--focus-anim .wpforms-field:has(> textarea) {
	margin-top: 15px !important;
}
.ijs-contact__form--focus-anim .wpforms-field:has(> input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]))::before,
.ijs-contact__form--focus-anim .wpforms-field:has(> textarea)::before,
.ijs-contact__form--focus-anim .wpforms-field:has(> select)::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: 0;
	border-radius: 11px;
	pointer-events: none;
	background: linear-gradient(120deg, #8ed3f4, #5fe08e, #8ed3f4, #5fe08e);
	background-size: 300% 100%;
	opacity: 0;
	transition: opacity 0.3s ease;
	animation: ijs-focus-slide var(--ijs-focus-speed, 6s) linear infinite;
	animation-play-state: paused;
}
.ijs-contact__form--focus-anim .wpforms-field:has(> input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"])):focus-within::before,
.ijs-contact__form--focus-anim .wpforms-field:has(> textarea):focus-within::before,
.ijs-contact__form--focus-anim .wpforms-field:has(> select):focus-within::before {
	opacity: 1;
	animation-play-state: running;
}
/* 150% = dokładnie jedno przesunięcie kafla gradientu, czyli pętla bez
   przeskoku. Przy 300% pattern przelatywał dwa razy i efekt był nerwowy. */
@keyframes ijs-focus-slide {
	from { background-position: 0% 50%; }
	to   { background-position: 150% 50%; }
}

/* Input nad gradientem; na focusie odsłaniamy pod nim 1px ramki */
.ijs-contact__form--focus-anim input[type="text"],
.ijs-contact__form--focus-anim input[type="email"],
.ijs-contact__form--focus-anim input[type="tel"],
.ijs-contact__form--focus-anim input[type="number"],
.ijs-contact__form--focus-anim input[type="url"],
.ijs-contact__form--focus-anim select,
.ijs-contact__form--focus-anim textarea {
	position: relative;
	z-index: 1;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.ijs-contact__form--focus-anim input[type="text"]:focus,
.ijs-contact__form--focus-anim input[type="email"]:focus,
.ijs-contact__form--focus-anim input[type="tel"]:focus,
.ijs-contact__form--focus-anim input[type="number"]:focus,
.ijs-contact__form--focus-anim input[type="url"]:focus,
.ijs-contact__form--focus-anim select:focus,
.ijs-contact__form--focus-anim textarea:focus {
	border-color: transparent !important;
	background-clip: padding-box !important;
	box-shadow:
		0 0 0 4px color-mix(in srgb, var(--ijs-accent, #8ed3f4) 10%, transparent),
		0 8px 26px -14px color-mix(in srgb, var(--ijs-accent, #8ed3f4) 90%, transparent) !important;
}

/* Etykieta aktywnego pola — kolor akcentu tylko przy polach tekstowych */
.ijs-contact__form--focus-anim .wpforms-field:has(> input:not([type="checkbox"]):not([type="radio"])):focus-within .wpforms-field-label,
.ijs-contact__form--focus-anim .wpforms-field:has(> textarea):focus-within .wpforms-field-label {
	color: var(--ijs-accent, #8ed3f4) !important;
}

@media (prefers-reduced-motion: reduce) {
	.ijs-checklist--draw .ijs-check-item,
	.ijs-checklist--draw .ijs-check-item__ic { transition: none; }
	.ijs-checklist--draw .ijs-check-item:hover .ijs-check-item__ic { transform: none; }
	.ijs-checklist--draw .ijs-check-item:hover .ijs-check-item__ic path { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
	/* gradient zostaje, ale przestaje płynąć */
	.ijs-contact__form--focus-anim input:focus,
	.ijs-contact__form--focus-anim textarea:focus,
	.ijs-contact__form--focus-anim select:focus { animation: none; }
}

/* ------------------------------------------------------------
   Licznik — wymuszenie wyglądu z makiety (motyw zmniejszał liczbę)
   ------------------------------------------------------------ */
.fl-builder-content .ijs-stat,
.ijs-stat {
	display: inline-flex !important;
	align-items: center !important;
	gap: 16px !important;
	padding: 16px 24px !important;
	border-radius: 14px !important;
	/* Subtelny gradient w kolorze akcentu modułu (na Duurzaamheid niebieski,
	   przy zielonym akcencie — zielony) wmieszany w ciemne tło: lewy górny
	   róg lekko podświetlony, wygasa do ciemnego. Ramka i cień też lekko
	   podbarwione. Intensywność: --ijs-stat-tint w ijs-vars.css (0% = po
	   staremu, 12% = domyślnie, 20% = wyraźnie). */
	border: 1px solid color-mix(in srgb, var(--ijs-accent, var(--ijs-green)) 24%, #2a2f35) !important;
	background: linear-gradient(
		150deg,
		color-mix(in srgb, var(--ijs-accent, var(--ijs-green)) var(--ijs-stat-tint, 12%), #1a1e23),
		#131619 60%,
		color-mix(in srgb, var(--ijs-accent, var(--ijs-green)) calc(var(--ijs-stat-tint, 12%) / 2), #131619)
	) !important;
	box-shadow: 0 10px 32px color-mix(in srgb, var(--ijs-accent, var(--ijs-green)) 9%, transparent) !important;
}
.fl-builder-content .ijs-stat__num,
.ijs-stat__num {
	font-size: 38px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	color: var(--ijs-accent, var(--ijs-green)) !important;
	white-space: nowrap !important;
}
.fl-builder-content .ijs-stat__label,
.ijs-stat__label {
	font-size: 14.5px !important;
	line-height: 1.4 !important;
	color: var(--ijs-text-color) !important;
	max-width: 340px;
}

/* Mobile */
@media (max-width: 900px) {
	.fl-builder-content .ijs-numcards-heading,
	.fl-builder-content .ijs-checklist-heading,
	.fl-builder-content .ijs-svc-heading,
	.fl-builder-content .ijs-cert-heading,
	.fl-builder-content .ijs-stat-heading,
	.ijs-numcards-heading,
	.ijs-checklist-heading,
	.ijs-svc-heading,
	.ijs-cert-heading,
	.ijs-stat-heading {
		font-size: var(--ijs-h-section-mobile) !important;
	}
	.fl-builder-content .ijs-hero__title,
	.ijs-hero__title {
		font-size: var(--ijs-h-hero-mobile) !important;
	}
}

/* ------------------------------------------------------------
   Badge ECO w menu nagłówka (dopinany filtrem wp_nav_menu_items).
   Wysokość: --ijs-menu-badge-h (zmień w ijs-vars.css).
   ------------------------------------------------------------ */
/* Motyw stylizuje OSTATNIĄ pozycję menu jako wypełniony przycisk, a przedostatnią
   jako outline. Po dopięciu badge role się przesunęły — zdejmujemy styl przycisku
   z badge'a i przywracamy go pozycji z telefonem (przedostatniej, gdy jest badge). */
.ijs-menu-badge {
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin-left: var(--ijs-menu-badge-gap, 16px) !important;
}
.site-header #site-navigation .main-menu > ul > li:nth-last-child(2):has(+ .ijs-menu-badge) {
	background-color: #7dd3f6 !important;
	border-radius: 10px !important;
	box-shadow: 5.333px 24px 40px 0 rgba(125, 211, 246, 0.26) !important;
}
.site-header #site-navigation .main-menu > ul > li:nth-last-child(2):has(+ .ijs-menu-badge) > a {
	color: #0b0e11 !important;
}

.ijs-menu-badge { display: flex; align-items: center; }
.ijs-menu-badge > a {
	display: flex !important;
	align-items: center;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	line-height: 0;
	opacity: 0.92;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.ijs-menu-badge > a:hover { opacity: 1; transform: translateY(-1px); }
.ijs-menu-badge img {
	display: block;
	height: var(--ijs-menu-badge-h, 34px);
	width: auto;
	max-width: none;
}
.ijs-menu-badge > i,
.ijs-menu-badge::before,
.ijs-menu-badge::after { display: none !important; content: none !important; }

@media (max-width: 1100px) {
	.ijs-menu-badge img { height: var(--ijs-menu-badge-h-sm, 28px); }
}

/* Sekcje pełnoekranowe (np. CTA z tłem na całą szerokość) używają 100vw —
   clip zapobiega poziomemu paskowi przewijania, nie psując sticky/position. */
html { overflow-x: clip; }

/* ------------------------------------------------------------
   Hover kafli (karty numerowane + karty usług):
   gradientowa ramka biel→akcent + miękki cień w kolorze akcentu
   + subtelne uniesienie. Kolor bierze się z akcentu modułu
   (zielone sekcje świecą zielono, niebieskie — niebiesko).
   ------------------------------------------------------------ */
.ijs-numcard,
.ijs-svc-card {
	position: relative;
	transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
	will-change: transform;
}

/* Gradientowa ramka rysowana pseudo-elementem (maska), płynnie wygaszana */
.ijs-numcard::before,
.ijs-svc-card::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 19px;
	padding: 1px;
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.85) 0%,
		color-mix(in srgb, var(--ijs-accent, #8ed3f4) 80%, transparent) 45%,
		rgba(255, 255, 255, 0.12) 100%
	);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.28s ease;
	pointer-events: none;
	z-index: 1;
}

.ijs-numcard:hover,
.ijs-svc-card:hover {
	transform: translateY(-3px);
	border-color: transparent;
	box-shadow:
		0 18px 38px -14px color-mix(in srgb, var(--ijs-accent, #8ed3f4) 35%, transparent),
		0 4px 14px rgba(0, 0, 0, 0.35);
}
.ijs-numcard:hover::before,
.ijs-svc-card:hover::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.ijs-numcard, .ijs-svc-card { transition: none; }
	.ijs-numcard:hover, .ijs-svc-card:hover { transform: none; }
}

/* ------------------------------------------------------------
   Oddech sekcji — klasy do WIERSZY Beavera.
   Ustawienia wiersza → Zaawansowane → Klasa: ijs-section
   (albo ijs-section--sm dla ciaśniejszych sekcji).
   clamp() sam skaluje padding: mobile → tablet → desktop.
   ------------------------------------------------------------ */
.fl-row.ijs-section > .fl-row-content-wrap,
:not(.fl-row).ijs-section {
	padding-top: clamp(56px, 8vw, 112px) !important;
	padding-bottom: clamp(56px, 8vw, 112px) !important;
}
.fl-row.ijs-section--sm > .fl-row-content-wrap,
:not(.fl-row).ijs-section--sm {
	padding-top: clamp(36px, 5vw, 64px) !important;
	padding-bottom: clamp(36px, 5vw, 64px) !important;
}

/* UWAGA: nie zerujemy tu marginesów wierszy globalnie — część sekcji ma
   odstępy ustawione w Beaverze właśnie marginesem. Marginesy kasują tylko
   modyfikatory --no-top / --no-bottom / --flush, czyli na wyraźne żądanie. */

/* Tła sekcji — dodaj do klasy WIERSZA obok ijs-section.
   Dzięki temu padding sekcji wypełnia się kolorem, a nie czernią strony. */
.fl-row.ijs-bg-dark, .fl-row.ijs-bg-dark > .fl-row-content-wrap { background-color: #0b0e11 !important; }
.fl-row.ijs-bg-soft, .fl-row.ijs-bg-soft > .fl-row-content-wrap { background-color: #12161a !important; }
.fl-row.ijs-bg-card, .fl-row.ijs-bg-card > .fl-row-content-wrap { background-color: #16191d !important; }

/* Pierwsza sekcja pod nagłówkiem (hero) — mniejszy odstęp od góry,
   normalny od dołu. Użyj ZAMIAST ijs-section na pierwszym wierszu strony. */
.fl-row.ijs-section--first > .fl-row-content-wrap {
	padding-top: var(--ijs-section-first-top, clamp(24px, 3vw, 48px)) !important;
	padding-bottom: var(--ijs-section-first-bottom, clamp(56px, 8vw, 112px)) !important;
}

/* Modyfikatory odstępów. WAŻNE: Beaver dokłada padding/margin na TRZECH
   poziomach — wiersz (.fl-row-content-wrap), kolumna (.fl-col-content)
   i moduł (.fl-module-content). Zerujemy wszystkie trzy, inaczej zostaje
   „czarny pas” w kolorze tła wiersza.
   Dodaj OBOK ijs-section, np. class="ijs-section ijs-section--no-bottom" */

.fl-row.ijs-section--no-bottom > .fl-row-content-wrap,
.fl-row.ijs-section--no-bottom .fl-col-content,
.fl-row.ijs-section--no-bottom .fl-module-content,
:not(.fl-row).ijs-section--no-bottom {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

.fl-row.ijs-section--no-top > .fl-row-content-wrap,
.fl-row.ijs-section--no-top .fl-col-content,
.fl-row.ijs-section--no-top .fl-module-content,
:not(.fl-row).ijs-section--no-top {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* Wiersz bez żadnych odstępów — dla wiersza z samym CTA pełnoekranowym.
   Używaj SAMEJ tej klasy, bez ijs-section i bez ijs-section--sm. */
.fl-row.ijs-section--flush > .fl-row-content-wrap,
.fl-row.ijs-section--flush .fl-col-content,
.fl-row.ijs-section--flush .fl-module-content,
:not(.fl-row).ijs-section--flush {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* ============================================================
   WŁASNE POPRAWKI (Jack) — dopisuj poniżej tej linii
   ============================================================ */