/* ==========================================================================
   Verde Casino — arkusz stylów serwisu
   Kolejność: tokeny → typografia lokalna → baza → dostępność → komponenty
   ========================================================================== */

/* --- Kroje pisma: hostowane lokalnie (Montserrat + Inter, zmienna grubość) --- */
@font-face {
	font-family: "Montserrat";
	src: url("/typeset/mtsr-ext.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Montserrat";
	src: url("/typeset/mtsr-base.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	src: url("/typeset/intr-ext.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter";
	src: url("/typeset/intr-base.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokeny projektu --- */
:root {
	/* kolory */
	--zql-core: #6bbb01;
	--zql-accent: #0a090e;
	--zql-accent-pressed: #000000;
	--zql-surface: #111213;
	--zql-panel: #1a1c1e;
	--zql-body: #FFFFFF;
	--zql-quiet: #c1c0c0;
	--zql-hairline: #2b2e31;
	--zql-stroke-heavy: #454a4f;
	--zql-gradient-light: #3e3658;
	--zql-ramp-end: #221e30;
	--zql-age-band: #7f1d1d;
	--zql-leaf: #18240f;
	--zql-soft-copy: #dedede;
	/* odstępy — skala zwarta */
	--zql-hair: 2px;
	--zql-tiny: 6px;
	--zql-snug: 10px;
	--zql-base: 14px;
	--zql-wide: 20px;
	--zql-roomy: 28px;
	--zql-vast: 48px;
	--zql-huge: 72px;
	--zql-sec: 44px;
	/* promienie i cienie — geometria mieszana */
	--r-tiny: 0;
	--r-snug: 4px;
	--r-base: 12px;
	--r-wide: 24px;
	--zql-lozenge: 9999px;
	--zql-orb: 50%;
	--d-tiny: 0 1px 0 rgba(0, 0, 0, 0.10);
	--d-snug: 0 2px 8px rgba(0, 0, 0, 0.07);
	--d-base: 0 6px 16px rgba(0, 0, 0, 0.10);
	--d-wide: 0 12px 32px rgba(0, 0, 0, 0.14);
	--zql-light: 1px;
	--zql-medium: 2px;
	--zql-strong: 4px;
	/* kroje i stopnie */
	--zql-display: "Montserrat", "Arial Narrow", Arial, sans-serif;
	--zql-text: "Inter", "Segoe UI", Arial, sans-serif;
	--zql-xxl: 56px;
	--zql-xl-2: 38px;
	--zql-display-3: 24px;
	--zql-display-4: 18px;
	--zql-minor: 15px;
	--zql-micro-head: 13px;
	--z-body: 16px;
	--zql-caption: 13px;
	--zql-legal: 11px;
	--zql-compact: 1.0;
	--zql-default: 1.4;
	--zql-loose: 1.6;
	--zql-plain: 500;
	--zql-half: 700;
	--zql-heavy: 900;
	--zql-narrow: -0.02em;
	--zql-normal: 0.02em;
	--e-loose: 0.1em;
	/* ruch — liczby z rozdania tej witryny */
	--zql-fast: 228ms;
	--zql-steady: 380ms;
	--zql-gentle: 662ms;
	--zql-exit: cubic-bezier(0.28, 0.85, 0.29, 0.94);
	--zql-smooth: cubic-bezier(0.58, 0.12, 0.44, 0.9);
	--zql-pop: cubic-bezier(0.45, 1.5, 0.72, 1.15);
	/* kontener */
	--zql-page: 1260px;
	--zql-prose: 1260px;
	--zql-slim: 480px;
	--zql-mid: 960px;
	--zql-inset-desktop: 56px;
	--zql-padding-tablet: 24px;
	--zql-inset-mobile: 16px;
	--zql-edge: var(--zql-inset-desktop);
	--zql-tall: 66px;
	--zql-height-mobile: 58px;
	interpolate-size: allow-keywords;
}

@media (max-width: 1239px) {
	:root {
		--zql-edge: var(--zql-padding-tablet);
	}
}

@media (max-width: 600px) {
	:root {
		--zql-xxl: 34px;
		--zql-xl-2: 26px;
		--zql-display-3: 20px;
		--zql-display-4: 16px;
		--zql-minor: 14px;
		--zql-micro-head: 12px;
		--z-body: 15px;
		--zql-caption: 12px;
		--zql-legal: 10px;
		--zql-edge: var(--zql-inset-mobile);
		--zql-sec: 36px;
	}
}

/* --- Baza --- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	overflow-x: clip;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--zql-surface);
	color: var(--zql-body);
	font-family: var(--zql-text);
	font-size: var(--z-body);
	font-weight: var(--zql-plain);
	line-height: var(--zql-default);
}

main {
	flex: 1 0 auto;
	display: block;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--zql-core);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: anywhere;
	margin: 0;
}

h1 {
	font-family: var(--zql-display);
	font-weight: var(--zql-heavy);
	font-size: var(--zql-xxl);
	line-height: 1.12;
	letter-spacing: var(--zql-narrow);
	text-transform: uppercase;
}

h2 {
	font-family: var(--zql-display);
	font-weight: var(--zql-half);
	font-size: var(--zql-xl-2);
	line-height: 1.15;
	letter-spacing: var(--zql-narrow);
	text-transform: uppercase;
}

h3,
h4 {
	font-family: var(--zql-display);
	font-weight: var(--zql-half);
	letter-spacing: var(--zql-normal);
	line-height: 1.25;
}

/* wspólna szerokość wszystkich ram sekcji */
.doto-frame,
.pada-frame,
.dugipum-frame,
.rakile-frame,
.pibux-frame,
.buti-frame,
.baxerex-frame,
.rymir-frame,
.mizu-frame,
.bozepul-frame,
.funo-frame,
.kopulo-frame,
.timos-frame,
.lolaviv-frame {
	max-width: calc(var(--zql-page) + 2 * var(--zql-inset-desktop));
	margin-inline: auto;
	padding-inline: var(--zql-edge);
}

/* --- Dostępność --- */
.skip-jump {
	position: absolute;
	left: 8px;
	top: -200px;
	z-index: 300;
	padding: var(--zql-snug) var(--zql-base);
	background: var(--zql-core);
	color: var(--zql-accent);
	font-weight: var(--zql-half);
	text-decoration: none;
}

.skip-jump:not(:focus) {
	top: -200px !important;
}

.skip-jump:focus {
	top: 8px;
}

:focus-visible {
	outline: 2px solid var(--zql-core);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition-duration: 0s !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   Pasek 18+ (RG-04): ciemny pas z barwną krawędzią
   ========================================================================== */
.rugo {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--zql-hair) var(--zql-snug);
	margin: 0;
	padding: var(--zql-tiny) var(--zql-inset-mobile);
	background: var(--zql-accent);
	color: var(--zql-body);
	border-bottom: 3px solid var(--zql-age-band);
	font-size: var(--zql-caption);
	line-height: 1.35;
	text-align: center;
}

.rugo-age {
	display: inline-block;
	padding: 0 var(--zql-tiny);
	border: 1px solid var(--zql-age-band);
	border-radius: var(--r-snug);
	background: var(--zql-accent);
	color: var(--zql-body);
	font-weight: var(--zql-heavy);
}

.rugo-words {
	color: var(--zql-body);
	background: var(--zql-accent);
}

.rugo-jump {
	color: var(--zql-body);
	background: var(--zql-accent);
	font-weight: var(--zql-half);
	text-decoration: underline;
	text-decoration-color: var(--zql-age-band);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.rugo-jump:hover {
	color: var(--zql-core);
	background: var(--zql-accent);
}

/* ==========================================================================
   Nagłówek HEAD-INSET: wyspa z odstępem od krawędzi, sticky ze zwężeniem
   ========================================================================== */
.kobebi {
	position: sticky;
	top: 0;
	z-index: 140;
	padding: 10px var(--zql-edge);
}

.kobebi-hold {
	position: relative;
	max-width: calc(var(--zql-page) + 2 * var(--zql-inset-desktop));
	margin-inline: auto;
	padding: 6px 32px;
	background: var(--zql-panel);
	color: var(--zql-body);
	border: 1px solid var(--zql-hairline);
	border-radius: var(--r-base);
	box-shadow: var(--d-wide);
}

.kobebi-bar {
	display: flex;
	align-items: center;
	gap: var(--zql-wide);
	height: 66px;
}

.kobebi-home {
	display: inline-flex;
	flex-shrink: 0;
	text-decoration: none;
}

/* logoFrame: plate — spokojna podkładka pod logo */
.kobebi-plate {
	display: inline-flex;
	align-items: center;
	padding: 3px 12px;
	background: #24272b;
	color: var(--zql-body);
	border: 1px solid var(--zql-hairline);
	border-radius: var(--r-snug);
}

.kobebi-glyph {
	display: block;
	flex-shrink: 0;
	height: 60px;
	width: auto;
}

/* przycisk menu: siatka w obrysie */
.kobebi-switch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: auto !important;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--zql-panel);
	color: var(--zql-body);
	border: 1px solid var(--zql-stroke-heavy);
	border-radius: var(--r-snug);
	cursor: pointer;
}

.kobebi-cells {
	display: grid;
	grid-template-columns: repeat(2, 7px);
	gap: 4px;
	transition: transform var(--zql-steady) var(--zql-exit);
}

.kobebi-cells i {
	display: block;
	width: 7px;
	height: 7px;
	border-radius: 1px;
	background: currentColor;
}

.kobebi-switch[aria-expanded="true"] .kobebi-cells {
	transform: rotate(45deg);
}

/* menu w wierszu — widoczne od 900px */
.kobebi-links {
	display: none;
	flex: 1 1 auto;
	min-width: 0;
	align-items: center;
	justify-content: flex-end;
	gap: var(--zql-base);
}

.kobebi-stack {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
}

.kobebi-item {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

/* navDivider: bar */
.kobebi-item + .kobebi-item::before {
	content: "";
	display: block;
	width: 1px;
	height: 12px;
	margin-inline: 7px;
	background: var(--zql-stroke-heavy);
}

.kobebi-jump {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: 2px;
	background: var(--zql-panel);
	color: var(--zql-soft-copy);
	font-family: var(--zql-text);
	font-size: 13px;
	font-weight: 500;
	font-variant-caps: small-caps;
	letter-spacing: 0.03em;
	white-space: nowrap;
	text-decoration: none;
}

/* hoverMark: underline */
.kobebi-jump:hover {
	color: var(--zql-body);
	background: var(--zql-panel);
	text-decoration: underline;
	text-decoration-color: var(--zql-core);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* activeMark: dot */
.kobebi-jump[aria-current="page"] {
	color: var(--zql-body);
}

.kobebi-jump[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 5px;
	width: 5px;
	height: 5px;
	margin-left: -2.5px;
	border-radius: var(--zql-orb);
	background: var(--zql-core);
}

/* „Pokaż więcej” — lista nadmiarowych pozycji */
.kobebi-overflow {
	display: none;
	position: relative;
	flex-shrink: 0;
}

.kobebi-overflow.is-needed {
	display: block;
}

.kobebi-more {
	min-height: 44px;
	padding: 0 var(--zql-snug);
	background: var(--zql-panel);
	color: var(--zql-body);
	border: 1px solid var(--zql-stroke-heavy);
	border-radius: var(--r-snug);
	font-family: var(--zql-text);
	font-size: 13px;
	font-weight: 500;
	font-variant-caps: small-caps;
	white-space: nowrap;
	cursor: pointer;
}

.kobebi-more:hover,
.kobebi-more[aria-expanded="true"] {
	background: var(--zql-accent);
	color: var(--zql-body);
	border-color: var(--zql-core);
}

.kobebi-spill {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + 10px);
	z-index: 5;
	min-width: 240px;
	max-height: calc(100vh - 160px);
	overflow-y: auto;
	margin: 0;
	padding: var(--zql-tiny);
	list-style: none;
	background: var(--zql-panel);
	border: 1px solid var(--zql-stroke-heavy);
	border-radius: var(--r-base);
	box-shadow: var(--d-wide);
}

.kobebi-spill.is-open {
	display: block;
}

.kobebi-spill .kobebi-item {
	display: block;
}

.kobebi-spill .kobebi-item::before {
	display: none;
}

.kobebi-spill .kobebi-jump {
	display: flex;
	width: 100%;
	padding-inline: 18px var(--zql-snug);
	border-radius: var(--r-snug);
}

.kobebi-spill .kobebi-jump[aria-current="page"]::after {
	left: 6px;
	bottom: auto;
	top: 50%;
	margin: -2.5px 0 0;
}

/* panel mobilny — pełna płaska lista */
.kobebi-flyout {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 8px);
	max-height: calc(100vh - 150px);
	overflow-y: auto;
	padding: var(--zql-snug);
	background: var(--zql-panel);
	border: 1px solid var(--zql-stroke-heavy);
	border-radius: var(--r-base);
	box-shadow: var(--d-wide);
}

.kobebi-flyout.is-open {
	display: block;
}

.kobebi-drop {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.kobebi-drop-item {
	display: block;
}

.kobebi-drop-jump {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--zql-base) 0 22px;
	background: var(--zql-panel);
	color: var(--zql-soft-copy);
	font-size: 15px;
	font-weight: 500;
	font-variant-caps: small-caps;
	text-decoration: none;
	border-radius: var(--r-snug);
}

.kobebi-drop-jump:hover {
	background: var(--zql-accent);
	color: var(--zql-body);
}

.kobebi-drop-jump[aria-current="page"] {
	color: var(--zql-body);
}

.kobebi-drop-jump[aria-current="page"]::before {
	content: "";
	position: absolute;
	left: 9px;
	top: 50%;
	width: 5px;
	height: 5px;
	margin-top: -2.5px;
	border-radius: var(--zql-orb);
	background: var(--zql-core);
}

/* zwężenie po przewinięciu */
.kobebi.is-shrunk .kobebi-hold {
	padding-block: 2px;
}

.kobebi.is-shrunk .kobebi-bar {
	height: 56px;
}

.kobebi.is-shrunk .kobebi-glyph {
	height: 46px;
}

@media (min-width: 900px) {
	.kobebi-links {
		display: flex;
	}
	.kobebi-switch {
		display: none;
	}
}

@media (max-width: 899px) {
	.kobebi {
		padding: 8px var(--zql-edge);
	}
	.kobebi-hold {
		padding: 4px 16px;
	}
	.kobebi-bar {
		height: 58px;
	}
	.kobebi-glyph {
		height: 48px;
	}
	.kobebi.is-shrunk .kobebi-glyph {
		height: 42px;
	}
	.kobebi.is-shrunk .kobebi-bar {
		height: 52px;
	}
}

/* ==========================================================================
   Stopka FOOT-03: masywna, wyśrodkowana
   ========================================================================== */
.lolaviv {
	background: var(--zql-surface);
	color: var(--zql-body);
	border-top: 1px solid var(--zql-hairline);
}

.lolaviv-frame {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--zql-wide);
	padding-block: 60px;
	text-align: center;
}

.lolaviv-home {
	display: inline-flex;
}

.lolaviv-glyph {
	display: block;
	height: 88px;
	width: auto;
}

.lolaviv-links {
	display: block;
}

.lolaviv-stack {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--zql-snug) var(--zql-wide);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lolaviv-jump {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	background: var(--zql-surface);
	color: var(--zql-body);
	font-family: var(--zql-display);
	font-size: var(--z-body);
	font-weight: var(--zql-half);
	text-decoration: none;
}

.lolaviv-jump:hover {
	color: var(--zql-core);
	background: var(--zql-surface);
}

.lolaviv-tagline {
	max-width: var(--zql-slim);
	margin: 0;
	color: var(--zql-quiet);
	font-size: var(--zql-caption);
	line-height: var(--zql-loose);
}

.lolaviv-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--zql-snug);
}

