/* Elementy wspólne całej strony: nagłówek, menu, stopka, przyciski, formularz, system animacji.
   Wartości wyłącznie z tokenów (tokens.css + preset). */

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--gf-header-h) + var(--gf-space-4)); }
body { text-rendering: optimizeLegibility; }
img { display: block; }
em { font-style: italic; }
::selection { background: var(--gf-color-accent-soft, var(--gf-color-accent)); color: var(--gf-color-heading); }

/* ---------- Nagłówek (sticky) ---------- */
.gf-site-header {
	position: sticky; top: 0; z-index: 50;
	background: color-mix(in srgb, var(--gf-color-bg) 94%, transparent);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--gf-transition), box-shadow var(--gf-transition);
}
.admin-bar .gf-site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .gf-site-header { top: 46px; } }
.gf-site-header.is-scrolled { border-color: var(--gf-color-line); box-shadow: 0 8px 30px -18px rgb(14 18 29 / 0.35); }

.gf-header-default { min-height: var(--gf-header-h); padding-block: var(--gf-space-3); transition: min-height var(--gf-transition); }
.is-scrolled .gf-header-default { min-height: calc(var(--gf-header-h) - 16px); }
.gf-header-default__brand { display: block; flex-shrink: 0; }
.gf-logo { width: auto; height: 44px; transition: height var(--gf-transition); }
.is-scrolled .gf-header-default .gf-logo { height: 38px; }

.gf-header-default__panel { display: flex; align-items: center; gap: var(--gf-space-7); }
.gf-nav__list { gap: var(--gf-space-6); }
.gf-nav__list a {
	position: relative; display: inline-block; padding-block: var(--gf-space-2);
	color: var(--gf-color-heading);
	font-size: var(--gf-eyebrow-fs); letter-spacing: var(--gf-eyebrow-ls); text-transform: uppercase;
}
/* Podkreślenie wysuwane od lewej */
.gf-nav__list a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
	background: var(--gf-color-accent); transform: scaleX(0); transform-origin: right;
	transition: transform 0.45s var(--gf-ease-out);
}
.gf-nav__list a:hover::after, .gf-nav__list a:focus-visible::after, .gf-nav__list a.is-active::after { transform: scaleX(1); transform-origin: left; }
.gf-nav__list a:hover, .gf-nav__list a.is-active { color: var(--gf-color-accent); }

/* Hamburger */
.gf-nav-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--gf-color-heading); }
.gf-nav-toggle__bars, .gf-nav-toggle__bars::before, .gf-nav-toggle__bars::after {
	display: block; width: 26px; height: 1.5px; margin-inline: auto; background: currentColor;
	transition: transform 0.35s var(--gf-ease-out), opacity 0.2s;
}
.gf-nav-toggle__bars { position: relative; }
.gf-nav-toggle__bars::before, .gf-nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.gf-nav-toggle__bars::before { top: -8px; }
.gf-nav-toggle__bars::after { top: 8px; }
.gf-nav-toggle[aria-expanded="true"] .gf-nav-toggle__bars { background: transparent; }
.gf-nav-toggle[aria-expanded="true"] .gf-nav-toggle__bars::before { transform: translateY(8px) rotate(45deg); }
.gf-nav-toggle[aria-expanded="true"] .gf-nav-toggle__bars::after { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 960px) {
	.gf-nav-toggle { display: block; }
	.gf-header-default__panel {
		position: absolute; top: 100%; left: 0; right: 0;
		flex-direction: column; align-items: stretch; gap: var(--gf-space-5);
		padding: var(--gf-space-5) var(--gf-section-pad-x) var(--gf-space-7);
		background: var(--gf-color-bg); border-bottom: 1px solid var(--gf-color-line);
		box-shadow: 0 30px 40px -30px rgb(14 18 29 / 0.3);
		opacity: 0; visibility: hidden; transform: translateY(-8px);
		transition: opacity 0.3s, transform 0.4s var(--gf-ease-out), visibility 0s 0.4s;
	}
	.gf-header-default__panel.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
	.gf-nav__list { flex-direction: column; gap: 0; }
	.gf-nav__list a { display: block; padding-block: var(--gf-space-3); border-bottom: 1px solid var(--gf-color-line); font-size: 0.9375rem; }
	.gf-nav__list a::after { display: none; }
	.gf-header-default__cta { align-self: flex-start; }
}