.lolaviv-fine {
	background: var(--zql-surface);
	color: var(--zql-quiet);
	font-size: var(--zql-legal);
	letter-spacing: var(--e-loose);
	text-transform: uppercase;
	text-decoration: none;
}

.lolaviv-fine + .lolaviv-fine::before {
	content: "·";
	display: inline-block;
	margin-right: var(--zql-snug);
	color: var(--zql-quiet);
}

.lolaviv-fine:hover {
	color: var(--zql-body);
	background: var(--zql-surface);
}

.lolaviv-copy {
	color: var(--zql-quiet);
	font-size: var(--zql-legal);
	line-height: var(--zql-loose);
}

@media (max-width: 600px) {
	.lolaviv-frame {
		padding-block: 44px;
	}
	.lolaviv-glyph {
		height: 64px;
	}
}

/* ==========================================================================
   Sekcje treści — wspólny rytm pionowy
   ========================================================================== */
.dugipum,
.rakile,
.pibux,
.buti,
.baxerex,
.rymir,
.bozepul,
.funo,
.kopulo {
	padding-block: var(--zql-sec);
}

/* ==========================================================================
   HERO-03: wyśrodkowany, zwarty; zdjęcie tylko jako przygaszone tło
   ========================================================================== */
.doto {
	position: relative;
	background-color: var(--zql-surface);
	background-image: linear-gradient(180deg, rgba(10, 9, 14, 0.88) 0%, rgba(17, 18, 19, 0.95) 100%), url("/shots/image.webp");
	background-size: cover;
	background-position: center;
	color: var(--zql-body);
}

.doto-frame {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--zql-base);
	padding-block: 54px;
	text-align: center;
}

.doto-tagline {
	color: var(--zql-core);
	background: var(--zql-accent);
	padding: var(--zql-hair) var(--zql-snug);
	border-radius: var(--r-snug);
	font-size: var(--zql-legal);
	font-weight: var(--zql-half);
	letter-spacing: var(--e-loose);
	text-transform: uppercase;
}

.doto h1 {
	max-width: var(--zql-mid);
}

.doto-deck {
	max-width: var(--zql-slim);
	margin: 0;
	color: var(--zql-quiet);
	line-height: var(--zql-loose);
}

.doto-note {
	max-width: var(--zql-slim);
	color: var(--zql-quiet);
	font-size: var(--zql-legal);
}

/* ==========================================================================
   PROSE-22: „czerwona linia” — wcięcie akapitów bez odstępu między nimi
   ========================================================================== */
.dugipum-frame > h2 {
	margin-block: var(--zql-roomy) var(--zql-snug);
	font-size: var(--zql-display-3);
	font-weight: var(--zql-plain);
}

.dugipum-frame > h2:first-child,
.dugipum-figure + h2 {
	margin-block-start: 0;
}

.dugipum-sub {
	margin-block: var(--zql-wide) var(--zql-tiny);
	font-size: var(--zql-display-4);
}