/* ---------- Przyciski (charakter tego projektu) ---------- */
.gf-btn {
	padding: 1.05em 2.2em;
	font-weight: 700; font-size: 0.75rem; letter-spacing: 0.12em;
	transition: color var(--gf-transition), border-color var(--gf-transition), transform 0.2s;
}
.gf-btn:active { transform: translateY(1px); }
.gf-btn--sm { padding: 0.9em 1.8em; }
.gf-btn.gf-link-arrow::after { content: "→"; margin-left: 0.6em; transition: transform 0.35s var(--gf-ease-out); }
.gf-btn.gf-link-arrow:hover::after { margin-left: 0.6em; transform: translateX(4px); }
:focus-visible { outline: 2px solid var(--gf-color-accent); outline-offset: 3px; }

/* ---------- Wspólne fragmenty sekcji ---------- */
.gf-section-head { margin-bottom: clamp(var(--gf-space-6), 5vw, var(--gf-space-8)); }
.gf-section-head > * { margin-bottom: var(--gf-space-3); }
.gf-section-head h2 { max-width: 30ch; }
.gf-text-center .gf-section-head h2, .gf-section-head.gf-text-center h2 { margin-inline: auto; }
.gf-num { font-family: var(--gf-font-heading); color: var(--gf-color-accent); font-weight: 500; line-height: 1; font-variant-numeric: lining-nums; }
.gf-rule { width: 100%; height: 1px; margin: 0; border: 0; background: var(--gf-color-line); transform-origin: left; }
.gf-section--dark .gf-eyebrow { color: var(--gf-color-accent-soft, var(--gf-color-accent)); }

/* Obraz z powolnym przybliżeniem na hover */
.gf-zoom { overflow: hidden; }
.gf-zoom img, .elementor .gf-zoom img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--gf-ease-out); }
.gf-zoom:hover img, a:hover .gf-zoom img, article:hover .gf-zoom img { transform: scale(1.05); }