.dugipum-frame p {
	margin: 0;
	color: var(--zql-soft-copy);
	line-height: var(--zql-loose);
}

.dugipum-frame p + p {
	text-indent: var(--zql-base);
}

.dugipum-stack {
	margin: var(--zql-snug) 0;
	padding-left: 1.4em;
	color: var(--zql-soft-copy);
	line-height: var(--zql-loose);
}

.dugipum-stack li + li {
	margin-top: var(--zql-tiny);
}

.dugipum-stack li::marker {
	color: var(--zql-core);
	font-weight: var(--zql-half);
}

.dugipum-frame strong {
	color: var(--zql-body);
	font-weight: var(--zql-half);
}

/* linkHover: highlight — wypełnienie od dołu */
.dugipum-jump {
	color: var(--zql-core);
	background-color: var(--zql-surface);
	background-image: linear-gradient(#2c4a07, #2c4a07);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 2px;
	text-decoration: none;
	transition: background-size var(--zql-steady) var(--zql-exit), color var(--zql-fast) var(--zql-exit);
}

.dugipum-jump:hover {
	color: var(--zql-body);
	background-color: var(--zql-surface);
	background-size: 100% 100%;
}

.dugipum-figure {
	margin: 0 auto var(--zql-wide);
	padding: 0;
	border-radius: var(--r-base);
	overflow: hidden;
	background: var(--zql-panel);
}

.dugipum-wide {
	max-width: 60%;
}

.dugipum-square {
	max-width: 42%;
}

.dugipum-art {
	display: block;
	width: 100%;
	height: auto;
}

.dugipum-frame > h2 ~ .dugipum-figure {
	margin-top: var(--zql-wide);
}

/* ==========================================================================
   Wstawka z przyciskiem ofertowym w treści
   ========================================================================== */
.rymir-inset {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--zql-snug) var(--zql-wide);
	margin-block: var(--zql-roomy);
	padding: var(--zql-wide) var(--zql-roomy);
	background: var(--zql-ramp-end);
	color: var(--zql-body);
	border-left: 4px solid var(--zql-core);
	border-radius: var(--r-base);
}

.rymir-inset-words {
	flex: 1 1 260px;
	background: var(--zql-ramp-end);
	color: var(--zql-body);
	font-family: var(--zql-display);
	font-size: var(--zql-display-4);
	font-weight: var(--zql-half);
	line-height: 1.3;
}

.rymir-inset-note {
	flex: 1 1 100%;
	background: var(--zql-ramp-end);
	color: var(--zql-quiet);
	font-size: var(--zql-legal);
}

/* ==========================================================================
   GRID-07: wpisy w stylu artykułu
   ========================================================================== */
.rakile-frame > h2 {
	margin-bottom: var(--zql-wide);
}

.rakile-stack {
	display: grid;
	gap: var(--zql-wide);
}

.rakile-item {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	column-gap: var(--zql-base);
	padding: var(--zql-base) var(--zql-wide);
	background: var(--zql-surface);
	color: var(--zql-body);
	border-radius: var(--r-wide);
	transition: background-color var(--zql-steady) var(--zql-exit);
}

/* cardHover: tint */
.rakile-item:hover {
	background: var(--zql-panel);
	color: var(--zql-body);
}

.rakile-mark {
	grid-column: 1;
	grid-row: 1 / span 3;
	display: block;
	width: 32px;
	height: 32px;
	margin-top: 2px;
	color: var(--zql-core);
}

.rakile-mark svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.rakile-head {
	grid-column: 2;
	font-size: var(--zql-display-3);
}

.rakile-rule {
	grid-column: 2;
	display: block;
	width: 60px;
	height: 2px;
	margin-block: var(--zql-snug);
	background: var(--zql-core);
}

.rakile-words {
	grid-column: 2;
	margin: 0;
	color: var(--zql-soft-copy);
	line-height: var(--zql-loose);
}

/* ==========================================================================
   REV-07: siatka opinii z kolorem zależnym od oceny
   ========================================================================== */
.pibux-frame > h2 {
	margin-bottom: var(--zql-wide);
}

.pibux-stack {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--zql-base);
}

.pibux-brick {
	display: flex;
	flex-direction: column;
	gap: var(--zql-snug);
	padding: var(--zql-wide);
	color: var(--zql-body);
	border-radius: var(--r-base);
	transition: box-shadow var(--zql-steady) var(--zql-exit);
}

.pibux-brick:hover {
	box-shadow: inset 0 0 0 999px rgba(107, 187, 1, 0.06);
}

.pibux-hi {
	background: var(--zql-leaf);
	color: var(--zql-body);
}

.pibux-mid {
	background: var(--zql-panel);
	color: var(--zql-body);
}

.pibux-lo {
	background: var(--zql-ramp-end);
	color: var(--zql-body);
}

.pibux-score {
	display: flex;
	align-items: center;
	gap: var(--zql-snug);
}

.pibux-num {
	color: var(--zql-core);
	font-family: var(--zql-display);
	font-size: var(--zql-xl-2);
	font-weight: var(--zql-heavy);
	line-height: 1;
}

.pibux-dots {
	display: inline-flex;
	gap: 5px;
}

.pibux-dot {
	display: block;
	width: 9px;
	height: 9px;
	border-radius: var(--zql-orb);
	background: var(--zql-stroke-heavy);
}

.pibux-on {
	background: var(--zql-core);
}

.pibux-quote {
	flex: 1 1 auto;
	margin: 0;
}

.pibux-quote p {
	margin: 0;
	color: var(--zql-soft-copy);
	line-height: var(--zql-loose);
}

.pibux-who {
	color: var(--zql-quiet);
	font-size: var(--zql-caption);
	font-weight: var(--zql-half);
}

/* ==========================================================================
   CTA-05: pas z dwoma przyciskami
   ========================================================================== */
.rymir {
	background: var(--zql-accent);
	color: var(--zql-body);
	border-block: 1px solid var(--zql-hairline);
	scroll-margin-top: 110px;
}

.rymir-frame {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--zql-base);
	text-align: center;
}

.rymir-words {
	max-width: var(--zql-slim);
	margin: 0;
	background: var(--zql-accent);
	color: var(--zql-quiet);
	line-height: var(--zql-loose);
}

.rymir-acts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--zql-base);
}

/* przycisk drugorzędny — buttonHover: sweep */
.rymir-alt,
.timos-home,
.funo-send {
	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 var(--zql-roomy);
	overflow: hidden;
	background: var(--zql-accent);
	color: var(--zql-body);
	border: 1px solid var(--zql-quiet);
	border-radius: var(--zql-lozenge);
	font-family: var(--zql-display);
	font-size: var(--zql-micro-head);
	font-weight: var(--zql-heavy);
	letter-spacing: var(--e-loose);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--zql-steady) var(--zql-exit), border-color var(--zql-steady) var(--zql-exit);
}

.rymir-alt::before,
.timos-home::before,
.funo-send::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--zql-core);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--zql-steady) var(--zql-exit);
}

.rymir-alt:hover,
.timos-home:hover,
.funo-send:hover {
	color: var(--zql-accent);
	background: var(--zql-core);
	border-color: var(--zql-core);
}

.rymir-alt:hover::before,
.timos-home:hover::before,
.funo-send:hover::before {
	transform: scaleX(1);
}

.rymir-note {
	color: var(--zql-quiet);
	font-size: var(--zql-legal);
}

/* ==========================================================================
   FAQ-05: natywne <details>
   ========================================================================== */
.buti-frame > h2 {
	margin-bottom: var(--zql-base);
}

.buti-stack {
	margin: 0;
	padding: 0;
	list-style: none;
}

.buti-item {
	padding-block: var(--zql-base);
	border-bottom: 1px solid var(--zql-hairline);
}

.buti-ask {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--zql-base);
	min-height: 44px;
	list-style: none;
	cursor: pointer;
	background: var(--zql-surface);
	color: var(--zql-body);
}

.buti-ask::-webkit-details-marker {
	display: none;
}

.buti-ask::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-right: 4px;
	border-right: 2px solid var(--zql-core);
	border-bottom: 2px solid var(--zql-core);
	transform: rotate(45deg);
	transition: transform var(--zql-steady) var(--zql-smooth);
}