/* ---------- Social ---------- */
.gf-social { display: flex; gap: var(--gf-space-3); margin: 0; padding: 0; list-style: none; }
.gf-social a {
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid currentColor; color: var(--gf-color-dark);
	transition: background var(--gf-transition), color var(--gf-transition);
}
.gf-social a:hover { background: var(--gf-color-dark); color: #fff; }

/* ---------- Formularz ---------- */
.gf-form { display: grid; gap: var(--gf-space-5); background: var(--gf-color-surface-strong, #fff); border: 0; }
.gf-form p { margin: 0; }
.gf-form__field { position: relative; }
.gf-form__field label { display: block; margin-bottom: var(--gf-space-1); font-size: var(--gf-fs-small); color: var(--gf-color-muted); }
.gf-form input[type="text"], .gf-form input[type="email"], .gf-form textarea {
	width: 100%; padding: var(--gf-space-2) 0; border: 0; border-bottom: 1px solid var(--gf-color-line); border-radius: 0;
	background: transparent; color: var(--gf-color-text); font: inherit;
	transition: border-color var(--gf-transition);
}
.gf-form input:focus, .gf-form textarea:focus { outline: none; border-color: var(--gf-color-accent); }
.gf-form textarea { resize: vertical; min-height: 7rem; }
.gf-form__consent { font-size: var(--gf-fs-small); }
.gf-form__consent input { margin-right: var(--gf-space-2); accent-color: var(--gf-color-accent); }
.gf-form__trap { position: absolute; left: -9999px; }
.gf-form__notice { padding: var(--gf-space-3) var(--gf-space-4); border-left: 3px solid var(--gf-color-accent); background: var(--gf-color-surface); }
.gf-form__notice--error { border-color: #b3261e; }

/* ---------- Stopka ---------- */
.gf-footer-default {
	display: block; padding: 0; border: 0;
	background: linear-gradient(189deg, #324269 0%, #1A2133 74%);
	color: rgb(255 255 255 / 0.82); font-size: 0.9375rem;
}
.gf-footer-default a { color: inherit; text-decoration: none; transition: color var(--gf-transition); }
.gf-footer-default a:hover { color: var(--gf-color-accent-soft, var(--gf-color-accent)); }
.gf-footer-default__grid {
	display: grid; gap: var(--gf-space-7);
	grid-template-columns: minmax(0, 1fr);
	padding-block: clamp(var(--gf-space-8), 7vw, var(--gf-space-9));
}
@media (min-width: 800px) { .gf-footer-default__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.gf-footer-default .gf-logo { height: 46px; }
.gf-footer-default strong { color: #fff; font-weight: 700; }
.gf-footer-default__contact a { color: var(--gf-color-accent-soft, var(--gf-color-accent)); }
.gf-footer-default__title {
	margin-bottom: var(--gf-space-5); padding-bottom: var(--gf-space-3);
	border-bottom: 1px solid rgb(255 255 255 / 0.15);
	font-family: var(--gf-font-heading); font-style: italic; font-size: var(--gf-fs-h4); color: #fff;
}
.gf-footer-default__links { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--gf-space-2); }
.gf-footer-default__links a::before { content: "→"; margin-right: var(--gf-space-3); color: var(--gf-color-accent-soft, var(--gf-color-accent)); display: inline-block; transition: transform 0.35s var(--gf-ease-out); }
.gf-footer-default__links a:hover::before { transform: translateX(3px); }
.gf-footer-default__bar { padding-block: var(--gf-space-5); background: var(--gf-color-night, #0E121D); font-size: var(--gf-fs-small); }
.gf-footer-default__bar .gf-cluster { justify-content: space-between; gap: var(--gf-space-3) var(--gf-space-6); }

/* ==========================================================================
   SYSTEM ANIMACJI (assets/js/site.js dodaje .is-in, gdy element wchodzi w ekran)
   data-reveal          – wjazd z dołu + pojawienie
   data-reveal="left"   – wjazd z lewej
   data-reveal="fade"   – samo pojawienie
   data-reveal="mask"   – nagłówek: słowa wysuwają się spod maski (jak „fancy heading")
   data-reveal="line"   – linia rysowana od lewej
   style="--d:2"        – opóźnienie (krok = --gf-reveal-step)
   Bez JS i przy „ogranicz ruch" wszystko jest po prostu widoczne.
   ========================================================================== */
.gf-js [data-reveal] {
	opacity: 0;
	transform: translate3d(0, var(--gf-reveal-shift), 0);
	transition: opacity var(--gf-reveal-dur) var(--gf-ease-out), transform var(--gf-reveal-dur) var(--gf-ease-out);
	transition-delay: calc(var(--d, 0) * var(--gf-reveal-step));
}
.gf-js [data-reveal="left"] { transform: translate3d(calc(var(--gf-reveal-shift) * -1.6), 0, 0); }
.gf-js [data-reveal="fade"] { transform: none; }
.gf-js [data-reveal="line"] { opacity: 1; transform: scaleX(0); transition-duration: 1.2s; }
.gf-js [data-reveal="mask"] { opacity: 1; transform: none; }
.gf-js [data-reveal].is-in { opacity: 1; transform: none; }

/* Maska słów: każde słowo w .gf-w > span (dzieli site.js) */
.gf-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.gf-w > span {
	display: inline-block; transform: translate3d(0, 105%, 0);
	transition: transform 1s var(--gf-ease-out);
	transition-delay: calc(var(--d, 0) * var(--gf-reveal-step) + var(--i, 0) * 28ms);
}
.is-in .gf-w > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.gf-js [data-reveal], .gf-js [data-reveal] *, .gf-w > span { opacity: 1 !important; transform: none !important; transition: none !important; }
	.gf-zoom img { transition: none; }
}

/* ==========================================================================
   STYL SEKCJI NA KONTENERZE ELEMENTORA (panel „Grafinarnia – styl sekcji")
   Kontener z klasą gf-section bierze odstępy, szerokość treści i przerwy z tokenów.
   Wartości wpisane ręcznie w Elementorze (padding, gap) nadal mają pierwszeństwo.
   ========================================================================== */
.e-con.gf-section {
	--gf-sec-width: var(--gf-content-width);
	--container-max-width: var(--gf-sec-width);
	--padding-top: var(--gf-section-pad-y);
	--padding-bottom: var(--gf-section-pad-y);
	--padding-left: var(--gf-section-pad-x);
	--padding-right: var(--gf-section-pad-x);
	--row-gap: var(--gf-space-5);
	--column-gap: clamp(var(--gf-space-7), 6vw, var(--gf-space-9));
	--widgets-spacing-row: var(--gf-space-5);
	--widgets-spacing-column: var(--gf-space-5);
}
/* Kontener „pełna szerokość": treść i tak trzyma szerokość z tokenu */
.e-con.gf-section:not(.e-con-boxed) {
	--padding-left: max(var(--gf-section-pad-x), calc((100% - var(--gf-sec-width)) / 2));
	--padding-right: max(var(--gf-section-pad-x), calc((100% - var(--gf-sec-width)) / 2));
}
.e-con.gf-width--narrow { --gf-sec-width: 760px; }
.e-con.gf-width--wide { --gf-sec-width: 1360px; }
.e-con.gf-section--tight { --padding-top: calc(var(--gf-section-pad-y) * 0.6); --padding-bottom: calc(var(--gf-section-pad-y) * 0.6); }
.e-con.gf-section--none { --padding-top: 0; --padding-bottom: 0; }
.e-con.gf-section--no-top { --padding-top: 0; }
.e-con.gf-section--no-bottom { --padding-bottom: 0; }
.e-con.gf-section--default { background: var(--gf-color-bg); }
.e-con.gf-section--dark { color: #fff; }
.e-con.gf-section--dark :is(h1, h2, h3, h4, h5, h6, .gf-h1, .gf-h2, .gf-h3, .gf-h4, .gf-display) { color: #fff; }

/* Kontenery wewnątrz sekcji (kolumny) – bez domyślnego paddingu Elementora */
.e-con.gf-section .e-con { --padding-top: 0; --padding-bottom: 0; --padding-left: 0; --padding-right: 0; --row-gap: var(--gf-space-5); }

/* Gotowe układy kolumn – od tabletu (768 px) w górę; na telefonie jedna pod drugą */
@media (min-width: 768px) {
	:is(.gf-cols--split, .gf-cols--5-7, .gf-cols--7-5, .gf-cols--3):not(.e-con-boxed),
	:is(.gf-cols--split, .gf-cols--5-7, .gf-cols--7-5, .gf-cols--3) > .e-con-inner { --display: grid; display: grid; align-items: center; }
	.gf-cols--split:not(.e-con-boxed), .gf-cols--split > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gf-cols--5-7:not(.e-con-boxed), .gf-cols--5-7 > .e-con-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	.gf-cols--7-5:not(.e-con-boxed), .gf-cols--7-5 > .e-con-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.gf-cols--3:not(.e-con-boxed), .gf-cols--3 > .e-con-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
	/* Nagłówek sekcji (GF Nagłówek) zajmuje całą szerokość siatki */
	:is(.gf-cols--split, .gf-cols--5-7, .gf-cols--7-5, .gf-cols--3) .elementor-widget-gf-heading { grid-column: 1 / -1; }
}

/* Ten sam kolor tła obok siebie = jeden odstęp.
   Działa dla każdej kombinacji: kontener ze stylem sekcji ↔ widżet-sekcja GF w kontenerze. */
:where(.e-con.gf-section--alt, .e-con:has(.gf-section--alt):not(:has(.gf-section--bleed))) + .e-con.gf-section--alt,
:where(.e-con.gf-section--dark, .e-con:has(.gf-section--dark):not(:has(.gf-section--bleed))) + .e-con.gf-section--dark,
:where(.e-con.gf-section--default, .e-con:has(.gf-section:not(.gf-section--alt, .gf-section--dark))) + .e-con.gf-section--default { --padding-top: 0; }
:is(.e-con.gf-section--alt, .e-con:has(.gf-section--alt):not(:has(.gf-section--bleed))) + .e-con > .elementor-widget .gf-section--alt,
:is(.e-con.gf-section--dark, .e-con:has(.gf-section--dark):not(:has(.gf-section--bleed))) + .e-con > .elementor-widget .gf-section--dark,
:is(.e-con.gf-section--default, .e-con:has(.gf-section:not(.gf-section--alt, .gf-section--dark))) + .e-con > .elementor-widget .gf-section:not(.gf-section--alt, .gf-section--dark) { padding-top: 0; }

/* Kontener-karta (panel „Grafinarnia – styl sekcji" → Wygląd kontenera) */
.e-con.gf-box--card,
.e-con.gf-section .e-con.gf-box--card {
	--gf-card-pad: clamp(var(--gf-space-5), 3vw, var(--gf-space-7));
	background: #fff;
	--padding-top: var(--gf-card-pad);
	--padding-bottom: var(--gf-card-pad);
	--padding-left: var(--gf-card-pad);
	--padding-right: var(--gf-card-pad);
}
/* Zdjęcie „wystaje poza kartę" (klocek Zdjęcie → przełącznik): od lewej krawędzi karty,
   20 px ponad i pod kartą – jak na starej stronie w sekcji wystąpień. */
@media (min-width: 768px) {
	.gf-box--card .gf-figure--pop,
	.e-con.gf-box--card .elementor-widget .gf-figure.gf-figure--pop { /* mocniej niż „figure { margin: 0 }" z Elementora */
		--gf-pop: 20px;
		margin-block: calc(-1 * (var(--gf-card-pad) + var(--gf-pop)));
		margin-left: calc(-1 * var(--gf-card-pad));
	}
}
.e-con.gf-box--card { --column-gap: clamp(var(--gf-space-6), 4vw, var(--gf-space-8)); --row-gap: var(--gf-space-5); }
.gf-section--dark .e-con.gf-box--card { color: var(--gf-color-text); }
.gf-section--dark .e-con.gf-box--card :is(h1, h2, h3, h4, .gf-h1, .gf-h2, .gf-h3, .gf-h4) { color: var(--gf-color-heading); }

/* ==========================================================================
   WSPÓŁPRACA ZE „STYLEM MOTYWU" ELEMENTORA (Ustawienia witryny)
   Elementor stylizuje h1–h6, akapity i przyciski selektorem .elementor-kit-N h2 itd.
   Klasy wyglądu motywu („wygląda jak H3") muszą wygrać – stąd przedrostek html.
   ========================================================================== */
html body :is(.gf-h1, .gf-h2, .gf-h3, .gf-h4, .gf-h5, .gf-h6, .gf-display) { font-family: var(--gf-font-heading); font-weight: var(--gf-fw-heading); line-height: var(--gf-lh-heading); }
html body .gf-h1 { font-size: var(--gf-fs-h1); }
html body .gf-h2 { font-size: var(--gf-fs-h2); }
html body .gf-h3 { font-size: var(--gf-fs-h3); }
html body .gf-h4 { font-size: var(--gf-fs-h4); }
html body .gf-h5 { font-size: var(--gf-fs-h5); }
html body .gf-h6 { font-size: var(--gf-fs-h6); }
html body .gf-display { font-size: var(--gf-fs-display); }

/* Hamburger to <button> – nie może dostać wyglądu przycisku z Ustawień witryny */
html body .gf-nav-toggle,
html body .gf-nav-toggle:hover,
html body .gf-nav-toggle:focus { padding: 0; border: 0; border-radius: 0; background: none; color: var(--gf-color-heading); box-shadow: none; }

/* ==========================================================================
   PRZYCISKI – dwa style, po najechaniu kolor „wypełnia" przycisk od dołu.
   • Jasny (domyślny): białe tło, ramka i tekst w kolorze Granat → wypełnienie granatem, tekst biały.
   • Granatowy: klasa gf-btn--dark (GF Przycisk → Wariant), a na zwykłym Przycisku Elementora
     klasa gf-btn-dark w Zaawansowane → Klasy CSS → wypełnienie bielą, tekst granatowy.
   Kolory biorą się z koloru „Granat" w palecie (Ustawienia witryny); każdy przycisk GF ma też własne
   kolory w zakładce Styl (zmienne --gf-btn-*). Krój, ramka i odstępy: Ustawienia witryny → Przyciski.
   ========================================================================== */
html body :is(.gf-btn, .elementor-button) {
	--gf-btn-bg: #fff;
	--gf-btn-color: var(--gf-color-dark);
	--gf-btn-border: var(--gf-color-dark);
	--gf-btn-fill: var(--gf-color-dark);
	--gf-btn-hover-color: #fff;
	--gf-btn-hover-border: var(--gf-btn-fill);
	position: relative; overflow: hidden; isolation: isolate;
	background-color: var(--gf-btn-bg);
	color: var(--gf-btn-color);
	border-color: var(--gf-btn-border);
	transition: color 0.45s var(--gf-ease-out), border-color 0.45s var(--gf-ease-out), transform 0.2s;
}
/* Elementor barwi kliknięty i aktywny przycisk na biało (.elementor-button:visited/:focus { color: #fff }) –
   jasny przycisk po kliknięciu miał biały napis na białym. Tu wraca kolor przycisku; najechanie (niżej) nadal wygrywa. */
html body :is(.gf-btn, .elementor-button):is(:visited, :focus) { color: var(--gf-btn-color); }
html body :is(.gf-btn--dark, .gf-btn--accent, .gf-btn-dark .elementor-button) {
	--gf-btn-bg: var(--gf-color-dark);
	--gf-btn-color: #fff;
	--gf-btn-border: var(--gf-color-dark);
	--gf-btn-fill: #fff;
	--gf-btn-hover-color: var(--gf-color-dark);
	--gf-btn-hover-border: var(--gf-color-dark);
}
/* Warstwa wypełnienia */
:is(.gf-btn, .elementor-button)::before {
	content: ""; position: absolute; inset: -1px; z-index: -1;
	background: var(--gf-btn-fill);
	transform: scaleY(0); transform-origin: bottom;
	transition: transform 0.5s var(--gf-ease-out);
}
html body :is(.gf-btn, .elementor-button):is(:hover, :focus-visible) {
	background-color: var(--gf-btn-bg);
	color: var(--gf-btn-hover-color);
	border-color: var(--gf-btn-hover-border);
}
:is(.gf-btn, .elementor-button):is(:hover, :focus-visible)::before { transform: scaleY(1); }
.elementor-button .elementor-button-content-wrapper { position: relative; }
@media (prefers-reduced-motion: reduce) {
	:is(.gf-btn, .elementor-button)::before { transition: none; }
}

/* ---------- Nagłówek i stopka z Elementora (GF Logo, GF Menu) ---------- */
.gf-logo-link { display: inline-block; line-height: 0; }
/* Logo: 44 px (38 px po przewinięciu) – mocniej niż „img { height: auto }" z Elementora; wysokość zmienisz w widżecie GF Logo → Styl */
html body .gf-logo { width: auto; max-width: none; height: 44px; transition: height var(--gf-transition); }
html body .is-scrolled .gf-site-header .gf-logo, html body .gf-site-header.is-scrolled .gf-logo { height: 38px; }
/* Rozwijane menu na telefonie ma zajmować całą szerokość nagłówka, nie tylko widżetu */
html body .elementor-widget-gf-menu { position: static; }
.gf-menu-wrap { display: flex; align-items: center; justify-content: flex-end; }
@media (min-width: 961px) { .gf-menu-wrap .gf-header-default__panel { display: flex; align-items: center; gap: var(--gf-space-7); } }
.gf-nav--vertical .gf-nav__list { flex-direction: column; align-items: flex-start; }
/* Menu „lista ze strzałkami" (stopka) */
.gf-nav--list .gf-nav__list a { padding: 0; color: inherit; font-size: inherit; letter-spacing: 0; text-transform: none; border: 0; }
.gf-nav--list .gf-nav__list a::after { display: none; }
.gf-nav--list .gf-nav__list a:hover { color: var(--gf-color-accent-soft, var(--gf-color-accent)); }
/* Menu „Etykieta: adres" (stopka: Facebook: /profil) – etykieta w kolorze tekstu, adres jasnozłoty jak linki kontaktu */
.gf-nav--labeled .gf-nav__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--gf-space-2); }
.gf-nav--labeled .gf-nav__label { font-weight: 700; }
.gf-nav--labeled .gf-nav__value { color: var(--gf-color-accent-soft, var(--gf-color-accent)); transition: color var(--gf-transition); }
.gf-nav--labeled .gf-nav__list a:hover { color: inherit; }
.gf-nav--labeled .gf-nav__list a:hover .gf-nav__value { color: var(--gf-color-gold, var(--gf-color-accent)); }

/* Tło za stroną: u góry jasne, u dołu ciemne jak stopka – przy „odbiciu" przewijania (telefon, Mac)
   pod stopką nie pokazuje się biały pasek. */
html { background: linear-gradient(to bottom, var(--gf-color-bg) 50%, var(--gf-color-night, #0E121D) 50%); }

/* Kolumny na tablecie „jedna pod drugą" (panel styl sekcji → Kolumny na tablecie) */
@media (min-width: 768px) and (max-width: 1024px) {
	.gf-cols-t--stack:not(.e-con-boxed),
	.gf-cols-t--stack > .e-con-inner { --display: flex; display: flex; flex-direction: column; align-items: stretch; }
	/* zdjęcie „wystaje poza kartę" – na tablecie w układzie jedno pod drugim bez wystawania, jak na telefonie */
	.e-con.gf-cols-t--stack.gf-box--card .elementor-widget .gf-figure.gf-figure--pop { margin: 0; }
}