.buti-item[open] > .buti-ask::after {
	transform: rotate(225deg);
}

.buti-ask:hover {
	color: var(--zql-core);
	background: var(--zql-surface);
}

.buti-q {
	font-family: var(--zql-text);
	font-size: var(--zql-minor);
	font-weight: var(--zql-heavy);
	letter-spacing: var(--zql-normal);
	line-height: 1.35;
}

/* accordion: height-icon */
.buti-item::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size var(--zql-steady) var(--zql-smooth), content-visibility var(--zql-steady) allow-discrete;
}

.buti-item[open]::details-content {
	block-size: auto;
}

.buti-reply p {
	margin: var(--zql-snug) 0 0;
	color: var(--zql-soft-copy);
	line-height: var(--zql-loose);
}

/* ==========================================================================
   BYLINE-04: cytat z podpisem autora
   ========================================================================== */
.mizu {
	padding-block: var(--zql-roomy);
}

.mizu-quote {
	position: relative;
	max-width: calc(var(--zql-slim) + 2 * var(--zql-vast));
	margin: 0 auto;
	padding-top: var(--zql-roomy);
	text-align: center;
}

.mizu-quote::before {
	content: "\201C";
	position: absolute;
	top: -18px;
	left: 50%;
	transform: translateX(-50%);
	color: var(--zql-core);
	font-family: var(--zql-display);
	font-size: var(--zql-xxl);
	line-height: 1;
}

.mizu-quote p {
	margin: 0 0 var(--zql-base);
	color: var(--zql-body);
	font-family: var(--zql-display);
	font-size: var(--zql-display-4);
	font-style: italic;
	line-height: var(--zql-default);
}

.mizu-credit {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--zql-tiny);
}

.mizu-headshot {
	width: 32px;
	height: 32px;
	border-radius: var(--zql-orb);
	object-fit: cover;
}

.mizu-who {
	font-style: normal;
}

.mizu-who a {
	color: var(--zql-core);
	background: var(--zql-surface);
	font-weight: var(--zql-half);
	text-decoration: none;
}

.mizu-who a:hover {
	color: var(--zql-body);
	background: var(--zql-surface);
	text-decoration: underline;
}

.mizu-position {
	color: var(--zql-quiet);
	font-size: var(--zql-caption);
	font-style: italic;
}

/* ==========================================================================
   COOK-15: arkusz boczny
   ========================================================================== */
.ruxor {
	display: none;
	position: fixed;
	inset-block: 0;
	inset-inline-end: 0;
	z-index: 120;
	width: min(360px, 100vw);
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--zql-roomy);
	background: var(--zql-panel);
	color: var(--zql-body);
	border-inline-start: 1px solid #34373b;
	box-shadow: var(--d-wide);
}

.ruxor.is-open {
	display: flex;
}

.ruxor-inside {
	display: flex;
	flex-direction: column;
	gap: var(--zql-base);
}

/* banner: slide-up */
.ruxor.is-open .ruxor-inside {
	animation: zqlSheetRise var(--zql-steady) var(--zql-exit) backwards;
}

@keyframes zqlSheetRise {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.ruxor-message {
	margin: 0;
	color: var(--zql-soft-copy);
	font-size: var(--zql-caption);
	line-height: var(--zql-loose);
}

.ruxor-acts {
	display: flex;
	flex-direction: column;
	gap: var(--zql-snug);
}

.ruxor-ok,
.ruxor-no {
	width: 100%;
	min-height: 44px;
	padding: 0 var(--zql-base);
	border-radius: var(--r-snug);
	font-family: var(--zql-text);
	font-size: var(--zql-caption);
	font-weight: var(--zql-half);
	cursor: pointer;
}

.ruxor-ok {
	background: var(--zql-core);
	color: var(--zql-accent);
	border: 1px solid var(--zql-core);
}

.ruxor-ok:hover {
	background: #7fd40d;
	color: var(--zql-accent);
}

.ruxor-no {
	background: var(--zql-panel);
	color: var(--zql-body);
	border: 1px solid var(--zql-stroke-heavy);
}

.ruxor-no:hover {
	background: var(--zql-accent);
	color: var(--zql-body);
}

@media (max-width: 859px) {
	.ruxor {
		inset-block-start: auto;
		inset-block-end: 0;
		width: 100%;
		border-inline-start: 0;
		border-top: 1px solid #34373b;
	}
}

@media (max-width: 720px) {
	.ruxor,
	.ruxor-inside {
		padding: 12px 14px !important;
		gap: 8px !important;
		font-size: 13px !important;
		line-height: 1.35 !important;
	}
	.ruxor-inside {
		padding: 0 !important;
	}
	.ruxor button {
		padding: 8px 14px !important;
		font-size: 12px !important;
		min-height: 36px !important;
	}
	.ruxor-acts {
		flex-direction: row;
	}
}

/* ==========================================================================
   Przycisk ofertowy — kolor, animacja i jej liczby z cta-style.mjs
   (połysk przeniesiony z ::after na background-position, żeby nie
   poszerzał przycisku; czas, klatka i nieskończona pętla bez zmian)
   ========================================================================== */
.zuva-go{display:inline-flex;align-items:center;justify-content:center;padding:0 2px;min-height:44px;border-radius:4px;font-size:13px;font-weight:500;letter-spacing:0.03em}
.zuva-go{position:relative;
  background:#4F46E5;color:#FFFFFF;text-decoration:none;
  transition:background-color var(--zql-fast) var(--zql-exit),color var(--zql-fast) var(--zql-exit);}
.zuva-go.zuva-go{color:#FFFFFF;text-decoration:none;}
.zuva-go:hover{background:#4338CA;color:#FFFFFF;animation:none}
.zuva-go.zuva-go:hover{color:#FFFFFF;text-decoration:none}
.zuva-go:active{background:#3730A3;color:#FFFFFF}
.zuva-go:focus-visible{outline:3px solid #FFFFFF;outline-offset:3px}
.zuva-go{overflow:hidden}
.zuva-go{background-image:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,.42) 50%,rgba(255,255,255,0) 62%,rgba(255,255,255,0) 100%);background-size:260% 100%;background-repeat:no-repeat;background-position:160% 0;animation:zuva-drift 2.8s var(--zql-smooth) infinite}
@keyframes zuva-drift{0%{background-position:160% 0}53.571%,100%{background-position:-60% 0}}
@media (prefers-reduced-motion:reduce){.zuva-go{animation:none!important;transition:none!important}}

/* geometria przycisku ofertowego — własna, nie z pozycji menu */
.zuva-go.zuva-go {
	min-height: 52px;
	padding: 0 var(--zql-roomy);
	border-radius: var(--zql-lozenge);
	font-family: var(--zql-display);
	font-size: 14px;
	font-weight: var(--zql-heavy);
	letter-spacing: var(--e-loose);
	line-height: 1.2;
	text-transform: uppercase;
	text-align: center;
}

.rymir .zuva-go {
	animation-delay: -1.4s;
}

.rymir-inset .zuva-go {
	animation-delay: -0.7s;
}

.pada .zuva-go {
	animation-delay: -2.1s;
}

/* ==========================================================================
   PHEAD-03: duży blok nagłówka strony na barwie marki
   ========================================================================== */
.pada {
	background: var(--zql-core);
	color: var(--zql-accent);
}

.pada-frame {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--zql-base);
	padding-block: 54px;
}

.pada-head {
	max-width: var(--zql-mid);
	background: var(--zql-core);
	color: var(--zql-accent);
	font-size: clamp(30px, 5vw, 60px);
}

.pada-deck {
	max-width: var(--zql-mid);
	margin: 0;
	background: var(--zql-core);
	color: #1b2a06;
	font-size: var(--zql-display-4);
	line-height: var(--zql-default);
}

.pada-acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--zql-snug) var(--zql-wide);
	margin-top: var(--zql-tiny);
}

.pada-note {
	background: var(--zql-core);
	color: #1b2a06;
	font-size: var(--zql-legal);
	font-weight: var(--zql-half);
}

/* ==========================================================================
   TABLE-05: zwarta, gęsta tabela
   ========================================================================== */
.baxerex-scroll {
	overflow-x: auto;
	border: 1px solid var(--zql-hairline);
	border-radius: var(--r-snug);
}

.baxerex-grid {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--zql-caption);
}

.baxerex-grid th {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: var(--zql-snug);
	background: var(--zql-panel);
	color: var(--zql-body);
	font-size: var(--zql-legal);
	font-weight: var(--zql-heavy);
	letter-spacing: var(--e-loose);
	text-transform: uppercase;
	text-align: left;
}

.baxerex-grid td {
	padding: var(--zql-tiny) var(--zql-snug);
	background: var(--zql-surface);
	color: var(--zql-soft-copy);
	border-bottom: 1px solid #1e2023;
}

.baxerex-grid tr:last-child td {
	border-bottom: 0;
	color: var(--zql-body);
	font-weight: var(--zql-half);
}

/* ==========================================================================
   AUTH-08: minimalna karta autora + lista artykułów
   ========================================================================== */
.bozepul-unit {
	display: inline-flex;
	align-items: center;
	gap: var(--zql-snug);
	padding: var(--zql-snug) var(--zql-wide) var(--zql-snug) var(--zql-snug);
	background: var(--zql-panel);
	color: var(--zql-body);
	border-radius: var(--zql-lozenge);
}

.bozepul-headshot {
	width: 64px;
	height: 64px;
	border-radius: var(--zql-orb);
	object-fit: cover;
}

.bozepul-id {
	display: flex;
	flex-direction: column;
}

.bozepul-who {
	font-size: var(--z-body);
	font-weight: var(--zql-heavy);
}

.bozepul-position {
	color: var(--zql-quiet);
	background: var(--zql-panel);
	font-size: var(--zql-legal);
}

.bozepul-articles {
	display: block;
	padding-block: var(--zql-wide);
}

.bozepul-articles-head {
	margin-bottom: var(--zql-base);
	font-size: var(--zql-display-4);
	font-weight: var(--zql-heavy);
}

.bozepul-articles-stack {
	display: flex;
	flex-direction: column;
	gap: var(--zql-tiny);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bozepul-articles-item {
	line-height: var(--zql-default);
}

.bozepul-articles-item a {
	color: var(--zql-core);
	background: var(--zql-surface);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bozepul-articles-item a:hover {
	color: var(--zql-body);
	background: var(--zql-surface);
}

/* ==========================================================================
   FORM-05: formularz w obrysie, pola redakcyjne
   ========================================================================== */
.funo-sheet {
	display: grid;
	gap: var(--zql-wide);
	padding: var(--zql-roomy);
	background: var(--zql-surface);
	color: var(--zql-body);
	border: 2px solid var(--zql-core);
	border-radius: var(--r-base);
}

.funo-slot {
	display: flex;
	flex-direction: column;
	gap: var(--zql-tiny);
}

.funo-cue {
	color: var(--zql-quiet);
	background: var(--zql-surface);
	font-size: var(--zql-caption);
	font-weight: var(--zql-half);
	letter-spacing: var(--zql-normal);
}

.funo-input {
	width: 100%;
	padding: var(--zql-tiny) 0;
	background: var(--zql-surface);
	color: var(--zql-body);
	border: 0;
	border-bottom: 1px solid var(--zql-stroke-heavy);
	border-radius: var(--r-tiny);
	font-family: var(--zql-text);
	font-size: var(--zql-display-4);
}

.funo-input:focus {
	outline: none;
	border-bottom-color: var(--zql-core);
}

.funo-area {
	resize: vertical;
	min-height: 120px;
}

.funo-send {
	justify-self: start;
}

.funo-done {
	display: none;
	padding: var(--zql-base) var(--zql-wide);
	background: var(--zql-leaf);
	color: var(--zql-body);
	border-radius: var(--r-snug);
}

.funo-sheet.is-sent .funo-done {
	display: block;
}

/* ==========================================================================
   LEGAL-05: lista definicji
   ========================================================================== */
.kopulo-stack {
	margin: 0;
}

.kopulo-term {
	margin-block: var(--zql-wide) var(--zql-tiny);
	color: var(--zql-body);
	font-family: var(--zql-display);
	font-size: var(--zql-display-4);
	font-weight: var(--zql-heavy);
}

.kopulo-term:first-child {
	margin-top: 0;
}

.kopulo-term::before {
	content: "";
	display: block;
	width: 30px;
	height: 2px;
	margin-bottom: var(--zql-snug);
	background: var(--zql-core);
}

.kopulo-def {
	margin: 0 0 var(--zql-base);
}

.kopulo-def p {
	margin: 0;
	color: var(--zql-soft-copy);
	line-height: var(--zql-loose);
}

.kopulo-def p + p {
	margin-top: var(--zql-snug);
}

.kopulo-help {
	margin: var(--zql-wide) 0 var(--zql-base);
	padding: var(--zql-wide) var(--zql-wide) var(--zql-wide) 2.4em;
	background: var(--zql-panel);
	color: var(--zql-soft-copy);
	border-radius: var(--r-base);
	line-height: var(--zql-loose);
}

.kopulo-fine {
	display: block;
	color: var(--zql-quiet);
	font-size: var(--zql-caption);
}

/* ==========================================================================
   ERR-08: 404 z podpowiedziami stron
   ========================================================================== */
.timos-frame {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--zql-base);
	padding-block: 54px;
	text-align: center;
}

.timos-code {
	color: var(--zql-core);
	font-family: var(--zql-display);
	font-size: clamp(64px, 12vw, 128px);
	font-weight: var(--zql-heavy);
	line-height: 1;
}

.timos-head {
	max-width: var(--zql-mid);
	font-size: clamp(26px, 4vw, 44px);
}

.timos-words {
	max-width: var(--zql-slim);
	margin: 0;
	color: var(--zql-quiet);
	line-height: var(--zql-loose);
}

.timos-hints {
	align-self: stretch;
	margin-top: var(--zql-wide);
	padding: var(--zql-roomy);
	background: var(--zql-panel);
	color: var(--zql-body);
	border-radius: var(--r-base);
}

.timos-hints-head {
	margin-bottom: var(--zql-base);
	font-size: var(--zql-display-4);
}

.timos-hints-stack {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--zql-snug) var(--zql-wide);
	margin: 0;
	padding: 0;
	list-style: none;
}

.timos-hints-stack a {
	color: var(--zql-core);
	background: var(--zql-panel);
	text-decoration: none;
}

.timos-hints-stack a:hover {
	color: var(--zql-body);
	background: var(--zql-panel);
	text-decoration: underline;
}

/* ==========================================================================
   Wąskie ekrany
   ========================================================================== */
@media (max-width: 899px) {
	.dugipum-wide {
		max-width: 100%;
	}
	.dugipum-square {
		max-width: 80%;
	}
	.pibux-stack {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	.doto-frame,
	.pada-frame,
	.timos-frame {
		padding-block: 40px;
	}
	.rakile-item {
		grid-template-columns: 28px minmax(0, 1fr);
		column-gap: var(--zql-snug);
		padding: var(--zql-snug) var(--zql-base);
	}
	.rakile-mark {
		width: 26px;
		height: 26px;
	}
	.rymir-inset {
		padding: var(--zql-base) var(--zql-wide);
	}
	.rymir-inset .zuva-go,
	.doto .zuva-go,
	.pada .zuva-go,
	.rymir .zuva-go {
		width: 100%;
	}
	.rymir-acts {
		width: 100%;
		flex-direction: column;
	}
	.rymir-alt {
		width: 100%;
	}
	.funo-sheet {
		padding: var(--zql-wide);
	}
	.baxerex-grid th,
	.baxerex-grid td {
		padding-inline: var(--zql-tiny);
	}
}

/* stan bez JavaScriptu — treść widoczna tak samo */
.no-js {
	scroll-behavior: auto;
}

.timos {
	display: block;
}

/* wstawka ofertowa jako pełny wiersz siatki opinii */
.pibux-plug {
	grid-column: 1 / -1;
	margin-block: 0;
}

@media (max-width: 504px) {
  .kobebi-links,
  .kobebi-stack,
  .kobebi-jump,
  .kobebi-overflow { display: none !important; }
  .kobebi-more { display: inline-block !important; }
}