/* Godzinowo 1.4 – odświeżone makiety ekranów aplikacji */

/* ===== Kafelek raportów – miniatura wykresu z aplikacji ===== */
.rp-mini {
	display: grid;
	gap: 12px;
	margin-top: 22px;
	padding: 14px;
	border: 1px solid #e3eaf5;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 14px 30px rgba(21, 45, 93, .07);
}

.rp-mini-kpis {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.rp-mini-kpis span {
	display: grid;
	padding: 8px 10px;
	border: 1px solid #edf1f8;
	border-radius: 11px;
	background: #f8fafd;
	line-height: 1.25;
}

.rp-mini-kpis small { color: #8190aa; font-size: 10px; font-weight: 700; }
.rp-mini-kpis b { color: #071633; font-size: 15px; }
.rp-mini-kpis span:first-child b { color: #2868f2; }

.rp-mini-chart {
	position: relative;
	display: grid;
	grid-template-columns: repeat(14, 1fr);
	gap: 4px;
	align-items: end;
	height: 110px;
	padding-top: 8px;
	border-bottom: 1px solid #dbe3ee;
	background: repeating-linear-gradient(to top, transparent 0 36px, #eef2f8 36px 37px);
}

.rp-mini-chart > span {
	display: flex;
	align-items: flex-end;
	height: 100%;
	border-radius: 4px 4px 0 0;
}

.rp-mini-chart > span.is-weekend { background: rgba(148, 163, 184, .1); }

.rp-mini-chart > span i {
	display: block;
	width: 100%;
	height: var(--h);
	border-radius: 4px 4px 1px 1px;
	background: linear-gradient(180deg, #2868f2, #6aa2ff);
	transform-origin: bottom;
	animation: rp-grow .9s cubic-bezier(.2, .8, .2, 1) both;
}

.rp-mini-chart > span.is-best i { background: linear-gradient(180deg, #4338ca, #7c50f5); box-shadow: 0 6px 14px rgba(79, 70, 229, .3); }
.rp-mini-chart > span:nth-child(odd) i { animation-delay: .08s; }

.rp-mini-avg {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: var(--avg);
	left: 0;
	border-top: 2px dashed #f59e0b;
}

.rp-mini-avg em {
	position: absolute;
	top: -10px;
	left: 0;
	padding: 1px 6px;
	border-radius: 999px;
	color: #92400e;
	background: #fef3c7;
	font-size: 9px;
	font-style: normal;
	font-weight: 800;
}

.rp-mini .report-legend { margin: 0; }
.rp-mini .report-legend i.avg { height: 0; border-top: 2px dashed #f59e0b; border-radius: 0; background: none; }

@keyframes rp-grow {
	from { transform: scaleY(.1); }
	to { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
	.rp-mini-chart > span i { animation: none; }
}

/* ===== Kafelek RCP – miniatura tablicy „Obecność na żywo” ===== */
.pr-mini {
	display: grid;
	gap: 7px;
	margin-top: auto;
	padding-top: 20px;
}

.pr-mini-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin-bottom: 3px;
}

.pr-mini-stats span {
	display: grid;
	padding: 8px 10px;
	border: 1px solid #e3eaf5;
	border-radius: 12px;
	background: #fff;
	color: #64748b;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.2;
	box-shadow: inset 0 -3px 0 var(--pr-c, #94a3b8);
}

.pr-mini-stats b { color: #071633; font-size: 18px; }
.pr-mini .is-working { --pr-c: #10b981; }
.pr-mini .is-break { --pr-c: #f59e0b; }
.pr-mini .is-alert { --pr-c: #ef4444; }
.pr-mini-stats .is-alert b { color: #b91c1c; }

.pr-mini-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 10px;
	align-items: center;
	padding: 8px 10px;
	border: 1px solid #e8eef7;
	border-radius: 13px;
	background: #fff;
}

.pr-mini-row > i {
	position: relative;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	color: #fff;
	background: linear-gradient(145deg, #2868f2, #7c50f5);
	font-size: 11px;
	font-style: normal;
	font-weight: 800;
}

.pr-mini-row > i::after {
	content: "";
	position: absolute;
	right: -3px;
	bottom: -3px;
	width: 10px;
	height: 10px;
	border: 2px solid #fff;
	border-radius: 999px;
	background: var(--pr-c);
}

.pr-mini-row.is-working > i::after { animation: pr-mini-pulse 1.8s ease-out infinite; }

.pr-mini-row p { display: grid; margin: 0; line-height: 1.25; }
.pr-mini-row strong { color: #071633; font-size: 12.5px; }
.pr-mini-row small { color: #8190aa; font-size: 10.5px; }
.pr-mini-row > b { color: #071633; font-size: 13px; font-variant-numeric: tabular-nums; }

.pr-mini-row.is-alert {
	border-color: #fecaca;
	background: linear-gradient(150deg, #fff5f5, #fff 60%);
}

.pr-mini-row.is-alert small { color: #b91c1c; }

.pr-mini-row.is-alert > b {
	padding: 4px 9px;
	border-radius: 8px;
	color: #fff;
	background: #dc2626;
	font-size: 11px;
}

.bento-rcp { display: flex; flex-direction: column; }

@keyframes pr-mini-pulse {
	0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .5); }
	70%, 100% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.pr-mini-row.is-working > i::after { animation: none; }
}

/* =====================================================================
   Kiosk RCP – wierna makieta ekranu aplikacji (skaluje się w cqw)
   ===================================================================== */
.dv-screen {
	position: relative;
	overflow: hidden;
	container-type: inline-size;
	background: #f1f5fa;
}

.ks {
	--k: 1cqw;
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	color: #0f172a;
	background: #f1f5fa;
	font-family: "Inter Local", Inter, system-ui, sans-serif;
	line-height: 1.2;
	text-align: center;
}

.ks-portrait { --k: 2.25cqw; }

.ks svg { flex: 0 0 auto; }

.ks-bar {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	height: calc(6.8 * var(--k));
	padding: 0 calc(2 * var(--k));
	border-bottom: 1px solid #e3e9f2;
	background: #fff;
}

.ks-bar img { width: auto; height: calc(2.6 * var(--k)); }

.ks-gear {
	display: grid;
	place-items: center;
	width: calc(4.2 * var(--k));
	height: calc(4.2 * var(--k));
	border: 1px solid #e2e8f0;
	border-radius: calc(1.1 * var(--k));
	color: #1d4ed8;
	background: #f8fafc;
}

.ks-gear svg { width: calc(1.7 * var(--k)); height: calc(1.7 * var(--k)); }

.ks-body {
	display: grid;
	flex: 1;
	place-items: center;
	padding: calc(2 * var(--k));
}

.ks-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 55cqw;
	padding: calc(3 * var(--k)) calc(2.2 * var(--k));
	border: 1px solid #e6ecf4;
	border-radius: calc(1.7 * var(--k));
	background: linear-gradient(180deg, #fff, #f6f9fd);
	box-shadow: 0 calc(1.2 * var(--k)) calc(3 * var(--k)) rgba(15, 23, 42, .08);
}

.ks-portrait .ks-card { width: 92cqw; }

.ks-time {
	color: #0f172a;
	font-size: calc(6 * var(--k));
	font-weight: 900;
	letter-spacing: -.02em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.ks-date {
	margin-top: calc(.7 * var(--k));
	color: #1d4ed8;
	font-size: calc(1.4 * var(--k));
	font-weight: 800;
}

.ks-finger {
	position: relative;
	display: grid;
	place-items: center;
	width: calc(13.5 * var(--k));
	height: calc(13.5 * var(--k));
	margin: calc(2.6 * var(--k)) 0 calc(3 * var(--k));
	border-radius: 50%;
	color: #2563eb;
	background: #fff;
	box-shadow: 0 0 0 calc(1.6 * var(--k)) #dbe7fb, 0 calc(.6 * var(--k)) calc(2 * var(--k)) rgba(37, 99, 235, .12);
}

.ks-finger i {
	position: absolute;
	inset: calc(-1.6 * var(--k));
	border: calc(.25 * var(--k)) solid rgba(37, 99, 235, .35);
	border-radius: 50%;
	animation: ks-ripple 2.4s ease-out infinite;
}

.ks-finger svg { width: calc(5.4 * var(--k)); height: calc(5.4 * var(--k)); stroke-width: 1.6; }

.ks-title { color: #0f172a; font-size: calc(2.4 * var(--k)); font-weight: 900; letter-spacing: -.01em; }
.ks-sub { margin-top: calc(.6 * var(--k)); color: #64748b; font-size: calc(1.3 * var(--k)); }

.ks-wait {
	display: inline-flex;
	gap: calc(.7 * var(--k));
	align-items: center;
	margin-top: calc(1.4 * var(--k));
	padding: calc(.75 * var(--k)) calc(1.5 * var(--k));
	border-radius: 999px;
	color: #1d4ed8;
	background: #eef3fb;
	font-size: calc(1.2 * var(--k));
	font-weight: 800;
}

.ks-wait svg { width: calc(1.6 * var(--k)); height: calc(1.6 * var(--k)); }

.ks-alt {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(1.2 * var(--k));
	width: 100%;
	margin-top: calc(1.6 * var(--k));
}

.ks-alt span,
.ks-keypad-alt span {
	display: flex;
	gap: calc(.7 * var(--k));
	align-items: center;
	justify-content: center;
	height: calc(5 * var(--k));
	border: 1px solid #dfe8f5;
	border-radius: calc(1.1 * var(--k));
	color: #1d4ed8;
	background: #f3f7fd;
	font-size: calc(1.45 * var(--k));
	font-weight: 800;
}

.ks-alt svg,
.ks-keypad-alt svg { width: calc(1.8 * var(--k)); height: calc(1.8 * var(--k)); }

/* Klawiatura numeru – układ poziomy */
.ks-card-keypad {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(3 * var(--k));
	align-items: center;
	width: 87cqw;
	padding: calc(2.6 * var(--k));
	text-align: left;
}

.ks-keypad-side { display: grid; gap: calc(1.6 * var(--k)); }
.ks-keypad-time { display: grid; justify-items: center; margin-bottom: calc(.8 * var(--k)); }
.ks-keypad-time .ks-time { font-size: calc(4 * var(--k)); }
.ks-keypad-time .ks-date { font-size: calc(1.3 * var(--k)); }

.ks-keypad-head { display: flex; gap: calc(1.4 * var(--k)); align-items: center; }

.ks-keypad-head > span,
.ks-person {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: calc(4.6 * var(--k));
	height: calc(4.6 * var(--k));
	border-radius: calc(1.2 * var(--k));
	color: #2563eb;
	background: #eef3fb;
}

.ks-keypad-head svg { width: calc(2.2 * var(--k)); height: calc(2.2 * var(--k)); }
.ks-keypad-head p { display: grid; margin: 0; }
.ks-keypad-head b { font-size: calc(1.9 * var(--k)); font-weight: 900; }
.ks-keypad-head small { color: #64748b; font-size: calc(1.3 * var(--k)); font-weight: 600; }

.ks-keypad-main { display: grid; gap: calc(1 * var(--k)); }

.ks-field {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(1 * var(--k));
	align-items: center;
	padding: calc(.9 * var(--k));
	border: 1px solid #dfe8f5;
	border-radius: calc(1.3 * var(--k));
	background: #f1f6fd;
}

.ks-field p { display: grid; gap: calc(.4 * var(--k)); margin: 0 0 0 calc(1 * var(--k)); }
.ks-field small { color: #1d4ed8; font-size: calc(1 * var(--k)); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.ks-field b { min-height: calc(2 * var(--k)); font-size: calc(1.7 * var(--k)); letter-spacing: .25em; }

.ks-field > span {
	display: grid;
	place-items: center;
	height: calc(4.6 * var(--k));
	border: 1px solid #e2e8f0;
	border-radius: calc(1 * var(--k));
	color: #1d4ed8;
	background: #fff;
}

.ks-field svg { width: calc(2 * var(--k)); height: calc(2 * var(--k)); }

.ks-keys {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(.85 * var(--k));
}

.ks-keys span {
	display: flex;
	gap: calc(.5 * var(--k));
	align-items: center;
	justify-content: center;
	height: calc(5 * var(--k));
	border: 1px solid #e2e8f0;
	border-radius: calc(1 * var(--k));
	background: #f5f8fc;
	font-size: calc(2.1 * var(--k));
	font-weight: 900;
	transition: background .15s ease, border-color .15s ease;
}

.ks-keys .is-clear { color: #dc2626; font-size: calc(1.05 * var(--k)); }
.ks-keys .is-back { color: #1d4ed8; }
.ks-keys svg { width: calc(1.9 * var(--k)); height: calc(1.9 * var(--k)); }
.ks-keys span.is-pressed { border-color: #93c5fd; background: #dbeafe; }

.ks-primary {
	display: flex;
	gap: calc(.7 * var(--k));
	align-items: center;
	justify-content: center;
	height: calc(5 * var(--k));
	border-radius: calc(1.1 * var(--k));
	color: #fff;
	background: #2563eb;
	font-size: calc(1.5 * var(--k));
	font-weight: 800;
}

.ks-primary svg { width: calc(1.8 * var(--k)); height: calc(1.8 * var(--k)); }

.ks-keypad-alt { display: grid; gap: calc(1 * var(--k)); }

/* Potwierdzenie osoby */
.ks-card-confirm { gap: calc(.3 * var(--k)); width: 46cqw; padding: calc(2.6 * var(--k)); }
.ks-person { width: calc(6.6 * var(--k)); height: calc(6.6 * var(--k)); margin-bottom: calc(1 * var(--k)); border: 1px solid #dfe8f5; border-radius: calc(1.6 * var(--k)); }
.ks-person svg { width: calc(3 * var(--k)); height: calc(3 * var(--k)); }
.ks-kicker { color: #1d4ed8; font-size: calc(1 * var(--k)); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.ks-name { font-size: calc(2.3 * var(--k)); font-weight: 900; }
.ks-meta { display: inline-flex; gap: calc(1 * var(--k)); align-items: center; color: #64748b; font-size: calc(1.3 * var(--k)); }
.ks-meta em { display: inline-flex; gap: calc(.3 * var(--k)); align-items: center; color: #2563eb; font-style: normal; }
.ks-meta svg { width: calc(1.2 * var(--k)); height: calc(1.2 * var(--k)); }

.ks-action {
	display: flex;
	gap: calc(1 * var(--k));
	align-items: center;
	width: 100%;
	height: calc(6.4 * var(--k));
	margin-top: calc(1.3 * var(--k));
	padding: 0 calc(2 * var(--k));
	border-radius: calc(1.3 * var(--k));
	font-size: calc(1.8 * var(--k));
	font-weight: 900;
	text-align: left;
}

.ks-action svg { width: calc(2.2 * var(--k)); height: calc(2.2 * var(--k)); }
.ks-action svg:last-child:not(:first-child) { margin-left: auto; }
.ks-action.is-start { color: #fff; background: #2563eb; box-shadow: 0 calc(.8 * var(--k)) calc(2 * var(--k)) rgba(37, 99, 235, .3); }
.ks-action.is-break { color: #92400e; background: #fef3c7; border: 1px solid #f5c542; }
.ks-action.is-end { margin-top: calc(1 * var(--k)); color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; }

.ks-back {
	display: inline-flex;
	gap: calc(.6 * var(--k));
	align-items: center;
	margin-top: calc(2 * var(--k));
	color: #1d4ed8;
	font-size: calc(1.4 * var(--k));
	font-weight: 800;
}

.ks-back svg { width: calc(1.6 * var(--k)); height: calc(1.6 * var(--k)); }

/* Pełnoekranowe potwierdzenie */
.ks-success {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(.6 * var(--k));
	color: #fff;
	background: linear-gradient(180deg, #16a34a, #047857);
}

.ks-success-icon {
	display: grid;
	place-items: center;
	width: calc(13 * var(--k));
	height: calc(13 * var(--k));
	margin-bottom: calc(3 * var(--k));
	border-radius: 50%;
	color: #047857;
	background: #fff;
}

.ks-success-icon svg { width: calc(5.4 * var(--k)); height: calc(5.4 * var(--k)); stroke-width: 2.2; }
.ks-success small { color: rgba(255, 255, 255, .78); font-size: calc(1.3 * var(--k)); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.ks-success strong { font-size: calc(3.6 * var(--k)); font-weight: 900; }
.ks-success span { font-size: calc(2 * var(--k)); font-weight: 800; }

@keyframes ks-ripple {
	0% { opacity: .9; transform: scale(.92); }
	100% { opacity: 0; transform: scale(1.28); }
}

/* =====================================================================
   Ramki urządzeń
   ===================================================================== */
.dv-tablet {
	position: relative;
	padding: 1.7%;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: clamp(22px, 3vw, 40px);
	background: linear-gradient(150deg, #2a3553, #121a30 45%, #0b1122);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, .05),
		0 40px 90px rgba(3, 8, 30, .6),
		0 0 120px rgba(79, 70, 229, .22);
}

.dv-tablet > .dv-screen {
	aspect-ratio: 16 / 10;
	border-radius: clamp(12px, 1.8vw, 24px);
}

.dv-camera {
	position: absolute;
	top: 50%;
	left: .65%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #050913;
	box-shadow: inset 0 0 0 2px #1e2945;
	transform: translateY(-50%);
}

.dv-phone {
	position: relative;
	padding: 3.2%;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 34px;
	background: linear-gradient(150deg, #2a3553, #0b1122);
	box-shadow: 0 30px 60px rgba(3, 8, 30, .55);
}

.dv-phone > .dv-screen {
	aspect-ratio: 9 / 19;
	border-radius: 26px;
}

.dv-punch {
	position: absolute;
	z-index: 3;
	top: 4.2%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #050913;
	transform: translateX(-50%);
}

/* =====================================================================
   Hero strony głównej
   ===================================================================== */
.hx {
	position: relative;
	overflow: hidden;
	padding: clamp(130px, 13vw, 180px) 0 clamp(80px, 9vw, 130px);
	color: #fff;
	background: #070c22;
	isolation: isolate;
}

.hx-bg { position: absolute; z-index: -1; inset: 0; pointer-events: none; }

.hx-glow { position: absolute; border-radius: 50%; filter: blur(90px); }
.hx-glow-a { top: -20%; right: -5%; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; background: rgba(79, 70, 229, .38); }
.hx-glow-b { bottom: -35%; left: -15%; width: 50vw; height: 50vw; max-width: 760px; max-height: 760px; background: rgba(37, 99, 235, .3); }

.hx-ring { position: absolute; border: 1px solid rgba(148, 163, 255, .1); border-radius: 50%; }
.hx-ring-a { top: 50%; right: -18%; width: 1100px; height: 1100px; transform: translateY(-50%); }
.hx-ring-b { top: 50%; right: -4%; width: 760px; height: 760px; transform: translateY(-50%); }

.hx-grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(148, 163, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 255, .05) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%);
	mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%);
}

.hx-shell,
.kf-shell {
	display: grid;
	grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
	gap: clamp(40px, 5vw, 80px);
	align-items: center;
	width: min(100% - 48px, 1320px);
	margin: 0 auto;
}

.hx-badge {
	display: inline-flex;
	gap: 9px;
	align-items: center;
	padding: 8px 15px;
	border: 1px solid rgba(148, 163, 255, .28);
	border-radius: 999px;
	color: #dbe4ff;
	background: rgba(30, 41, 90, .55);
	backdrop-filter: blur(10px);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.hx-badge i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #34d399;
	box-shadow: 0 0 0 4px rgba(52, 211, 153, .18);
}

.hx h1,
.kf h2 {
	margin: 24px 0 22px;
	color: #fff;
	font-size: clamp(46px, 5.8vw, 88px);
	font-weight: 900;
	line-height: .98;
	letter-spacing: -.055em;
}

.hx h1 span,
.kf h2 span {
	background: linear-gradient(95deg, #60a5fa 10%, #a78bfa 90%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hx-copy > p,
.kf-copy > p {
	max-width: 590px;
	margin: 0;
	color: #aab6d6;
	font-size: clamp(17px, 1.45vw, 20px);
	line-height: 1.65;
}

.hx-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	margin-top: 34px;
}

.hx-button {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	min-height: 60px;
	padding: 0 28px;
	border-radius: 16px;
	color: #fff;
	background: linear-gradient(135deg, #3b82f6, #4f46e5 60%, #7c3aed);
	box-shadow: 0 18px 40px rgba(79, 70, 229, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
	font-size: 17px;
	font-weight: 800;
	transition: transform .2s ease, box-shadow .2s ease;
}

.hx-button:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 24px 50px rgba(79, 70, 229, .55), inset 0 1px 0 rgba(255, 255, 255, .25); }

.hx-ghost {
	display: inline-flex;
	gap: 11px;
	align-items: center;
	min-height: 60px;
	padding: 0 22px 0 10px;
	border: 1px solid rgba(148, 163, 255, .25);
	border-radius: 16px;
	color: #e2e8ff;
	background: rgba(255, 255, 255, .04);
	font-size: 16px;
	font-weight: 700;
	transition: background .2s ease, border-color .2s ease;
}

.hx-ghost:hover { color: #fff; border-color: rgba(148, 163, 255, .5); background: rgba(255, 255, 255, .08); }

.hx-ghost span {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	color: #fff;
	background: rgba(255, 255, 255, .1);
}

.hx-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
	color: #8f9cc0;
	font-size: 14px;
	font-weight: 600;
}

.hx-trust li { display: inline-flex; gap: 7px; align-items: center; }
.hx-trust svg { color: #34d399; }

.hx-visual {
	position: relative;
	padding: 4% 0 8% 6%;
	perspective: 1800px;
}

.hx-visual .dv-tablet {
	transform: rotateY(-9deg) rotateX(4deg) rotateZ(-1deg);
	transition: transform .6s ease;
}

.hx-visual:hover .dv-tablet { transform: rotateY(-4deg) rotateX(2deg); }

.hx-visual .dv-phone {
	position: absolute;
	bottom: -2%;
	left: -3%;
	width: 24%;
	transform: rotate(-6deg);
}

.hx-toast {
	position: absolute;
	top: 8%;
	right: -2%;
	display: flex;
	gap: 13px;
	align-items: center;
	padding: 13px 18px 13px 13px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 20px;
	background: linear-gradient(135deg, #16a34a, #047857);
	box-shadow: 0 24px 50px rgba(4, 120, 87, .45);
	animation: hx-toast 7s ease-in-out infinite;
}

.hx-toast > span {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	color: #047857;
	background: #fff;
}

.hx-toast p { display: grid; margin: 0; line-height: 1.2; }
.hx-toast small { color: rgba(255, 255, 255, .78); font-size: 10.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.hx-toast strong { color: #fff; font-size: 17px; }
.hx-toast em { color: #d1fae5; font-size: 13px; font-style: normal; font-weight: 700; }
.hx-toast em b { font-weight: 700; }

.hx-live {
	position: absolute;
	right: 4%;
	bottom: 0;
	display: flex;
	gap: 11px;
	align-items: center;
	padding: 11px 16px;
	border: 1px solid rgba(148, 163, 255, .25);
	border-radius: 16px;
	background: rgba(15, 23, 60, .75);
	backdrop-filter: blur(14px);
	box-shadow: 0 18px 40px rgba(3, 8, 30, .5);
}

.hx-live i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #34d399;
	animation: hx-pulse 1.8s ease-out infinite;
}

.hx-live p { display: grid; margin: 0; line-height: 1.25; }
.hx-live strong { color: #fff; font-size: 14px; }
.hx-live small { color: #8f9cc0; font-size: 12px; }

@keyframes hx-toast {
	0%, 8% { opacity: 0; transform: translateY(14px) scale(.96); }
	14%, 72% { opacity: 1; transform: none; }
	80%, 100% { opacity: 0; transform: translateY(-8px) scale(.98); }
}

@keyframes hx-pulse {
	0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); }
	70%, 100% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); }
}

/* Przezroczysty nagłówek nad ciemnym hero */
.brand-logo-light { display: none; }
.site-branding { position: relative; }

/* Przezroczysty nagłówek tylko tam, gdzie menu jest poziome (motyw przełącza menu na mobilne poniżej 1025 px). */
@media (min-width: 1025px) {
	/* commercial.css wymusza białe tło nagłówka, dlatego tutaj również !important. */
	body:has(.hx) .site-header:not(.is-scrolled) {
		border-color: transparent;
		background: transparent !important;
		box-shadow: none;
		backdrop-filter: none;
	}

	body:has(.hx) .site-header:not(.is-scrolled) .brand-logo { opacity: 0; }

	body:has(.hx) .site-header:not(.is-scrolled) .brand-logo-light {
		position: absolute;
		top: 50%;
		left: 0;
		display: block;
		width: auto;
		height: 100%;
		max-height: 44px;
		transform: translateY(-50%);
		pointer-events: none;
	}

	body:has(.hx) .site-header:not(.is-scrolled) .main-navigation a,
	body:has(.hx) .site-header:not(.is-scrolled) .header-link { color: #dbe4ff; }

	/* Motyw podkłada pod aktywny i najechany link jasne tło – na ciemnym nagłówku zamieniamy je na półprzezroczyste. */
	body:has(.hx) .site-header:not(.is-scrolled) .main-navigation a:hover,
	body:has(.hx) .site-header:not(.is-scrolled) .main-navigation a:focus-visible,
	body:has(.hx) .site-header:not(.is-scrolled) .main-navigation .current-menu-item > a,
	body:has(.hx) .site-header:not(.is-scrolled) .main-navigation .current_page_item > a {
		color: #fff;
		background: rgba(255, 255, 255, .1);
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
	}

	body:has(.hx) .site-header:not(.is-scrolled) .header-link:hover { color: #fff; }

	body:has(.hx) .site-header:not(.is-scrolled) .button-dark:hover,
	body:has(.hx) .site-header:not(.is-scrolled) .button-dark:focus-visible {
		color: #0b1230;
		background: #e8edff;
	}

	body:has(.hx) .site-header:not(.is-scrolled) .button-dark {
		border-color: rgba(255, 255, 255, .2);
		color: #0b1230;
		background: #fff;
	}
}

/* =====================================================================
   Sekcja „Tak wygląda odbicie”
   ===================================================================== */
.kf {
	position: relative;
	overflow: hidden;
	padding: clamp(80px, 9vw, 130px) 0;
	color: #fff;
	background:
		radial-gradient(circle at 85% 30%, rgba(79, 70, 229, .25), transparent 40%),
		radial-gradient(circle at 10% 90%, rgba(37, 99, 235, .2), transparent 40%),
		linear-gradient(180deg, #070c22, #0a1233);
}

.kf h2 { font-size: clamp(40px, 4.6vw, 70px); }

.kf-steps {
	display: grid;
	gap: 10px;
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
}

.kf-steps button {
	position: relative;
	display: flex;
	gap: 15px;
	align-items: center;
	width: 100%;
	padding: 16px 18px;
	overflow: hidden;
	border: 1px solid rgba(148, 163, 255, .14);
	border-radius: 18px;
	color: #c7d2fe;
	background: rgba(255, 255, 255, .03);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background .25s ease, border-color .25s ease;
}

.kf-steps button:hover { border-color: rgba(148, 163, 255, .3); background: rgba(255, 255, 255, .06); }

.kf-steps button.is-active {
	border-color: rgba(129, 140, 248, .55);
	background: linear-gradient(135deg, rgba(59, 130, 246, .2), rgba(124, 58, 237, .16));
	box-shadow: 0 18px 40px rgba(3, 8, 30, .35);
}

.kf-step-icon {
	display: grid;
	flex: 0 0 46px;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	color: #a5b4fc;
	background: rgba(255, 255, 255, .06);
	transition: .25s ease;
}

.kf-steps button.is-active .kf-step-icon { color: #fff; background: linear-gradient(135deg, #3b82f6, #7c3aed); box-shadow: 0 10px 22px rgba(79, 70, 229, .45); }

.kf-step-copy { display: grid; gap: 3px; }
.kf-step-copy b { color: #fff; font-size: 17px; }
.kf-step-copy small { color: #8f9cc0; font-size: 14px; line-height: 1.45; }

.kf-step-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 3px;
	background: linear-gradient(90deg, #60a5fa, #a78bfa);
}

.kf-steps button.is-active .kf-step-progress { animation: kf-progress var(--kf-duration, 4s) linear forwards; }
.kf.is-paused .kf-steps button.is-active .kf-step-progress { width: 100%; animation: none; }

.kf-visual { position: relative; }
.kf-screens { position: relative; }

.kf-screen {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale(1.02);
	transition: opacity .45s ease, transform .45s ease;
}

.kf-screen.is-active { opacity: 1; transform: none; }

.kf-caption {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	justify-content: center;
	margin-top: 26px;
	color: #8f9cc0;
	font-size: 14px;
	font-weight: 600;
}

.kf-caption span { display: inline-flex; gap: 7px; align-items: center; }
.kf-caption svg { color: #a5b4fc; }

@keyframes kf-progress { from { width: 0; } to { width: 100%; } }

@media (max-width: 1100px) {
	.hx-shell, .kf-shell { grid-template-columns: 1fr; }
	.hx-copy, .kf-copy { max-width: 720px; }
	.hx-visual { width: 100%; max-width: 860px; margin: 0 auto; }
}

@media (max-width: 620px) {
	.hx { padding-top: 120px; }
	.hx-actions a { justify-content: center; width: 100%; }
	.hx-visual { padding: 6% 0 14%; }
	.hx-visual .dv-tablet { transform: none; }
	.hx-visual .dv-phone { left: -1%; width: 30%; }
	.hx-toast { top: auto; right: 0; bottom: 0; transform: scale(.85); }
	.hx-live { display: none; }
	.dv-tablet { border-radius: 18px; }
	.dv-tablet > .dv-screen { border-radius: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.ks-finger i, .hx-toast, .hx-live i { animation: none; }
	.hx-toast { opacity: 1; }
	.kf-screen { transition: none; }
}

/* =====================================================================
   Panel pracownika – wierna kopia ekranu „Czas pracy” z aplikacji.
   Wymiary w --u odpowiadają pikselom aplikacji przy szerokości 1440 px.
   ===================================================================== */
.ep {
	position: relative;
	overflow: hidden;
	padding: clamp(80px, 9vw, 130px) 0;
	color: #fff;
	background:
		radial-gradient(circle at 80% 20%, rgba(37, 99, 235, .25), transparent 40%),
		radial-gradient(circle at 0% 100%, rgba(124, 58, 237, .18), transparent 40%),
		#070c22;
}

.ep-shell {
	display: grid;
	grid-template-columns: minmax(0, .58fr) minmax(0, 1.42fr);
	gap: clamp(36px, 4vw, 64px);
	align-items: center;
	width: min(100% - 48px, 1320px);
	margin: 0 auto;
}

.ep h2 {
	margin: 24px 0 20px;
	color: #fff;
	font-size: clamp(34px, 3.1vw, 48px);
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: -.05em;
}

.ep h2 span {
	background: linear-gradient(95deg, #60a5fa 10%, #a78bfa 90%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ep-copy > p { margin: 0; color: #aab6d6; font-size: 17px; line-height: 1.65; }

.ep-list { display: grid; gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; }
.ep-list li { display: flex; gap: 12px; align-items: flex-start; }

.ep-list li > svg {
	flex: 0 0 auto;
	box-sizing: content-box;
	padding: 5px;
	border-radius: 9px;
	color: #34d399;
	background: rgba(52, 211, 153, .12);
}

.ep-list span { display: grid; gap: 2px; }
.ep-list strong { color: #fff; font-size: 15px; }
.ep-list small { color: #8f9cc0; font-size: 14px; line-height: 1.5; }

/* Okno przeglądarki */
.bw {
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 18px;
	background: #0e1530;
	box-shadow: 0 40px 90px rgba(3, 8, 30, .6), 0 0 120px rgba(37, 99, 235, .2);
}

.bw-bar {
	display: flex;
	gap: 7px;
	align-items: center;
	height: 38px;
	padding: 0 14px;
	background: linear-gradient(180deg, #1b2442, #141c36);
}

.bw-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ef4444; }
.bw-bar i:nth-child(2) { background: #f59e0b; }
.bw-bar i:nth-child(3) { background: #22c55e; }

.bw-bar span {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	margin-left: 14px;
	padding: 4px 14px;
	border-radius: 8px;
	color: #a5b4d8;
	background: rgba(255, 255, 255, .06);
	font-size: 12px;
	font-weight: 600;
}

.bw-screen {
	position: relative;
	aspect-ratio: 1440 / 820;
	overflow: hidden;
	container-type: inline-size;
}

.ep-app {
	--u: calc(100cqw / 1440);
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: calc(280 * var(--u)) 1fr;
	color: #0f172a;
	background: #f5f7fb;
	font-family: "Inter Local", Inter, system-ui, sans-serif;
	line-height: 1.25;
	text-align: left;
}

.ep-app svg { flex: 0 0 auto; }

.ep-side {
	display: flex;
	flex-direction: column;
	gap: calc(6 * var(--u));
	padding: calc(26 * var(--u)) calc(20 * var(--u));
	background: linear-gradient(180deg, #0c1d45, #0a1430 70%);
}

.ep-side img { width: calc(190 * var(--u)); height: auto; margin: 0 0 calc(30 * var(--u)) calc(6 * var(--u)); }

.ep-side small {
	margin: calc(10 * var(--u)) 0 calc(4 * var(--u)) calc(6 * var(--u));
	color: #8aa0c8;
	font-size: calc(11 * var(--u));
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ep-side span {
	display: flex;
	gap: calc(14 * var(--u));
	align-items: center;
	height: calc(46 * var(--u));
	padding: 0 calc(14 * var(--u));
	border-radius: calc(8 * var(--u));
	color: #dbe4ff;
	font-size: calc(15 * var(--u));
}

.ep-side span svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); }
.ep-side span.is-active { color: #fff; background: linear-gradient(90deg, #2563eb, #1d4ed8); box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(37, 99, 235, .35); }

.ep-main {
	padding: calc(112 * var(--u)) calc(32 * var(--u)) 0;
	background: linear-gradient(#fff, #fff) top / 100% calc(80 * var(--u)) no-repeat, #f5f7fb;
	box-shadow: inset 0 calc(80 * var(--u)) 0 -1px #fff, inset 0 calc(81 * var(--u)) 0 -1px #e5eaf2;
}

.ep-profile {
	position: relative;
	display: flex;
	gap: calc(18 * var(--u));
	align-items: center;
	height: calc(153 * var(--u));
	padding: 0 calc(30 * var(--u));
	overflow: hidden;
	border-radius: calc(16 * var(--u));
	color: #fff;
	background: linear-gradient(100deg, #12286a 0%, #1d4ed8 55%, #0ea5e9 130%);
	box-shadow: 0 calc(16 * var(--u)) calc(34 * var(--u)) rgba(29, 78, 216, .25);
}

.ep-profile::after {
	content: "";
	position: absolute;
	right: calc(-80 * var(--u));
	bottom: calc(-200 * var(--u));
	width: calc(320 * var(--u));
	height: calc(320 * var(--u));
	border: calc(1 * var(--u)) solid rgba(255, 255, 255, .25);
	border-radius: 50%;
}

.ep-profile-icon {
	display: grid;
	place-items: center;
	width: calc(54 * var(--u));
	height: calc(54 * var(--u));
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: calc(13 * var(--u));
	background: rgba(255, 255, 255, .12);
}

.ep-profile-icon svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.ep-profile p { display: grid; flex: 1; gap: calc(4 * var(--u)); margin: 0; }
.ep-profile p small { color: #c7d7ff; font-size: calc(12 * var(--u)); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ep-profile p strong { font-size: calc(38 * var(--u)); font-weight: 900; letter-spacing: -.01em; }
.ep-profile p span { color: #dbe7ff; font-size: calc(15 * var(--u)); }

.ep-profile em,
.ep-hero em {
	display: inline-flex;
	gap: calc(7 * var(--u));
	align-items: center;
	height: calc(36 * var(--u));
	padding: 0 calc(14 * var(--u));
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 999px;
	color: #fff;
	background: rgba(8, 20, 60, .35);
	font-size: calc(12 * var(--u));
	font-style: normal;
	font-weight: 800;
}

.ep-profile em svg,
.ep-hero em svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }

.ep-hero,
.ep-grid { width: calc(798 * var(--u)); margin: calc(22 * var(--u)) auto 0; }

.ep-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: calc(175 * var(--u));
	padding: 0 calc(30 * var(--u));
	overflow: hidden;
	border-radius: calc(18 * var(--u));
	color: #fff;
	background: linear-gradient(110deg, #0b1b43 0%, #142f7a 55%, #2563eb 100%);
}

.ep-hero::after {
	content: "";
	position: absolute;
	top: calc(-60 * var(--u));
	right: calc(-90 * var(--u));
	width: calc(330 * var(--u));
	height: calc(330 * var(--u));
	border: calc(40 * var(--u)) solid rgba(255, 255, 255, .06);
	border-radius: 50%;
}

.ep-hero p { position: relative; z-index: 1; display: grid; gap: calc(10 * var(--u)); margin: 0; }
.ep-hero small { color: #c7d7ff; font-size: calc(12 * var(--u)); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ep-hero strong { font-size: calc(40 * var(--u)); font-weight: 900; letter-spacing: -.03em; }
.ep-hero span { color: #e2e8ff; font-size: calc(12.5 * var(--u)); }
.ep-hero em { position: relative; z-index: 1; }

.ep-grid {
	display: grid;
	grid-template-columns: calc(459 * var(--u)) 1fr;
	gap: calc(20 * var(--u));
	align-items: start;
}

.ep-card {
	padding: calc(26 * var(--u));
	border: 1px solid #e3e9f2;
	border-radius: calc(18 * var(--u));
	background: #fff;
	box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(21, 45, 93, .06);
}

.ep-status { display: flex; gap: calc(14 * var(--u)); align-items: flex-start; }

.ep-status-icon {
	display: grid;
	place-items: center;
	width: calc(54 * var(--u));
	height: calc(54 * var(--u));
	border: 1px solid #a7f3d0;
	border-radius: calc(12 * var(--u));
	color: #059669;
	background: #ecfdf5;
}

.ep-status-icon svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.ep-status p { display: grid; gap: calc(4 * var(--u)); margin: 0; padding-top: calc(2 * var(--u)); }
.ep-status p small { color: #64748b; font-size: calc(10 * var(--u)); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ep-status p strong { font-size: calc(19 * var(--u)); font-weight: 900; }
.ep-status p span { color: #64748b; font-size: calc(11 * var(--u)); }

.ep-status .ep-clock { margin-left: auto; justify-items: end; text-align: right; }
.ep-status .ep-clock strong { font-size: calc(39 * var(--u)); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ep-status .ep-clock span { font-size: calc(10 * var(--u)); }

.ep-running {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: calc(26 * var(--u));
	padding: calc(14 * var(--u)) calc(18 * var(--u));
	border: 1px solid #c7dbf7;
	border-radius: calc(12 * var(--u));
	background: #eef5ff;
}

.ep-running p { display: grid; gap: calc(6 * var(--u)); margin: 0; }
.ep-running small { display: inline-flex; gap: calc(6 * var(--u)); align-items: center; color: #1e3a8a; font-size: calc(10.5 * var(--u)); font-weight: 800; }
.ep-running small svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.ep-running span { color: #64748b; font-size: calc(10 * var(--u)); }
.ep-running strong { color: #1e3a8a; font-size: calc(22 * var(--u)); font-weight: 900; font-variant-numeric: tabular-nums; }

.ep-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(12 * var(--u));
	margin-top: calc(24 * var(--u));
}

.ep-actions span {
	display: flex;
	gap: calc(12 * var(--u));
	align-items: center;
	height: calc(62 * var(--u));
	padding: 0 calc(18 * var(--u));
	border-radius: calc(12 * var(--u));
	color: #fff;
}

.ep-actions span svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.ep-actions b { display: grid; gap: calc(3 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 900; white-space: nowrap; }
.ep-actions b small { color: rgba(255, 255, 255, .85); font-size: calc(9 * var(--u)); font-weight: 600; }
.ep-actions .is-break { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(217, 119, 6, .28); }
.ep-actions .is-end { background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(220, 38, 38, .25); }

.ep-history { padding: 0; }

.ep-history-head {
	display: flex;
	gap: calc(12 * var(--u));
	align-items: center;
	padding: calc(20 * var(--u));
	border-bottom: 1px solid #edf1f7;
}

.ep-history-head > span,
.ep-history-row > span {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: calc(40 * var(--u));
	height: calc(40 * var(--u));
	border-radius: calc(10 * var(--u));
	color: #2563eb;
	background: #eef3fb;
}

.ep-history-head svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.ep-history-head p,
.ep-history-row p { display: grid; gap: calc(3 * var(--u)); margin: 0; }
.ep-history-head strong { font-size: calc(14 * var(--u)); font-weight: 900; }
.ep-history-head small { color: #64748b; font-size: calc(9 * var(--u)); }

.ep-history-row {
	display: flex;
	gap: calc(12 * var(--u));
	align-items: center;
	padding: calc(16 * var(--u)) calc(20 * var(--u));
}

.ep-history-row + .ep-history-row { border-top: 1px solid #f1f5f9; }
.ep-history-row > span { width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; }
.ep-history-row svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.ep-history-row strong { font-size: calc(11 * var(--u)); }
.ep-history-row small { color: #64748b; font-size: calc(9 * var(--u)); }
.ep-history-row b { margin-left: auto; font-size: calc(10 * var(--u)); font-variant-numeric: tabular-nums; }
.ep-history-row.is-muted { opacity: .6; }

.ep-toast {
	position: absolute;
	top: calc(22 * var(--u));
	right: calc(22 * var(--u));
	display: flex;
	gap: calc(14 * var(--u));
	align-items: center;
	width: calc(390 * var(--u));
	padding: calc(16 * var(--u));
	border: 1px solid #e3e9f2;
	border-radius: calc(12 * var(--u));
	background: #fff;
	box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(15, 23, 42, .14), inset 0 calc(-3 * var(--u)) 0 #22c55e;
	animation: ep-toast 7s ease-in-out infinite;
}

.ep-toast > span {
	display: grid;
	place-items: center;
	width: calc(38 * var(--u));
	height: calc(38 * var(--u));
	border-radius: calc(10 * var(--u));
	color: #16a34a;
	background: #dcfce7;
}

.ep-toast svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.ep-toast p { display: grid; gap: calc(3 * var(--u)); margin: 0; }
.ep-toast strong { font-size: calc(13 * var(--u)); }
.ep-toast small { color: #64748b; font-size: calc(10 * var(--u)); }

@keyframes ep-toast {
	0%, 6% { opacity: 0; transform: translateY(calc(-14 * var(--u))); }
	12%, 70% { opacity: 1; transform: none; }
	78%, 100% { opacity: 0; transform: translateY(calc(-8 * var(--u))); }
}

/* Ciemniejszy pasek branż pod ciemnymi sekcjami u góry strony */
body:has(.hx) .audience-strip {
	border-color: rgba(148, 163, 255, .12);
	background: #0a1233;
}

body:has(.hx) .audience-strip p { color: #8f9cc0; }
body:has(.hx) .audience-strip .industry-list span { color: #e2e8ff; }
body:has(.hx) .audience-strip .industry-list i { background: rgba(148, 163, 255, .35); }

@media (max-width: 1100px) {
	.ep-shell { grid-template-columns: 1fr; }
	.ep-copy { max-width: 720px; }
}

@media (max-width: 620px) {
	.bw { border-radius: 12px; }
	.bw-bar { height: 28px; }
	.bw-bar span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ep-toast { animation: none; }
}

/* Jasne sekcje strony głównej z delikatnym tłem na całą szerokość, żeby środek strony nie był płasko biały. */
body:has(.hx) .intro-section,
body:has(.hx) .workflow-section {
	background: #eef2fb;
	box-shadow: 0 0 0 100vmax #eef2fb;
	clip-path: inset(0 -100vmax);
}

body:has(.hx) .intro-section .bento-card,
body:has(.hx) .workflow-section .workflow-grid article {
	border-color: #dbe3f2;
	box-shadow: 0 18px 44px rgba(21, 45, 93, .08);
}

/* =====================================================================
   Kiosk RCP – ekrany „Konfiguracja”, „Zespół” i warianty pionowe
   ===================================================================== */
.ks-setup {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding: calc(4.5 * var(--k)) calc(2 * var(--k)) calc(2 * var(--k));
	text-align: left;
}

.ks-chip {
	display: inline-flex;
	gap: calc(.6 * var(--k));
	align-items: center;
	padding: calc(.6 * var(--k)) calc(1 * var(--k));
	border-radius: calc(.7 * var(--k));
	color: #1d4ed8;
	background: #eef3fb;
	font-size: calc(1.05 * var(--k));
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ks-chip svg { width: calc(1.3 * var(--k)); height: calc(1.3 * var(--k)); }

.ks-setup-title { margin-top: calc(2 * var(--k)); font-size: calc(3.15 * var(--k)); font-weight: 900; letter-spacing: -.01em; }
.ks-setup-lead { margin: calc(1.2 * var(--k)) 0 calc(2.2 * var(--k)); color: #64748b; font-size: calc(1.45 * var(--k)); font-weight: 600; line-height: 1.5; }

.ks-setup-card {
	display: flex;
	flex-direction: column;
	gap: calc(.5 * var(--k));
	width: 100%;
	padding: calc(2.1 * var(--k));
	border: 1px solid #e6ecf4;
	border-radius: calc(1.7 * var(--k));
	background: #fff;
	box-shadow: 0 calc(1 * var(--k)) calc(3 * var(--k)) rgba(15, 23, 42, .07);
}

.ks-setup-card .ks-keypad-head { margin-bottom: calc(1.2 * var(--k)); }
.ks-setup-card label { margin-top: calc(.9 * var(--k)); font-size: calc(1.42 * var(--k)); font-weight: 900; }

.ks-input {
	display: flex;
	align-items: center;
	height: calc(5.3 * var(--k));
	padding: 0 calc(1.6 * var(--k));
	border: 1px solid #dfe8f5;
	border-radius: calc(1.1 * var(--k));
	background: #f5f8fd;
	font-size: calc(1.75 * var(--k));
	font-weight: 600;
}

.ks-input.is-secret { letter-spacing: .2em; }
.ks-hint { color: #64748b; font-size: calc(1.15 * var(--k)); line-height: 1.4; }
.ks-setup-card .ks-primary { height: calc(5.6 * var(--k)); margin-top: calc(1.6 * var(--k)); font-size: calc(1.6 * var(--k)); }

.ks-safe {
	display: flex;
	gap: calc(1 * var(--k));
	align-items: center;
	margin-top: calc(1.2 * var(--k));
	padding: calc(1.2 * var(--k)) calc(1.5 * var(--k));
	border-radius: calc(1.1 * var(--k));
	color: #047857;
	background: #ecfdf5;
	font-size: calc(1.25 * var(--k));
	font-weight: 800;
	line-height: 1.35;
}

.ks-safe svg { width: calc(1.6 * var(--k)); height: calc(1.6 * var(--k)); }

/* Ekran „Zespół” menedżera */
.ks-team {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: calc(.75 * var(--k));
	padding: calc(.9 * var(--k)) calc(.9 * var(--k)) 0;
	overflow: hidden;
	text-align: left;
}

.ks-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(.5 * var(--k));
	padding: calc(.4 * var(--k));
	border: 1px solid #e6ecf4;
	border-radius: calc(1.3 * var(--k));
	background: #fff;
}

.ks-tabs span {
	display: flex;
	gap: calc(.6 * var(--k));
	align-items: center;
	justify-content: center;
	height: calc(4.5 * var(--k));
	border-radius: calc(1 * var(--k));
	color: #1d4ed8;
	font-size: calc(1.42 * var(--k));
	font-weight: 800;
}

.ks-tabs span.is-active { color: #fff; background: #2563eb; }
.ks-tabs svg { width: calc(1.6 * var(--k)); height: calc(1.6 * var(--k)); }

.ks-team-card {
	padding: calc(1.6 * var(--k)) calc(1.4 * var(--k)) calc(1.4 * var(--k));
	border: 1px solid #e6ecf4;
	border-radius: calc(1.5 * var(--k));
	background: #fff;
}

.ks-team-head { display: flex; align-items: flex-start; justify-content: space-between; }
.ks-team-head p { display: grid; gap: calc(.3 * var(--k)); margin: 0; }
.ks-team-head small { color: #1d4ed8; font-size: calc(.95 * var(--k)); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.ks-team-head b { font-size: calc(2.7 * var(--k)); font-weight: 900; }

.ks-team-head > span {
	display: inline-flex;
	gap: calc(.5 * var(--k));
	align-items: center;
	padding: calc(.8 * var(--k)) calc(1.2 * var(--k));
	border-radius: calc(1 * var(--k));
	color: #1d4ed8;
	background: #eef3fb;
	font-size: calc(1.35 * var(--k));
	font-weight: 800;
}

.ks-team-head svg { width: calc(1.5 * var(--k)); height: calc(1.5 * var(--k)); }
.ks-team-lead { margin: calc(.8 * var(--k)) 0 calc(1.2 * var(--k)); color: #64748b; font-size: calc(1.35 * var(--k)); font-weight: 600; line-height: 1.45; }

.ks-team-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: calc(1.1 * var(--k)) calc(1.3 * var(--k));
	border-radius: calc(1.1 * var(--k));
	background: #f3f7fd;
}

.ks-team-stats span { display: grid; color: #64748b; font-size: calc(1.1 * var(--k)); font-weight: 700; }
.ks-team-stats span + span { padding-left: calc(1.3 * var(--k)); border-left: 1px solid #dbe3ef; }
.ks-team-stats b { color: #0f172a; font-size: calc(2 * var(--k)); font-weight: 900; }

.ks-search {
	display: flex;
	gap: calc(1 * var(--k));
	align-items: center;
	height: calc(5.2 * var(--k));
	margin-top: calc(1.2 * var(--k));
	padding: 0 calc(1.4 * var(--k));
	border: 1px solid #dfe8f5;
	border-radius: calc(1.1 * var(--k));
	color: #94a3b8;
	font-size: calc(1.5 * var(--k));
}

.ks-search svg { width: calc(1.8 * var(--k)); height: calc(1.8 * var(--k)); color: #64748b; }

.ks-person-row {
	display: flex;
	gap: calc(1 * var(--k));
	align-items: center;
	justify-content: space-between;
	padding: calc(.9 * var(--k)) calc(1.3 * var(--k));
	border: 1px solid #e6ecf4;
	border-radius: calc(1.3 * var(--k));
	background: #fff;
}

.ks-person-row.is-selected { border-color: #2563eb; background: #f1f6fe; }
.ks-person-row p { display: grid; gap: calc(.3 * var(--k)); margin: 0; }
.ks-person-row b { font-size: calc(1.66 * var(--k)); font-weight: 900; }
.ks-person-row small { color: #64748b; font-size: calc(1.34 * var(--k)); }
.ks-person-row p span { display: flex; gap: calc(.6 * var(--k)); }

.ks-person-row i {
	padding: calc(.4 * var(--k)) calc(.9 * var(--k));
	border-radius: calc(.7 * var(--k));
	color: #1d4ed8;
	background: #eef3fb;
	font-size: calc(1.15 * var(--k));
	font-style: normal;
	font-weight: 900;
}

.ks-person-row em {
	display: inline-flex;
	flex: 0 0 auto;
	gap: calc(.6 * var(--k));
	align-items: center;
	padding: calc(.9 * var(--k)) calc(1.1 * var(--k));
	border-radius: calc(1 * var(--k));
	color: #1d4ed8;
	background: #eef3fb;
	font-size: calc(1.34 * var(--k));
	font-style: normal;
	font-weight: 800;
}

.ks-person-row em.is-missing { color: #92400e; background: #fef3c7; }
.ks-person-row em svg { width: calc(1.5 * var(--k)); height: calc(1.5 * var(--k)); }

/* Klawiatura w pionie: wszystkie elementy w jednej kolumnie */
.ks-portrait .ks-card-keypad {
	display: flex;
	flex-direction: column;
	gap: calc(1 * var(--k));
	align-items: stretch;
	width: 92cqw;
	padding: calc(2 * var(--k));
}

.ks-portrait .ks-keypad-side,
.ks-portrait .ks-keypad-main { display: contents; }
.ks-portrait .ks-card-keypad .ks-keypad-time { order: 1; margin: 0; }
.ks-portrait .ks-card-keypad .ks-keypad-head { order: 2; }
.ks-portrait .ks-card-keypad .ks-field { order: 3; }
.ks-portrait .ks-card-keypad .ks-keys { order: 4; }
.ks-portrait .ks-card-keypad .ks-primary { order: 5; }
.ks-portrait .ks-card-keypad .ks-keypad-alt { order: 6; grid-template-columns: 1fr 1fr; }
.ks-portrait .ks-keypad-time .ks-time { font-size: calc(3.5 * var(--k)); }
.ks-portrait .ks-card-confirm { width: 92cqw; }

/* =====================================================================
   Podstrony – wspólne pasma sekcji (aplikacja mobilna)
   ===================================================================== */
.ap-band {
	position: relative;
	overflow: hidden;
	padding: clamp(80px, 9vw, 130px) 0;
}

.ap-shell {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: clamp(40px, 5vw, 80px);
	align-items: center;
	width: min(100% - 48px, 1320px);
	margin: 0 auto;
}

.ap-shell.is-reversed { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.ap-copy h2 {
	margin: 20px 0 20px;
	color: #071633;
	font-size: clamp(38px, 4vw, 62px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.05em;
}

.ap-copy h2 span {
	background: linear-gradient(95deg, #2563eb 10%, #7c3aed 90%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ap-copy > p { max-width: 580px; margin: 0; color: #5d6b85; font-size: 18px; line-height: 1.7; }

.ap-orientation { background: #eef2fb; }

.ap-manager,
.ap-dark {
	color: #fff;
	background:
		radial-gradient(circle at 15% 30%, rgba(37, 99, 235, .25), transparent 40%),
		radial-gradient(circle at 90% 90%, rgba(124, 58, 237, .2), transparent 40%),
		#070c22;
}

.ap-manager .ap-copy h2,
.ap-dark .ap-copy h2 { color: #fff; }

.ap-manager .ap-copy h2 span,
.ap-dark .ap-copy h2 span { background-image: linear-gradient(95deg, #60a5fa 10%, #a78bfa 90%); }

.ap-manager .ap-copy > p,
.ap-dark .ap-copy > p { color: #aab6d6; }

.ap-setup {
	background:
		radial-gradient(circle at 85% 40%, rgba(37, 99, 235, .1), transparent 40%),
		#fff;
}

.ap-points {
	display: grid;
	gap: 14px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.ap-points li {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 14px 16px;
	border: 1px solid #dbe3f2;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 12px 30px rgba(21, 45, 93, .06);
}

.ap-points li > span {
	display: grid;
	flex: 0 0 44px;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	color: #fff;
	background: linear-gradient(135deg, #3b82f6, #7c3aed);
	box-shadow: 0 10px 20px rgba(79, 70, 229, .25);
}

.ap-points p { display: grid; gap: 2px; margin: 0; line-height: 1.35; }
.ap-points strong { color: #071633; font-size: 16px; }
.ap-points small { color: #64748b; font-size: 14px; }

.ap-points.is-dark li { border-color: rgba(148, 163, 255, .16); background: rgba(255, 255, 255, .04); box-shadow: none; }
.ap-points.is-dark strong { color: #fff; }
.ap-points.is-dark small { color: #8f9cc0; }

/* Tablet i telefon obok siebie */
.ap-devices {
	position: relative;
	padding: 0 10% 12% 0;
}

.ap-devices .dv-phone {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 27%;
	box-shadow: 0 30px 60px rgba(10, 25, 60, .35);
}

.ap-orientation .dv-tablet { box-shadow: 0 40px 80px rgba(10, 25, 60, .28); }

/* Telefon z ekranem w centrum sceny */
.ap-phone-stage {
	position: relative;
	display: grid;
	place-items: center;
	padding: 20px 0;
	isolation: isolate;
}

.ap-phone-stage::before {
	content: "";
	position: absolute;
	z-index: -1;
	width: 520px;
	max-width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(79, 70, 229, .35), transparent 65%);
	filter: blur(10px);
}

.ap-setup .ap-phone-stage::before { background: radial-gradient(circle, rgba(37, 99, 235, .22), transparent 65%); }

.ap-phone-stage .dv-phone { width: min(340px, 78%); }

.ap-float {
	position: absolute;
	right: 4%;
	bottom: 14%;
	display: flex;
	gap: 11px;
	align-items: center;
	padding: 12px 16px 12px 12px;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 18px;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 22px 44px rgba(3, 8, 30, .3);
	backdrop-filter: blur(12px);
	animation: ec-float 6s ease-in-out infinite;
}

.ap-float span {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	color: #fff;
	background: linear-gradient(135deg, #3b82f6, #7c3aed);
}

.ap-float.is-green span { background: linear-gradient(135deg, #22c55e, #059669); }
.ap-float p { display: grid; margin: 0; line-height: 1.25; }
.ap-float strong { color: #071633; font-size: 14px; }
.ap-float small { color: #64748b; font-size: 12px; }

@keyframes ec-float { 50% { transform: translateY(-10px); } }

/* Kroki uruchomienia */
.ap-steps { display: grid; gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }

.ap-steps li {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 16px 18px;
	border: 1px solid #e3eaf5;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 10px 26px rgba(21, 45, 93, .06);
}

.ap-steps b {
	display: grid;
	flex: 0 0 44px;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	color: #2563eb;
	background: #eef3fb;
	font-size: 15px;
	font-weight: 900;
}

.ap-steps p { display: grid; gap: 2px; margin: 0; line-height: 1.35; }
.ap-steps strong { color: #071633; font-size: 16px; }
.ap-steps small { color: #64748b; font-size: 14px; }

.ap-actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 30px; }

.ap-link {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	color: #2563eb;
	font-size: 15px;
	font-weight: 800;
}

.ap-link:hover { color: #1d4ed8; }

/* Konto pracownika */
.ap-account {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 24px;
	align-items: center;
	margin-top: clamp(60px, 7vw, 100px);
	margin-bottom: clamp(60px, 7vw, 100px);
	padding: clamp(24px, 3vw, 40px);
	border: 1px solid #d6e2f6;
	border-radius: 26px;
	background: radial-gradient(circle at 100% 0, rgba(124, 58, 237, .12), transparent 40%), linear-gradient(145deg, #f5f8ff, #fff);
}

.ap-account-icon {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 18px;
	color: #fff;
	background: linear-gradient(135deg, #3b82f6, #7c3aed);
	box-shadow: 0 14px 28px rgba(79, 70, 229, .3);
}

.ap-account h2 { margin: 0 0 8px; color: #071633; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.03em; }
.ap-account p { max-width: 760px; margin: 0; color: #5d6b85; font-size: 16px; line-height: 1.6; }

@media (max-width: 1100px) {
	.ap-shell, .ap-shell.is-reversed { grid-template-columns: 1fr; }
	.ap-shell.is-reversed .ap-phone-stage { order: 2; }
	.ap-copy { max-width: 720px; }
}

@media (max-width: 620px) {
	.ap-account { grid-template-columns: 1fr; }
	.ap-float { right: 0; bottom: 4%; transform: scale(.9); }
}

@media (prefers-reduced-motion: reduce) {
	.ap-float { animation: none; }
}

/* =====================================================================
   Cennik
   ===================================================================== */
.mobile-app-page .hx h1,
.pricing-page .hx h1,
.rcp-page .hx h1 { font-size: clamp(44px, 5vw, 76px); }

.pr-price {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	align-items: baseline;
	margin-top: 30px;
	padding: 18px 22px;
	border: 1px solid rgba(148, 163, 255, .22);
	border-radius: 20px;
	background: rgba(255, 255, 255, .04);
	backdrop-filter: blur(10px);
	width: fit-content;
}

.pr-price strong {
	background: linear-gradient(95deg, #fff 30%, #c7d2fe);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: clamp(48px, 5vw, 68px);
	font-weight: 900;
	letter-spacing: -.05em;
	line-height: 1;
}

.pr-price strong small { font-size: .45em; letter-spacing: 0; }
.pr-price > span { color: #aab6d6; font-size: 15px; font-weight: 600; }

.pr-hero .hx-actions { margin-top: 26px; }

/* Kalkulator jako biała karta na ciemnym tle */
.pricing-page .pr-calc {
	position: relative;
	padding: clamp(26px, 3vw, 40px);
	border: 0;
	border-radius: 30px;
	color: #071633;
	background: #fff;
	box-shadow: 0 40px 90px rgba(3, 8, 30, .55), 0 0 0 1px rgba(255, 255, 255, .6), 0 0 120px rgba(79, 70, 229, .3);
}

.pricing-page .pr-calc::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 5px;
	border-radius: 30px 30px 0 0;
	background: linear-gradient(90deg, #3b82f6, #7c3aed);
}

.pr-calc .calculator-heading > span {
	display: grid;
	place-items: center;
	padding: 12px;
	border: 0;
	color: #fff;
	background: linear-gradient(135deg, #3b82f6, #7c3aed);
	box-shadow: 0 10px 22px rgba(79, 70, 229, .3);
}

.pr-calc .calculator-heading small { color: #4f46e5; text-transform: uppercase; }
.pr-calc .calculator-heading h2 { color: #071633; }
.pr-calc .seat-input { border-color: #c7d6ee; background: #f6f9fe; }
.pr-calc .seat-presets button { border-radius: 11px; font-weight: 800; }
.pr-calc .seat-presets button[aria-pressed="true"] { border-color: transparent; color: #fff; background: linear-gradient(135deg, #3b82f6, #4f46e5); }

.pr-calc .calculator-total strong {
	background: linear-gradient(95deg, #2563eb, #7c3aed);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-weight: 900;
}

.pr-calc .trial-mini { border: 0; background: linear-gradient(135deg, #ecfdf5, #f0fdf9); }

/* Wszystko w cenie */
.pr-shell { width: min(100% - 48px, 1240px); margin: 0 auto; }

.pr-included {
	padding: clamp(80px, 9vw, 130px) 0;
	background: #eef2fb;
}

.pr-heading { max-width: 760px; }
.pr-heading.is-centered { max-width: 820px; margin: 0 auto; text-align: center; }

.pr-heading h2 {
	margin: 20px 0 16px;
	color: #071633;
	font-size: clamp(36px, 4vw, 60px);
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: -.05em;
}

.pr-heading h2 span {
	background: linear-gradient(95deg, #2563eb 10%, #7c3aed 90%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.pr-heading > p { margin: 0; color: #5d6b85; font-size: 18px; line-height: 1.7; }

.pr-features {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-top: 46px;
}

.pr-features article {
	padding: 24px;
	border: 1px solid #dbe3f2;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 16px 40px rgba(21, 45, 93, .07);
	transition: transform .25s ease, box-shadow .25s ease;
}

.pr-features article:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(21, 45, 93, .12); }

.pr-features article > span {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	color: #fff;
	background: linear-gradient(135deg, #3b82f6, #7c3aed);
	box-shadow: 0 10px 22px rgba(79, 70, 229, .25);
}

.pr-features h3 { margin: 18px 0 6px; color: #071633; font-size: 18px; letter-spacing: -.02em; }
.pr-features p { margin: 0; color: #64748b; font-size: 14.5px; line-height: 1.55; }

.pr-note {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 26px 0 0;
	color: #64748b;
	font-size: 13px;
	line-height: 1.6;
}

.pr-note svg { flex: 0 0 auto; margin-top: 2px; color: #2563eb; }

/* Kroki: ciemne pasmo z osią czasu */
.pr-steps {
	padding: clamp(80px, 9vw, 130px) 0;
	color: #fff;
	background:
		radial-gradient(circle at 20% 20%, rgba(37, 99, 235, .25), transparent 40%),
		radial-gradient(circle at 85% 90%, rgba(124, 58, 237, .22), transparent 40%),
		#070c22;
}

.pr-steps .pr-heading h2 { color: #fff; }
.pr-steps .pr-heading h2 span { background-image: linear-gradient(95deg, #60a5fa 10%, #a78bfa 90%); }

.pr-timeline {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 50px 0 0;
	padding: 0;
	list-style: none;
}

.pr-timeline::before {
	content: "";
	position: absolute;
	top: 49px;
	right: 16%;
	left: 16%;
	height: 2px;
	background: linear-gradient(90deg, rgba(96, 165, 250, .1), rgba(167, 139, 250, .6), rgba(96, 165, 250, .1));
}

.pr-timeline li {
	position: relative;
	padding: 28px;
	border: 1px solid rgba(148, 163, 255, .16);
	border-radius: 24px;
	background: rgba(255, 255, 255, .04);
	backdrop-filter: blur(10px);
	text-align: center;
}

.pr-timeline b {
	position: absolute;
	top: 18px;
	right: 22px;
	color: rgba(167, 139, 250, .5);
	font-size: 14px;
	font-weight: 900;
}

.pr-timeline li > span {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0 auto;
	border-radius: 14px;
	color: #fff;
	background: linear-gradient(135deg, #3b82f6, #7c3aed);
	box-shadow: 0 0 0 8px #0b1230, 0 12px 26px rgba(79, 70, 229, .45);
}

.pr-timeline h3 { margin: 22px 0 8px; color: #fff; font-size: 19px; }
.pr-timeline p { margin: 0; color: #8f9cc0; font-size: 15px; line-height: 1.6; }

.pricing-page .faq-section { padding-top: clamp(80px, 9vw, 120px); }

@media (max-width: 1100px) {
	.pr-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pr-timeline { grid-template-columns: 1fr; }
	.pr-timeline::before { display: none; }
}

@media (max-width: 620px) {
	.pr-features { grid-template-columns: 1fr; }
	.pr-price { width: 100%; }
}

/* Ekran RCP – komputer, tablet i telefon w jednej scenie */
.rc-stage { position: relative; padding: 0 4% 22% 12%; }
.rc-stage .bw { transform: perspective(1800px) rotateY(-7deg); }
.rc-tablet { position: absolute; bottom: 0; left: 0; width: 40%; }
.rc-phone { position: absolute; right: 0; bottom: 4%; width: 19%; }
.rc-desktop .bw { box-shadow: 0 40px 90px rgba(3, 8, 30, .6), 0 0 120px rgba(79, 70, 229, .25); }
@media (max-width: 620px) { .rc-stage { padding: 0 0 20%; } .rc-stage .bw { transform: none; } .rc-tablet { width: 58%; } .rc-phone { width: 24%; } }

/* Krótki dowód użycia systemu w codziennej pracy lokali. */
.story-proof {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	margin-top: 22px;
	padding: 15px 17px;
	border: 1px solid rgba(37, 99, 235, .16);
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(239, 246, 255, .9), rgba(245, 243, 255, .78));
}

.story-proof > span {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	color: #fff;
	background: linear-gradient(135deg, #2563eb, #6366f1);
	box-shadow: 0 9px 20px rgba(37, 99, 235, .2);
}

.story-proof p {
	margin: 0;
	color: #42526d;
	font-size: 14px;
	font-weight: 650;
	line-height: 1.55;
}

/* =====================================================================
   Menu mobilne – pełnoekranowy, ciemny panel
   ===================================================================== */
/* Zwiększona specyficzność: motyw ustawia display dla wszystkich linków w .main-navigation. */
.main-navigation .mobile-menu-promo,
.main-navigation .mobile-menu-contact { display: none; }

@media (max-width: 1024px) {
	/* Nagłówek nad otwartym menu przechodzi w ciemny wariant. */
	body.menu-open .site-header {
		border-color: transparent;
		background: #070c22 !important;
		box-shadow: none;
	}

	body.menu-open::before { display: none; }

	body.menu-open .site-header .brand-logo { opacity: 0; }

	body.menu-open .site-header .brand-logo-light {
		position: absolute;
		top: 50%;
		left: 0;
		display: block;
		width: auto;
		height: 100%;
		max-height: 40px;
		transform: translateY(-50%);
		pointer-events: none;
	}

	body.menu-open .menu-toggle[aria-expanded="true"] {
		border-color: rgba(255, 255, 255, .2);
		color: #fff;
		background: rgba(255, 255, 255, .1);
		box-shadow: none;
		transform: none;
	}

	.site-header .main-navigation {
		z-index: -1;
		top: 0;
		right: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		gap: 0;
		width: 100vw;
		height: 100dvh;
		max-height: none;
		padding: 96px max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
		overflow-y: auto;
		border: 0;
		border-radius: 0;
		background:
			radial-gradient(circle at 100% 0, rgba(79, 70, 229, .45), transparent 45%),
			radial-gradient(circle at 0% 100%, rgba(37, 99, 235, .35), transparent 45%),
			#070c22;
		box-shadow: none;
		transform: translateY(-16px);
		transform-origin: top center;
		transition: opacity 260ms ease, transform 320ms cubic-bezier(.2, .8, .2, 1), visibility 260ms ease;
		backdrop-filter: none;
	}

	.site-header .main-navigation::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-image: linear-gradient(rgba(148, 163, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 255, .05) 1px, transparent 1px);
		background-size: 48px 48px;
		-webkit-mask-image: radial-gradient(ellipse at 50% 20%, #000 10%, transparent 70%);
		mask-image: radial-gradient(ellipse at 50% 20%, #000 10%, transparent 70%);
		pointer-events: none;
	}

	/* Elementy menu nie mogą ściskać karty kiosku przy niższym ekranie. */
	.site-header .mobile-menu-heading,
	.site-header .main-navigation > ul,
	.site-header .mobile-menu-promo,
	.site-header .mobile-menu-actions,
	.site-header .mobile-menu-contact {
		flex: 0 0 auto;
	}

	.site-header .main-navigation.is-open { transform: none; }

	.admin-bar .site-header .main-navigation { top: 0; padding-top: 140px; }

	.site-header .mobile-menu-heading {
		align-items: center;
		padding: 0 4px 10px;
	}

	.site-header .mobile-menu-heading span {
		color: #a5b4fc;
		font-size: 12px;
		font-weight: 900;
		letter-spacing: .16em;
		text-transform: uppercase;
	}

	.site-header .mobile-menu-heading small { color: #64739b; font-size: 12px; }

	/* Duże linki z numeracją */
	.site-header .main-navigation ul { gap: 0; counter-reset: godzinowo-nav; }

	.site-header .main-navigation li {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 360ms ease, transform 420ms cubic-bezier(.2, .8, .2, 1);
	}

	.site-header .main-navigation.is-open li { opacity: 1; transform: none; }
	.site-header .main-navigation.is-open li:nth-child(1) { transition-delay: 60ms; }
	.site-header .main-navigation.is-open li:nth-child(2) { transition-delay: 110ms; }
	.site-header .main-navigation.is-open li:nth-child(3) { transition-delay: 160ms; }
	.site-header .main-navigation.is-open li:nth-child(4) { transition-delay: 210ms; }
	.site-header .main-navigation.is-open li:nth-child(5) { transition-delay: 260ms; }
	.site-header .main-navigation.is-open li:nth-child(n+6) { transition-delay: 310ms; }

	.site-header .main-navigation li > a,
	.site-header .main-navigation li > a:hover,
	.site-header .main-navigation li > a:focus-visible,
	.site-header .main-navigation .current-menu-item > a,
	.site-header .main-navigation .current_page_item > a {
		gap: 16px;
		min-height: 68px;
		padding: 0 4px;
		border: 0;
		border-bottom: 1px solid rgba(148, 163, 255, .12);
		border-radius: 0;
		color: #fff;
		background: none;
		box-shadow: none;
		font-size: clamp(24px, 6.4vw, 32px);
		font-weight: 850;
		letter-spacing: -.035em;
		transform: none;
	}

	.site-header .main-navigation li > a::before {
		counter-increment: godzinowo-nav;
		content: counter(godzinowo-nav, decimal-leading-zero);
		min-width: 24px;
		color: #64739b;
		font-size: 12px;
		font-weight: 900;
		letter-spacing: .06em;
	}

	.site-header .main-navigation li > a::after,
	.site-header .main-navigation .current-menu-item > a::after,
	.site-header .main-navigation .current_page_item > a::after {
		position: static;
		width: 34px;
		height: 34px;
		margin-left: auto;
		border-radius: 50%;
		content: "";
		background: rgba(255, 255, 255, .06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5b4fc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat;
		box-shadow: none;
		transform: none;
		transition: background-color 200ms ease, transform 200ms ease;
	}

	.site-header .main-navigation li > a:hover::after,
	.site-header .main-navigation li > a:focus-visible::after {
		background-color: rgba(129, 140, 248, .3);
		transform: translateX(3px);
	}

	.site-header .main-navigation .current-menu-item > a,
	.site-header .main-navigation .current_page_item > a {
		background: linear-gradient(95deg, #60a5fa, #a78bfa);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	.site-header .main-navigation .current-menu-item > a::before,
	.site-header .main-navigation .current_page_item > a::before { color: #60a5fa; }

	.site-header .main-navigation .current-menu-item > a::after,
	.site-header .main-navigation .current_page_item > a::after { background-color: rgba(96, 165, 250, .25); }

	/* Karta z kioskiem i zachętą do testu */
	.site-header .mobile-menu-promo {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1fr) 128px;
		gap: 14px;
		align-items: center;
		margin-top: 22px;
		padding: 18px;
		overflow: hidden;
		border: 1px solid rgba(148, 163, 255, .28);
		border-radius: 22px;
		background: linear-gradient(135deg, rgba(59, 130, 246, .28), rgba(124, 58, 237, .26));
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 360ms ease 320ms, transform 420ms cubic-bezier(.2, .8, .2, 1) 320ms, border-color 200ms ease;
	}

	.site-header .main-navigation.is-open .mobile-menu-promo { opacity: 1; transform: none; }

	body.menu-open .site-header .main-navigation a.mobile-menu-promo:hover,
	body.menu-open .site-header .main-navigation a.mobile-menu-promo:focus-visible {
		border-color: rgba(167, 139, 250, .72);
		color: #fff;
		background: linear-gradient(135deg, rgba(59, 130, 246, .38), rgba(124, 58, 237, .38));
		box-shadow: 0 16px 34px rgba(3, 8, 30, .28), inset 0 0 0 1px rgba(255, 255, 255, .06);
		transform: translateY(-2px);
	}

	.mobile-menu-promo-copy { display: grid; gap: 4px; }

	.mobile-menu-promo-copy small {
		display: inline-flex;
		gap: 7px;
		align-items: center;
		color: #c7d2fe;
		font-size: 11px;
		font-weight: 900;
		letter-spacing: .1em;
		text-transform: uppercase;
	}

	.mobile-menu-promo-copy small i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .2); }
	.mobile-menu-promo-copy strong { color: #fff; font-size: 19px; line-height: 1.2; letter-spacing: -.02em; }
	.mobile-menu-promo-copy em { display: inline-flex; gap: 6px; align-items: center; color: #aab6d6; font-size: 12.5px; font-style: normal; font-weight: 600; }

	.mobile-menu-promo-device { display: block; transform: rotate(-4deg); }
	.mobile-menu-promo-device .dv-tablet { display: block; padding: 4px; border-radius: 12px; box-shadow: 0 16px 30px rgba(3, 8, 30, .5); }
	.mobile-menu-promo-device .dv-screen { display: block; border-radius: 8px; }

	/* Przyciski i kontakt na dole */
	.site-header .mobile-menu-actions {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		margin-top: auto;
		padding: 22px 0 0;
		border: 0;
	}

	.site-header .main-navigation .mobile-menu-actions .button { display: inline-flex; gap: 8px; justify-content: center; min-height: 56px; border-radius: 16px; font-size: 14px; }

	.site-header .main-navigation .mobile-menu-actions .button-ghost,
	.site-header .main-navigation .mobile-menu-actions .button-ghost:hover {
		border-color: rgba(148, 163, 255, .28);
		color: #fff;
		background: rgba(255, 255, 255, .06);
		box-shadow: none;
	}

	.site-header .main-navigation .mobile-menu-actions .button-primary,
	.site-header .main-navigation .mobile-menu-actions .button-primary:hover {
		background: linear-gradient(135deg, #3b82f6, #4f46e5 60%, #7c3aed);
		box-shadow: 0 14px 30px rgba(79, 70, 229, .45);
	}

	.site-header .mobile-menu-contact {
		display: inline-flex;
		gap: 8px;
		align-items: center;
		justify-content: center;
		margin-top: 16px;
		color: #8f9cc0;
		font-size: 13px;
		font-weight: 600;
	}

	.site-header .mobile-menu-contact:hover { color: #fff; }
}

/* Kompaktowy wariant mieści pełną kartę kiosku i przyciski na laptopach
   oraz telefonach z mniejszą wysokością obszaru przeglądarki. */
@media (max-width: 1024px) and (max-height: 950px) {
	.site-header .main-navigation {
		padding-top: 82px;
		padding-bottom: max(16px, env(safe-area-inset-bottom));
	}

	.admin-bar .site-header .main-navigation { padding-top: 118px; }

	.site-header .mobile-menu-heading { padding-bottom: 4px; }

	.site-header .main-navigation li > a,
	.site-header .main-navigation li > a:hover,
	.site-header .main-navigation li > a:focus-visible,
	.site-header .main-navigation .current-menu-item > a,
	.site-header .main-navigation .current_page_item > a {
		min-height: 56px;
		font-size: clamp(21px, 5.4vw, 27px);
	}

	.site-header .main-navigation li > a::after,
	.site-header .main-navigation .current-menu-item > a::after,
	.site-header .main-navigation .current_page_item > a::after {
		width: 32px;
		height: 32px;
	}

	.site-header .mobile-menu-promo {
		grid-template-columns: minmax(0, 1fr) 108px;
		gap: 10px;
		margin-top: 14px;
		padding: 13px 15px;
		border-radius: 18px;
	}

	.mobile-menu-promo-copy strong { font-size: 17px; }
	.mobile-menu-promo-copy em { font-size: 11.5px; }

	.site-header .mobile-menu-actions {
		margin-top: 12px;
		padding-top: 0;
	}

	.site-header .main-navigation .mobile-menu-actions .button { min-height: 52px; }
	.site-header .mobile-menu-contact { margin-top: 10px; }
}

@media (max-width: 1024px) and (min-height: 0) and (prefers-reduced-motion: reduce) {
	.site-header .main-navigation li,
	.site-header .mobile-menu-promo { transition: none; }
}

@media (max-width: 380px) {
	.site-header .mobile-menu-promo { grid-template-columns: 1fr; }
	.mobile-menu-promo-device { display: none; }
	.site-header .mobile-menu-actions { grid-template-columns: 1fr; }
}

/* Ekran RCP: pasek zalet między dwiema ciemnymi sekcjami – ciemne szkło i ciemne tło na całą szerokość zamiast białego pasa. */
.rcp-page .benefit-strip {
	margin-top: 0;
	border-color: rgba(148, 163, 255, .18);
	/* Pełne tło: cień maluje pas wokół karty, ale nie pod nią, więc półprzezroczyste tło pokazałoby białą stronę. */
	background: linear-gradient(135deg, #111a3d, #0d1433);
	box-shadow: 0 0 0 100vmax #070c22;
	clip-path: inset(-1px -100vmax);
}

.rcp-page .benefit-strip article { border-color: rgba(148, 163, 255, .14); }
.rcp-page .benefit-strip article > span { color: #a5b4fc; background: rgba(129, 140, 248, .14); }
.rcp-page .benefit-strip strong { color: #fff; }
.rcp-page .benefit-strip small { color: #8f9cc0; }
.rcp-page .hx { padding-bottom: clamp(50px, 6vw, 80px); }

/* =====================================================================
   Panel managera – wierna makieta (grafik, obecność, raporty).
   --u = 1 piksel aplikacji przy szerokości 1440 px.
   ===================================================================== */
.bw-screen.is-panel { aspect-ratio: 1440 / 900; }

.mg-app {
	--u: calc(100cqw / 1440);
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: calc(280 * var(--u)) 1fr;
	overflow: hidden;
	color: #0f172a;
	background: #f4f6fb;
	font-family: "Inter Local", Inter, system-ui, sans-serif;
	line-height: 1.25;
	text-align: left;
}

.mg-app svg { flex: 0 0 auto; }

.mg-side {
	display: flex;
	flex-direction: column;
	gap: calc(4 * var(--u));
	padding: calc(26 * var(--u)) calc(20 * var(--u));
	background: linear-gradient(180deg, #0c1d4a, #0a1430 60%, #08112a);
}

.mg-side img { width: calc(190 * var(--u)); height: auto; margin: 0 0 calc(22 * var(--u)) calc(6 * var(--u)); }

.mg-side small {
	margin: calc(14 * var(--u)) 0 calc(4 * var(--u)) calc(6 * var(--u));
	color: #8aa0c8;
	font-size: calc(11 * var(--u));
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.mg-side span {
	display: flex;
	gap: calc(14 * var(--u));
	align-items: center;
	height: calc(46 * var(--u));
	padding: 0 calc(14 * var(--u));
	border-radius: calc(8 * var(--u));
	color: #dbe4ff;
	font-size: calc(15 * var(--u));
}

.mg-side span svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); }
.mg-side span.is-active { color: #fff; background: linear-gradient(90deg, #2563eb, #1d4ed8); box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(37, 99, 235, .35); }

.mg-main { min-width: 0; overflow: hidden; }

.mg-top {
	display: flex;
	gap: calc(10 * var(--u));
	align-items: center;
	justify-content: flex-end;
	height: calc(80 * var(--u));
	padding: 0 calc(34 * var(--u));
	border-bottom: 1px solid #e5eaf2;
	background: #fff;
}

.mg-object,
.mg-user {
	display: flex;
	gap: calc(12 * var(--u));
	align-items: center;
	height: calc(48 * var(--u));
	padding: 0 calc(14 * var(--u)) 0 calc(8 * var(--u));
	border: 1px solid #e2e8f0;
	border-radius: calc(12 * var(--u));
	background: #fff;
}

.mg-object { width: calc(300 * var(--u)); }

.mg-object i,
.mg-user i {
	display: grid;
	place-items: center;
	width: calc(34 * var(--u));
	height: calc(34 * var(--u));
	border-radius: calc(9 * var(--u));
	color: #2563eb;
	background: #eef3fb;
	font-size: calc(12 * var(--u));
	font-style: normal;
	font-weight: 900;
}

.mg-user i { color: #fff; background: #059669; }
.mg-object svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.mg-object b,
.mg-user b { display: grid; font-size: calc(13 * var(--u)); font-weight: 800; }
.mg-object small { color: #64748b; font-size: calc(9 * var(--u)); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mg-user small { color: #64748b; font-size: calc(11 * var(--u)); font-weight: 600; }

.mg-page {
	display: grid;
	gap: calc(18 * var(--u));
	align-content: start;
	padding: calc(28 * var(--u)) calc(34 * var(--u));
}

.mg-card {
	border: 1px solid #e3e9f2;
	border-radius: calc(18 * var(--u));
	background: #fff;
	box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(21, 45, 93, .05);
}

.mg-head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: calc(26 * var(--u)) calc(30 * var(--u));
	overflow: hidden;
	background: linear-gradient(145deg, #fff, #f3f7ff);
}

.mg-head p { display: grid; gap: calc(8 * var(--u)); margin: 0; }

.mg-pill {
	width: fit-content;
	padding: calc(5 * var(--u)) calc(10 * var(--u));
	border: 1px solid #bfdbfe;
	border-radius: 999px;
	color: #1d4ed8;
	background: #eff6ff;
	font-size: calc(10 * var(--u));
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.mg-head strong { font-size: calc(34 * var(--u)); font-weight: 900; letter-spacing: -.03em; }
.mg-head small { color: #64748b; font-size: calc(13 * var(--u)); }

.mg-head em,
.mg-report-head em {
	display: inline-flex;
	gap: calc(8 * var(--u));
	align-items: center;
	height: calc(44 * var(--u));
	padding: 0 calc(16 * var(--u));
	border-radius: calc(12 * var(--u));
	color: #fff;
	background: #2563eb;
	box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(37, 99, 235, .3);
	font-size: calc(13 * var(--u));
	font-style: normal;
	font-weight: 800;
}

.mg-head em svg,
.mg-report-head em svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }

/* Grafik – widok tygodnia */
.mg-week { padding: calc(22 * var(--u)) calc(22 * var(--u)) 0; }
.mg-week-head { display: flex; align-items: flex-start; justify-content: space-between; }
.mg-week-head p { display: grid; gap: calc(5 * var(--u)); margin: 0; }
.mg-week-head small { color: #1d4ed8; font-size: calc(11 * var(--u)); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.mg-week-head strong { font-size: calc(22 * var(--u)); font-weight: 900; }
.mg-week-head span { color: #64748b; font-size: calc(11 * var(--u)); }

.mg-week-nav { display: flex; gap: calc(8 * var(--u)); align-items: center; }

.mg-week-nav i,
.mg-week-nav b {
	display: grid;
	place-items: center;
	height: calc(38 * var(--u));
	padding: 0 calc(12 * var(--u));
	border: 1px solid #e2e8f0;
	border-radius: calc(10 * var(--u));
	font-size: calc(12 * var(--u));
	font-style: normal;
	font-weight: 800;
}

.mg-week-nav svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }

.mg-week-nav em {
	display: inline-flex;
	gap: calc(6 * var(--u));
	align-items: center;
	height: calc(38 * var(--u));
	padding: 0 calc(16 * var(--u));
	border-radius: calc(10 * var(--u));
	color: #fff;
	background: #2563eb;
	font-size: calc(12 * var(--u));
	font-style: normal;
	font-weight: 800;
}

.mg-week-nav em svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }

.mg-legend {
	display: flex;
	gap: calc(8 * var(--u));
	align-items: center;
	margin-top: calc(16 * var(--u));
	padding: calc(10 * var(--u)) calc(12 * var(--u));
	border: 1px solid #e8edf5;
	border-radius: calc(12 * var(--u));
}

.mg-legend b { margin-right: calc(4 * var(--u)); font-size: calc(10 * var(--u)); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }

.mg-legend span {
	display: inline-flex;
	gap: calc(6 * var(--u));
	align-items: center;
	padding: calc(5 * var(--u)) calc(10 * var(--u));
	border-radius: 999px;
	background: #f1f5f9;
	font-size: calc(11 * var(--u));
	font-weight: 800;
}

.mg-legend span::before { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; content: ""; background: var(--c); }

.mg-app .is-teal { --c: #0d9488; --s: #ecfdf8; }
.mg-app .is-amber { --c: #f59e0b; --s: #fff8eb; }
.mg-app .is-violet { --c: #7c3aed; --s: #f5f1ff; }
.mg-app .is-blue { --c: #2563eb; --s: #eff5ff; }

.mg-days {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: calc(10 * var(--u));
	margin-top: calc(16 * var(--u));
}

.mg-day {
	display: grid;
	gap: calc(8 * var(--u));
	align-content: start;
	min-height: calc(560 * var(--u));
	padding: calc(10 * var(--u));
	border: 1px solid #e8edf5;
	border-radius: calc(14 * var(--u)) calc(14 * var(--u)) 0 0;
	background: #fafbfe;
}

.mg-day.is-today { border-color: #93c5fd; background: #f3f8ff; }
.mg-day-head { display: flex; gap: calc(8 * var(--u)); align-items: center; padding-bottom: calc(4 * var(--u)); }

.mg-day-head b {
	display: grid;
	place-items: center;
	width: calc(34 * var(--u));
	height: calc(34 * var(--u));
	border-radius: calc(9 * var(--u));
	background: #f1f5f9;
	font-size: calc(14 * var(--u));
	font-weight: 900;
}

.mg-day.is-today .mg-day-head b { color: #fff; background: #2563eb; }
.mg-day-head span { display: grid; flex: 1; font-size: calc(11 * var(--u)); font-weight: 900; text-transform: uppercase; }
.mg-day-head small { color: #94a3b8; font-size: calc(8 * var(--u)); font-weight: 700; }

.mg-day-head i {
	display: grid;
	place-items: center;
	width: calc(24 * var(--u));
	height: calc(24 * var(--u));
	border: 1px solid #e2e8f0;
	border-radius: 50%;
	color: #2563eb;
	font-size: calc(14 * var(--u));
	font-style: normal;
}

.mg-shift {
	display: grid;
	gap: calc(8 * var(--u));
	padding: calc(10 * var(--u));
	border: 1px solid color-mix(in srgb, var(--c) 30%, #fff);
	border-left: calc(4 * var(--u)) solid var(--c);
	border-radius: calc(12 * var(--u));
	background: linear-gradient(180deg, var(--s), #fff);
}

.mg-shift > span {
	width: fit-content;
	padding: calc(4 * var(--u)) calc(7 * var(--u));
	border-radius: calc(7 * var(--u));
	color: var(--c);
	background: #fff;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 25%, #fff);
	font-size: calc(10 * var(--u));
	font-weight: 900;
}

.mg-shift p { display: flex; gap: calc(8 * var(--u)); align-items: center; margin: 0; }

.mg-shift p i {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: calc(26 * var(--u));
	height: calc(26 * var(--u));
	border-radius: calc(8 * var(--u));
	color: var(--c);
	background: #fff;
	font-size: calc(9 * var(--u));
	font-style: normal;
	font-weight: 900;
}

.mg-shift b { display: grid; min-width: 0; overflow: hidden; font-size: calc(11 * var(--u)); font-weight: 900; white-space: nowrap; text-overflow: ellipsis; }
.mg-shift small { color: #64748b; font-size: calc(9 * var(--u)); font-weight: 600; }

.mg-empty {
	display: grid;
	place-items: center;
	padding: calc(20 * var(--u)) 0;
	border: 1px dashed #d6e0ee;
	border-radius: calc(12 * var(--u));
	color: #2563eb;
	font-size: calc(18 * var(--u));
}

.mg-empty small { color: #94a3b8; font-size: calc(10 * var(--u)); font-weight: 700; }

/* Obecność na żywo */
.mg-presence { padding: calc(20 * var(--u)); }
.mg-card-title { display: grid; gap: calc(4 * var(--u)); margin-bottom: calc(16 * var(--u)); }
.mg-card-title strong { font-size: calc(17 * var(--u)); font-weight: 900; }
.mg-card-title small { color: #64748b; font-size: calc(11 * var(--u)); }

.mg-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(10 * var(--u)); }

.mg-stats span {
	display: flex;
	gap: calc(10 * var(--u));
	align-items: center;
	padding: calc(12 * var(--u));
	border: 1px solid #e8edf5;
	border-radius: calc(13 * var(--u));
	box-shadow: inset 0 calc(-3 * var(--u)) 0 var(--c);
}

.mg-app .is-red { --c: #ef4444; --s: #fef2f2; }
.mg-app .is-green { --c: #10b981; --s: #ecfdf5; }
.mg-app .is-gray { --c: #94a3b8; --s: #f8fafc; }

.mg-stats i {
	display: grid;
	place-items: center;
	width: calc(34 * var(--u));
	height: calc(34 * var(--u));
	border-radius: calc(10 * var(--u));
	color: var(--c);
	background: var(--s);
}

.mg-stats i svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.mg-stats b { display: grid; font-size: calc(20 * var(--u)); font-weight: 900; }
.mg-stats small { color: #64748b; font-size: calc(10 * var(--u)); font-weight: 700; }
.mg-stats .is-red { border-color: #fecaca; background: linear-gradient(145deg, #fff5f5, #fff); }
.mg-stats .is-red b { color: #b91c1c; }

.mg-search {
	display: flex;
	gap: calc(8 * var(--u));
	align-items: center;
	height: calc(40 * var(--u));
	margin: calc(14 * var(--u)) 0;
	padding: 0 calc(14 * var(--u));
	border: 1px solid #e2e8f0;
	border-radius: calc(11 * var(--u));
	color: #94a3b8;
	background: #f8fafc;
	font-size: calc(11 * var(--u));
}

.mg-search svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }

.mg-group { margin-top: calc(12 * var(--u)); border: 1px solid #e8eef6; border-radius: calc(16 * var(--u)); }
.mg-group.is-red { border-color: #fecaca; }
.mg-group-head { display: flex; gap: calc(10 * var(--u)); align-items: center; padding: calc(12 * var(--u)) calc(14 * var(--u)); border-bottom: 1px solid #eef2f7; }

.mg-group-head i {
	display: grid;
	place-items: center;
	width: calc(28 * var(--u));
	height: calc(28 * var(--u));
	border-radius: calc(9 * var(--u));
	color: var(--c);
	background: var(--s);
}

.mg-group-head i svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.mg-group-head b { display: grid; flex: 1; font-size: calc(13 * var(--u)); font-weight: 900; }
.mg-group-head small { color: #94a3b8; font-size: calc(9.5 * var(--u)); font-weight: 600; }

.mg-group-head em {
	min-width: calc(24 * var(--u));
	padding: calc(2 * var(--u)) calc(8 * var(--u));
	border-radius: 999px;
	color: var(--c);
	background: var(--s);
	font-size: calc(11 * var(--u));
	font-style: normal;
	font-weight: 800;
	text-align: center;
}

.mg-people { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(10 * var(--u)); padding: calc(12 * var(--u)); }

.mg-person {
	display: grid;
	gap: calc(10 * var(--u));
	padding: calc(12 * var(--u));
	border: 1px solid #e8eef6;
	border-radius: calc(14 * var(--u));
}

.mg-person.is-alert { border-color: #fecaca; background: linear-gradient(160deg, #fff7f7, #fff 55%); }
.mg-person p { display: flex; gap: calc(10 * var(--u)); align-items: center; margin: 0; }

.mg-person p > i {
	display: grid;
	place-items: center;
	width: calc(38 * var(--u));
	height: calc(38 * var(--u));
	border-radius: calc(12 * var(--u));
	color: #fff;
	background: linear-gradient(145deg, #3b82f6, #6366f1);
	font-size: calc(11.5 * var(--u));
	font-style: normal;
	font-weight: 900;
}

.mg-person p > b { display: grid; flex: 1; font-size: calc(12 * var(--u)); font-weight: 900; }
.mg-person p small { color: #94a3b8; font-size: calc(9.5 * var(--u)); font-weight: 600; }

.mg-person p > em {
	padding: calc(3 * var(--u)) calc(8 * var(--u));
	border-radius: 999px;
	color: #047857;
	background: #ecfdf5;
	font-size: calc(9 * var(--u));
	font-style: normal;
	font-weight: 800;
}

.mg-timer {
	display: flex;
	gap: calc(8 * var(--u));
	align-items: baseline;
	padding: calc(9 * var(--u)) calc(12 * var(--u));
	border-radius: calc(11 * var(--u));
	background: #fef2f2;
}

.mg-timer.is-green { background: #f0fdf4; }
.mg-timer b { font-size: calc(18 * var(--u)); font-weight: 900; font-variant-numeric: tabular-nums; }
.mg-person.is-alert .mg-timer b { color: #b91c1c; }
.mg-timer small { color: #64748b; font-size: calc(10 * var(--u)); }
.mg-alert { display: flex; gap: calc(6 * var(--u)); align-items: center; color: #b91c1c; font-size: calc(10 * var(--u)); font-weight: 800; }
.mg-alert svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }

.mg-btn {
	display: flex;
	gap: calc(6 * var(--u));
	align-items: center;
	justify-content: center;
	height: calc(32 * var(--u));
	border: 1px solid #dce5f1;
	border-radius: calc(10 * var(--u));
	font-size: calc(10.5 * var(--u));
	font-weight: 800;
}

.mg-btn svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.mg-btn.is-red { border-color: transparent; color: #fff; background: #dc2626; }

/* Raporty */
.mg-report-head {
	display: flex;
	gap: calc(16 * var(--u));
	align-items: center;
	padding: calc(22 * var(--u)) calc(24 * var(--u));
	background: linear-gradient(110deg, #fff 50%, #eef5ff);
}

.mg-report-icon {
	display: grid;
	place-items: center;
	width: calc(56 * var(--u));
	height: calc(56 * var(--u));
	border: 1px solid #dbeafe;
	border-radius: calc(16 * var(--u));
	color: #2563eb;
	background: #f3f7ff;
}

.mg-report-icon svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.mg-report-head p { display: grid; flex: 1; gap: calc(4 * var(--u)); margin: 0; }
.mg-report-head small { color: #2563eb; font-size: calc(10 * var(--u)); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.mg-report-head strong { font-size: calc(24 * var(--u)); font-weight: 900; }
.mg-report-head span { color: #64748b; font-size: calc(11 * var(--u)); }
.mg-report-head em:last-child { color: #0f172a; background: #fff; border: 1px solid #e2e8f0; box-shadow: none; }

.mg-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(10 * var(--u)); }

.mg-kpis > span {
	display: grid;
	gap: calc(6 * var(--u));
	padding: calc(14 * var(--u));
	border: 1px solid #e3e9f2;
	border-top: calc(3 * var(--u)) solid var(--c);
	border-radius: calc(14 * var(--u));
	background: #fff;
}

.mg-app .is-green { --c: #10b981; }
.mg-kpis small { display: flex; gap: calc(6 * var(--u)); align-items: center; color: #475569; font-size: calc(9.5 * var(--u)); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.mg-kpis small svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); color: var(--c); }
.mg-kpis b { font-size: calc(24 * var(--u)); font-weight: 900; letter-spacing: -.02em; }
.mg-kpis .is-blue b { color: #1d4ed8; }
.mg-kpis i { color: #94a3b8; font-size: calc(9.5 * var(--u)); font-style: normal; font-weight: 600; }

.mg-report-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: calc(14 * var(--u)); }
.mg-chart-card,
.mg-rank { padding: calc(16 * var(--u)) calc(18 * var(--u)); }

.mg-section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(14 * var(--u)); }
.mg-section-title b { padding-left: calc(10 * var(--u)); border-left: calc(4 * var(--u)) solid #3b82f6; font-size: calc(14 * var(--u)); font-weight: 900; }

.mg-section-title em {
	padding: calc(4 * var(--u)) calc(8 * var(--u));
	border-radius: calc(7 * var(--u));
	color: #64748b;
	background: #eef3f8;
	font-size: calc(9 * var(--u));
	font-style: normal;
	font-weight: 800;
}

.mg-chart {
	position: relative;
	display: grid;
	grid-template-columns: repeat(31, 1fr);
	gap: calc(5 * var(--u));
	align-items: end;
	height: calc(210 * var(--u));
	padding: calc(10 * var(--u)) calc(8 * var(--u)) 0;
	border: 1px solid #edf2f7;
	border-radius: calc(12 * var(--u));
	background: linear-gradient(180deg, #fbfdff, #f6f9fc);
}

.mg-chart > span { display: flex; align-items: flex-end; height: 100%; border-radius: calc(5 * var(--u)) calc(5 * var(--u)) 0 0; }
.mg-chart > span.is-weekend { background: rgba(148, 163, 184, .1); }
.mg-chart > span i { display: block; width: 100%; height: var(--h); border-radius: calc(5 * var(--u)) calc(5 * var(--u)) 1px 1px; background: linear-gradient(180deg, #2563eb, #60a5fa); }
.mg-chart > span.is-best i { background: linear-gradient(180deg, #4338ca, #6366f1); }
.mg-chart > span.is-future i { background: #dbe3ee; }

.mg-avg { position: absolute; z-index: 2; right: calc(8 * var(--u)); bottom: 58%; left: calc(8 * var(--u)); border-top: calc(2 * var(--u)) dashed #f59e0b; }

.mg-avg em {
	position: absolute;
	top: calc(-10 * var(--u));
	left: 0;
	padding: calc(2 * var(--u)) calc(7 * var(--u));
	border-radius: 999px;
	color: #92400e;
	background: #fef3c7;
	font-size: calc(9 * var(--u));
	font-style: normal;
	font-weight: 800;
}

.mg-rank-row {
	display: grid;
	grid-template-columns: calc(20 * var(--u)) calc(28 * var(--u)) 1fr auto;
	gap: calc(4 * var(--u)) calc(9 * var(--u));
	align-items: center;
	padding: calc(8 * var(--u)) 0;
	border-bottom: 1px solid #f1f5f9;
}

.mg-rank-row > em { color: #94a3b8; font-size: calc(10 * var(--u)); font-style: normal; font-weight: 900; text-align: center; }
.mg-rank-row:nth-of-type(2) > em,
.mg-rank-row:nth-of-type(3) > em,
.mg-rank-row:nth-of-type(4) > em { color: #fff; border-radius: 50%; background: #f59e0b; }
.mg-rank-row:nth-of-type(3) > em { background: #94a3b8; }
.mg-rank-row:nth-of-type(4) > em { background: #b07a48; }

.mg-rank-row > i {
	display: grid;
	place-items: center;
	width: calc(28 * var(--u));
	height: calc(28 * var(--u));
	border-radius: 50%;
	color: #fff;
	background: linear-gradient(145deg, #3b82f6, #6366f1);
	font-size: calc(9 * var(--u));
	font-style: normal;
	font-weight: 900;
}

.mg-rank-row b { font-size: calc(11 * var(--u)); font-weight: 900; }
.mg-rank-row strong { color: #1d4ed8; font-size: calc(11 * var(--u)); font-weight: 900; }
.mg-rank-row > span { grid-column: 3 / -1; height: calc(4 * var(--u)); overflow: hidden; border-radius: 999px; background: #eef2f7; }
.mg-rank-row > span i { display: block; height: 100%; background: linear-gradient(90deg, #6366f1, #2563eb); }

/* Sekcja z zakładkami panelu managera */
.mf {
	padding: clamp(80px, 9vw, 130px) 0;
	background:
		radial-gradient(circle at 10% 0%, rgba(37, 99, 235, .12), transparent 40%),
		radial-gradient(circle at 95% 60%, rgba(124, 58, 237, .1), transparent 40%),
		#eef2fb;
}

.mf-shell { width: min(100% - 48px, 1320px); margin: 0 auto; }
.mf-heading { max-width: 820px; margin: 0 auto; text-align: center; }

.mf-heading h2 {
	margin: 18px 0 16px;
	color: #071633;
	font-size: clamp(36px, 4.2vw, 64px);
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: -.05em;
}

.mf-heading h2 span { background: linear-gradient(95deg, #2563eb 10%, #7c3aed 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mf-heading p { margin: 0 auto; color: #5d6b85; font-size: 18px; line-height: 1.65; }

.mf-tabs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 40px 0 22px;
}

.mf-tabs button {
	position: relative;
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 16px 18px;
	overflow: hidden;
	border: 1px solid #d8e2f2;
	border-radius: 18px;
	background: rgba(255, 255, 255, .7);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.mf-tabs button:hover { border-color: #b9cbe8; background: #fff; }
.mf-tabs button.is-active { border-color: #93b4f5; background: #fff; box-shadow: 0 18px 40px rgba(21, 45, 93, .12); }

.mf-tab-icon {
	display: grid;
	flex: 0 0 44px;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	color: #2563eb;
	background: #eef3fb;
	transition: .2s ease;
}

.mf-tabs button.is-active .mf-tab-icon { color: #fff; background: linear-gradient(135deg, #3b82f6, #7c3aed); box-shadow: 0 10px 22px rgba(79, 70, 229, .3); }
.mf-tab-copy { display: grid; gap: 2px; }
.mf-tab-copy b { color: #071633; font-size: 16px; }
.mf-tab-copy small { color: #64748b; font-size: 13.5px; line-height: 1.45; }

.mf-progress { position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background: linear-gradient(90deg, #3b82f6, #7c3aed); }
.mf-tabs button.is-active .mf-progress { animation: kf-progress var(--kf-duration, 4s) linear forwards; }
.mf.is-paused .mf-tabs button.is-active .mf-progress { width: 100%; animation: none; }

.mf-window .bw { box-shadow: 0 40px 90px rgba(10, 25, 60, .25), 0 0 0 1px rgba(10, 25, 60, .06); }

@media (max-width: 900px) {
	.mf-tabs { grid-template-columns: 1fr; }
	.mf-tab-copy small { display: none; }
}

/* =====================================================================
   Produkt – hero z panelem managera i sekcja obiektów
   ===================================================================== */
.product-page .hx h1, .pd-hero h1 { font-size: clamp(44px, 5vw, 76px); }
.pd-stage { position: relative; padding: 0 0 14% 4%; }
.pd-stage .bw { transform: perspective(1800px) rotateY(-7deg); }
.pd-tablet { position: absolute; bottom: 0; left: -4%; width: 36%; }

/* Pasek z kotwicami na ciemnym tle pod hero */
body:has(.pd-hero) .anchor-nav { position: relative; z-index: 5; margin-top: -32px; }

.ob {
	padding: clamp(80px, 9vw, 130px) 0;
	color: #fff;
	background:
		radial-gradient(circle at 85% 20%, rgba(79, 70, 229, .28), transparent 40%),
		radial-gradient(circle at 5% 90%, rgba(37, 99, 235, .22), transparent 40%),
		#070c22;
}

.ob-shell { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 5vw, 80px); align-items: center; width: min(100% - 48px, 1320px); margin: 0 auto; }
.ob-copy h2 { margin: 20px 0; color: #fff; font-size: clamp(38px, 4vw, 60px); font-weight: 900; line-height: 1.02; letter-spacing: -.05em; }
.ob-copy h2 span { background: linear-gradient(95deg, #60a5fa 10%, #a78bfa 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ob-copy > p { margin: 0; color: #aab6d6; font-size: 17px; line-height: 1.7; }

.ob-visual { position: relative; }

.ob-switcher {
	display: grid;
	gap: 10px;
	padding: 16px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 26px;
	color: #0f172a;
	background: #fff;
	box-shadow: 0 40px 90px rgba(3, 8, 30, .55), 0 0 120px rgba(79, 70, 229, .25);
}

.ob-switcher-head { display: flex; gap: 12px; align-items: center; padding: 6px 6px 12px; border-bottom: 1px solid #eef2f7; }
.ob-switcher-head > i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #2563eb; background: #eef3fb; }
.ob-switcher-head p { display: grid; flex: 1; margin: 0; line-height: 1.25; }
.ob-switcher-head small { color: #64748b; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ob-switcher-head b { font-size: 16px; }
.ob-switcher-head > span { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #e2e8f0; border-radius: 11px; color: #64748b; }

.ob-item {
	--c: #2563eb;
	--s: #eff5ff;
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	padding: 14px;
	border: 1px solid #e6ecf4;
	border-radius: 18px;
	transition: border-color .2s ease, transform .2s ease;
}

.ob-item.is-violet { --c: #7c3aed; --s: #f5f1ff; }
.ob-item.is-teal { --c: #0d9488; --s: #ecfdf8; }
.ob-item:hover { border-color: #c7d6ee; transform: translateX(4px); }
.ob-item.is-active { border-color: #93b4f5; background: linear-gradient(135deg, #f3f8ff, #fff); box-shadow: 0 12px 28px rgba(37, 99, 235, .12); }

.ob-item > i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: #fff; background: var(--c); font-size: 19px; font-style: normal; font-weight: 900; }
.ob-item-main p { display: grid; margin: 0; line-height: 1.3; }
.ob-item-main b { font-size: 16px; }
.ob-item-main small { color: #64748b; font-size: 12.5px; }
.ob-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.ob-tags em { padding: 2px 8px; border-radius: 999px; color: var(--c); background: var(--s); font-size: 11px; font-style: normal; font-weight: 800; }

.ob-item-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 14px; text-align: right; }
.ob-item-stats span { display: grid; color: #94a3b8; font-size: 10.5px; font-weight: 700; line-height: 1.2; }
.ob-item-stats b { color: #0f172a; font-size: 16px; font-variant-numeric: tabular-nums; }
.ob-item-stats .is-live b { color: #059669; }

.ob-check { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 24px; height: 24px; border: 3px solid #fff; border-radius: 50%; color: #fff; background: #2563eb; }

.ob-add { display: flex; gap: 8px; align-items: center; justify-content: center; height: 48px; border: 1px dashed #c9d6ea; border-radius: 16px; color: #2563eb; font-size: 14px; font-weight: 800; }

.ob-total {
	position: absolute;
	right: -18px;
	bottom: -26px;
	display: flex;
	gap: 11px;
	align-items: center;
	padding: 12px 16px 12px 12px;
	border: 1px solid rgba(148, 163, 255, .3);
	border-radius: 18px;
	background: rgba(15, 23, 60, .9);
	box-shadow: 0 18px 40px rgba(3, 8, 30, .5);
	backdrop-filter: blur(14px);
}

.ob-total > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #22c55e, #059669); }
.ob-total p { display: grid; margin: 0; line-height: 1.25; }
.ob-total strong { color: #fff; font-size: 14px; }
.ob-total small { color: #8f9cc0; font-size: 12px; }

@media (max-width: 1100px) { .ob-shell { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
	.ob-item { grid-template-columns: auto minmax(0, 1fr); }
	.ob-item-stats { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); text-align: left; }
	.ob-total { position: static; margin-top: 14px; }
	.pd-stage .bw { transform: none; }
}

/* Karty zmian mieszczą się w kolumnie dnia – długie nazwiska skracamy wielokropkiem. */
.mg-day { min-width: 0; overflow: hidden; }
.mg-shift { min-width: 0; overflow: hidden; }
.mg-shift p { min-width: 0; }
.mg-shift b { flex: 1 1 auto; }
.mg-shift b, .mg-shift small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-shift b { display: block; min-width: 0; }
.mg-shift b small { display: block; }

/* =====================================================================
   Produkt – makiety ekranów panelu (formularz zmiany, rozliczenie, pracownik)
   ===================================================================== */
.pv-stage { position: relative; }
.pv-stage::before { content: ""; position: absolute; z-index: -1; inset: 8% -4%; border-radius: 50%; background: radial-gradient(circle, rgba(79, 70, 229, .16), transparent 65%); filter: blur(8px); }

.pv {
	display: grid;
	gap: 12px;
	padding: 18px;
	border: 1px solid #dfe7f3;
	border-radius: 22px;
	color: #0f172a;
	background: #fff;
	box-shadow: 0 30px 70px rgba(21, 45, 93, .14);
	font-size: 13px;
	line-height: 1.3;
}

.pv b { font-weight: 800; }
.pv small { color: #64748b; font-size: 11px; font-weight: 600; }
.pv svg { flex: 0 0 auto; }

.pv-head { display: flex; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid #eef2f7; }
.pv-head p { display: grid; flex: 1; gap: 2px; margin: 0; }
.pv-head p small { color: #2563eb; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.pv-head p b { font-size: 17px; }
.pv-head > em { display: inline-flex; gap: 5px; align-items: center; padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 10px; font-size: 11px; font-style: normal; font-weight: 800; }
.pv-head > em.is-green { border-color: #a7f3d0; color: #047857; background: #ecfdf5; }
.pv-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #2563eb; background: #eef3fb; }

.pv-av { display: grid; flex: 0 0 auto; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: #fff; background: linear-gradient(145deg, #3b82f6, #6366f1); font-size: 9.5px; font-style: normal; font-weight: 900; }
.pv-av.is-lg { width: 38px; height: 38px; border-radius: 12px; font-size: 12px; }
.pv-av.is-xl { width: 50px; height: 50px; border-radius: 15px; font-size: 16px; box-shadow: 0 10px 22px rgba(79, 70, 229, .25); }

.pv-input { display: inline-flex; gap: 8px; align-items: center; min-height: 38px; padding: 0 12px; border: 1px solid #d8e3f0; border-radius: 11px; background: #fff; font-size: 12.5px; font-weight: 700; }
.pv-dot { width: 10px; height: 10px; border-radius: 50%; background: #0d9488; box-shadow: 0 0 0 3px #ccfbf1; }

.pv-btn { display: inline-flex; gap: 6px; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #2563eb, #1d4ed8 60%, #4338ca); box-shadow: 0 10px 22px rgba(37, 99, 235, .28); font-size: 12.5px; font-style: normal; font-weight: 800; white-space: nowrap; }
.pv-btn.is-sm { min-height: 30px; padding: 0 11px; font-size: 11.5px; }

/* Zaplanuj zmianę */
.pv-row { display: grid; grid-template-columns: 26px 110px minmax(0, 1fr); gap: 10px; align-items: start; padding: 4px 0; }
.pv-step { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: #2563eb; background: #eff6ff; font-size: 11px; font-weight: 900; }
.pv-label { display: grid; gap: 2px; margin: 0; }
.pv-fields { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.pv-fields .pv-input { flex: 1 1 140px; }
.pv-fields.is-when .pv-input { flex: 0 0 auto; }
.pv-arrow { color: #94a3b8; font-weight: 900; }
.pv-chips { display: flex; gap: 2px; padding: 3px; border-radius: 11px; background: #f1f5f9; }
.pv-chips i { display: grid; place-items: center; min-width: 30px; height: 30px; border-radius: 8px; color: #64748b; font-size: 11.5px; font-style: normal; font-weight: 800; }
.pv-chips i.is-on { color: #1d4ed8; background: #fff; box-shadow: 0 2px 6px rgba(15, 23, 42, .1), inset 0 0 0 1px #bfdbfe; }

.pv-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; width: 100%; }

.pv-week i {
	position: relative;
	display: grid;
	place-content: center;
	min-height: 46px;
	border: 1px solid #dce5f1;
	border-radius: 11px;
	font-size: 13px;
	font-style: normal;
	font-weight: 900;
	text-align: center;
}

.pv-week i small { color: #94a3b8; font-size: 8.5px; font-weight: 800; text-transform: uppercase; }
.pv-week i.is-on, .pv-week i.is-primary { border-color: transparent; color: #fff; background: linear-gradient(145deg, #3b82f6, #1d4ed8); }
.pv-week i.is-on small, .pv-week i.is-primary small { color: rgba(255, 255, 255, .8); }
.pv-week i.is-primary::after { content: "✓"; position: absolute; top: -6px; right: -5px; display: grid; place-items: center; width: 15px; height: 15px; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #10b981; font-size: 8px; }
.pv-week i.is-busy { border-color: #fdba74; }
.pv-week i em { color: #c2410c; font-size: 7.5px; font-style: normal; }

.pv-foot { display: flex; gap: 12px; align-items: center; margin: 4px -18px -18px; padding: 14px 18px; border-top: 1px solid #e3eaf3; border-radius: 0 0 22px 22px; background: #fafcff; }
.pv-foot p { display: grid; flex: 1; gap: 3px; min-width: 0; margin: 0; }
.pv-foot small em { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; color: #047857; background: #ecfdf5; font-style: normal; font-weight: 800; }
.pv-foot small em.is-blue { color: #1d4ed8; background: #eff6ff; }

/* Rozliczenie miesiąca */
.pv-checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pv-checks span { display: flex; gap: 7px; align-items: center; padding: 8px 10px; border: 1px solid #bbf7d0; border-radius: 10px; color: #166534; background: #f0fdf4; font-size: 11px; font-weight: 700; }
.pv-checks i { display: grid; place-items: center; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 6px; color: #fff; background: #22c55e; font-size: 10px; font-style: normal; font-weight: 900; }
.pv-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pv-kpis span { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid #e3eaf3; border-radius: 12px; }
.pv-kpis b { font-size: 17px; }
.pv-kpis b.is-blue { color: #1d4ed8; }
.pv-close { display: flex; gap: 8px; }
.pv-close .pv-input { flex: 1; color: #64748b; }
.pv-ok { display: flex; gap: 8px; align-items: center; padding: 9px 12px; border-radius: 11px; color: #047857; background: #ecfdf5; font-size: 12px; font-weight: 800; }
.pv-export { display: flex; gap: 6px; align-items: center; padding-top: 10px; border-top: 1px dashed #e3eaf3; }
.pv-export b { display: inline-flex; flex: 1; gap: 6px; align-items: center; font-size: 12.5px; }
.pv-export i { padding: 4px 10px; border-radius: 8px; color: #1d4ed8; background: #eff6ff; font-size: 11px; font-style: normal; font-weight: 900; }

/* Edycja pracownika */
.pv-identity { display: flex; gap: 12px; align-items: center; }
.pv-identity p { display: grid; gap: 5px; margin: 0; }
.pv-identity b { font-size: 16px; }
.pv-identity span { display: flex; flex-wrap: wrap; gap: 4px; }
.pv-identity em { padding: 2px 8px; border-radius: 999px; color: #475569; background: #f1f5f9; font-size: 10.5px; font-style: normal; font-weight: 700; }
.pv-identity em.is-green { color: #047857; background: #ecfdf5; }

.pv-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 5px; border-radius: 16px; background: #eef2f8; }
.pv-tabs span { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 9px; border-radius: 12px; color: #475569; background: rgba(255, 255, 255, .55); font-size: 11px; }
.pv-tabs span.is-on { color: #1d4ed8; background: #fff; box-shadow: 0 0 0 1.5px #3b82f6, 0 8px 18px rgba(37, 99, 235, .15); }
.pv-tabs span.is-on::after { content: ""; position: absolute; right: 14px; bottom: -1px; left: 14px; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, #60a5fa, #7c3aed); }
.pv-tabs em { width: fit-content; padding: 1px 6px; border-radius: 999px; color: #1d4ed8; background: #eff6ff; font-size: 9.5px; font-style: normal; font-weight: 800; }

.pv-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pv-methods span { position: relative; display: flex; gap: 10px; align-items: center; padding: 11px; border: 1px solid #e2e8f0; border-radius: 13px; }
.pv-methods span.is-on { border-color: #93c5fd; background: #f5f9ff; }
.pv-methods span > i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #2563eb; background: #eef3fb; }
.pv-methods span b { display: grid; gap: 1px; font-size: 12px; }
.pv-methods span > em { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; background: #cbd5e1; }
.pv-methods span.is-on > em { background: #2563eb; }

.pv-save { display: flex; gap: 8px; align-items: center; margin: 2px -18px -18px; padding: 12px 18px; border-top: 1px solid #e3eaf3; border-radius: 0 0 22px 22px; background: #fafcff; }
.pv-save > span { padding: 6px 10px; border: 1px solid #dce5f1; border-radius: 9px; background: #fff; font-size: 11px; font-weight: 700; }
.pv-save > small { padding: 0 4px; }
.pv-save > small b { color: #1d4ed8; }
.pv-save .pv-btn { margin-left: auto; }

/* Mini makiety w kartach dyspozycyjności i urlopów */
.pv-mini { margin-top: 18px; padding: 12px; border-radius: 16px; box-shadow: 0 12px 28px rgba(21, 45, 93, .08); }
.pv-avail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pv-avail span { display: grid; gap: 6px; padding: 8px; border: 1px solid #e3eaf3; border-radius: 11px; font-size: 11px; }
.pv-avail em { display: grid; gap: 1px; padding: 5px 6px; border-radius: 8px; font-size: 10px; font-style: normal; font-weight: 800; }
.pv-avail em i { display: none; }
.pv-avail em small { font-size: 9.5px; }
.pv-avail .is-ok em { color: #1757a5; background: #eaf4ff; }
.pv-avail .is-no em { color: #9b3328; background: #fff0ee; }
.pv-leave { display: flex; gap: 10px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid #eef2f7; }
.pv-leave p { display: grid; flex: 1; gap: 2px; min-width: 0; margin: 0; }
.pv-leave > em { padding: 3px 8px; border-radius: 999px; color: #b45309; background: #fffbeb; box-shadow: inset 0 0 0 1px #fde68a; font-size: 10px; font-style: normal; font-weight: 800; }
.pv-balance { display: grid; gap: 7px; padding-top: 4px; }
.pv-balance p { display: flex; align-items: baseline; justify-content: space-between; margin: 0; }
.pv-balance b { color: #1d4ed8; font-size: 18px; }
.pv-balance span { display: flex; height: 7px; overflow: hidden; border-radius: 999px; background: #e8eef7; }
.pv-balance span i { background: #2563eb; }
.pv-balance span i.is-planned { background: #a5b4fc; }

/* Stare sekcje Produktu z delikatnym tłem, aby nie były płasko białe */
.product-page #grafik, .product-page #raporty { position: relative; }
#dyspozycyjnosc .planning-card { display: flex; flex-direction: column; }

@media (max-width: 620px) {
	.pv-row { grid-template-columns: 26px minmax(0, 1fr); }
	.pv-row .pv-fields { grid-column: 1 / -1; }
	.pv-checks, .pv-avail { grid-template-columns: 1fr 1fr; }
	.pv-tabs { grid-template-columns: 1fr 1fr; }
	.pv-methods { grid-template-columns: 1fr; }
	.pv-foot, .pv-save { flex-wrap: wrap; }
}

/* =====================================================================
   Bezpieczeństwo i RODO
   ===================================================================== */
.ts { padding: clamp(80px, 9vw, 130px) 0; background: #fff; }
.ts-shell { width: min(100% - 48px, 1240px); margin: 0 auto; }
.ts-heading { max-width: 760px; margin: 0 auto; text-align: center; }
.ts-heading h2 { margin: 18px 0 16px; color: #071633; font-size: clamp(36px, 4vw, 60px); font-weight: 900; line-height: 1.02; letter-spacing: -.05em; }
.ts-heading h2 span { background: linear-gradient(95deg, #059669 10%, #2563eb 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ts-heading p { margin: 0; color: #5d6b85; font-size: 18px; line-height: 1.65; }
.ts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 46px; }
.ts-grid article { position: relative; padding: 26px; overflow: hidden; border: 1px solid #dfe7f3; border-radius: 22px; background: linear-gradient(160deg, #f7faff, #fff 60%); transition: transform .25s ease, box-shadow .25s ease; }
.ts-grid article:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(21, 45, 93, .1); }
.ts-grid article > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #10b981, #2563eb); box-shadow: 0 10px 22px rgba(16, 185, 129, .25); }
.ts-grid h3 { margin: 18px 0 6px; color: #071633; font-size: 18px; letter-spacing: -.02em; }
.ts-grid p { margin: 0; color: #64748b; font-size: 14.5px; line-height: 1.55; }
.ts-links { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: center; margin-top: 30px; padding: 16px 20px; border: 1px solid #d1fae5; border-radius: 18px; background: #f0fdf8; font-size: 14px; font-weight: 700; }
.ts-links span { display: inline-flex; gap: 7px; align-items: center; color: #047857; }
.ts-links a { display: inline-flex; gap: 5px; align-items: center; color: #1d4ed8; }
.ts-links a:hover { color: #1e3a8a; text-decoration: underline; }
@media (max-width: 1000px) { .ts-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .ts-grid { grid-template-columns: 1fr; } }

/* Kontakt – ciemny hero jak na pozostałych stronach */
.ct-hero { background: #070c22; }
.ct-hero .contact-copy h1 { color: #fff; }
.ct-hero .contact-copy h1 span { background: linear-gradient(95deg, #60a5fa 10%, #a78bfa 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ct-hero .contact-copy > p { color: #aab6d6; }
.ct-hero .contact-direct a { border-color: rgba(148, 163, 255, .25); background: rgba(255, 255, 255, .05); }
.ct-hero .contact-direct a:hover { border-color: rgba(167, 139, 250, .55); background: rgba(255, 255, 255, .08); }
.ct-hero .contact-direct small { color: #8f9cc0; }
.ct-hero .contact-direct strong { color: #fff; }
.ct-hero .contact-direct span { color: #fff; background: linear-gradient(135deg, #3b82f6, #7c3aed); }
.ct-hero .contact-trial-link { color: #93c5fd; }
.ct-hero .contact-trial-link:hover { color: #fff; }
.ct-hero .contact-form-card { border: 0; box-shadow: 0 40px 90px rgba(3, 8, 30, .55), 0 0 120px rgba(79, 70, 229, .3); }
.contact-page .contact-next { padding-top: clamp(80px, 9vw, 120px); padding-bottom: clamp(80px, 9vw, 120px); }
.ct-hero .contact-copy h1 { font-size: clamp(44px, 4.8vw, 70px); }
.ct-hero .contact-form-card { color: #071633; background: #fff; }
.ct-hero .contact-form-card h2,
.ct-hero .contact-form-card label,
.ct-hero .contact-form-card p { color: #071633; }
.ct-hero .contact-form-card small { color: #2563eb; }

/* =====================================================================
   Wdrożenie i sprzęt
   ===================================================================== */
.su-hero-shell { width: min(100% - 48px, 980px); margin: 0 auto; text-align: center; }
.su-hero-shell h1 { margin: 24px 0 20px; color: #fff; font-size: clamp(42px, 5vw, 76px); font-weight: 900; line-height: 1; letter-spacing: -.055em; }
.su-hero-shell h1 span { background: linear-gradient(95deg, #60a5fa 10%, #a78bfa 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.su-hero-shell > p { max-width: 680px; margin: 0 auto; color: #aab6d6; font-size: 19px; line-height: 1.6; }
.su-hero-shell .hx-actions { justify-content: center; }
.su-jump { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 40px; }
.su-jump a { display: inline-flex; gap: 8px; align-items: center; padding: 9px 14px; border: 1px solid rgba(148, 163, 255, .22); border-radius: 999px; color: #dbe4ff; background: rgba(255, 255, 255, .04); font-size: 14px; font-weight: 700; transition: .2s ease; }
.su-jump a:hover { color: #fff; border-color: rgba(167, 139, 250, .55); background: rgba(255, 255, 255, .09); }
.su-jump b { color: #a5b4fc; font-size: 11px; }

.su-shell { width: min(100% - 48px, 1240px); margin: 0 auto; }
.su-heading { max-width: 780px; margin: 0 auto 46px; text-align: center; }
.su-heading h2 { margin: 18px 0 16px; color: #071633; font-size: clamp(36px, 4vw, 60px); font-weight: 900; line-height: 1.02; letter-spacing: -.05em; }
.su-heading h2 span { background: linear-gradient(95deg, #2563eb 10%, #7c3aed 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.su-heading p { margin: 0; color: #5d6b85; font-size: 18px; line-height: 1.65; }

.su-hardware, .su-guide { padding: clamp(80px, 9vw, 130px) 0; background: #eef2fb; }
.su-guide { background: #fff; }
.su-hw-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }
.su-hw-grid article { position: relative; padding: 26px; border: 1px solid #dbe3f2; border-radius: 24px; background: #fff; box-shadow: 0 16px 40px rgba(21, 45, 93, .07); }
.su-hw-grid article.is-main { grid-row: span 2; display: flex; flex-direction: column; background: linear-gradient(160deg, #fff, #f3f7ff); }
.su-hw-device { margin: 6px 0 22px; }
.su-tag { position: absolute; z-index: 2; top: 18px; right: 18px; padding: 4px 10px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, #3b82f6, #7c3aed); font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.su-hw-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: #fff; background: linear-gradient(135deg, #3b82f6, #7c3aed); box-shadow: 0 10px 22px rgba(79, 70, 229, .25); }
.su-hw-grid h3 { margin: 16px 0 6px; color: #071633; font-size: 19px; letter-spacing: -.02em; }
.su-hw-grid article.is-main h3 { margin-top: 0; font-size: 24px; }
.su-hw-grid p { margin: 0; color: #64748b; font-size: 15px; line-height: 1.6; }
.su-hw-grid ul { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.su-hw-grid li { display: flex; gap: 8px; align-items: center; color: #334155; font-size: 14.5px; font-weight: 600; }
.su-hw-grid li svg { color: #059669; }
.su-note { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 26px 0 0; color: #64748b; font-size: 14px; }
.su-note svg { color: #2563eb; }
.su-note a { color: #2563eb; font-weight: 700; }

.su-prepare { padding: clamp(80px, 9vw, 120px) 0; color: #fff; background: radial-gradient(circle at 85% 20%, rgba(79, 70, 229, .3), transparent 40%), radial-gradient(circle at 10% 90%, rgba(37, 99, 235, .22), transparent 40%), #070c22; }
.su-prepare .su-heading h2, .su-daily .su-heading h2 { color: #fff; }
.su-prepare .su-heading h2 span, .su-daily .su-heading h2 span { background-image: linear-gradient(95deg, #60a5fa 10%, #a78bfa 90%); }
.su-prepare .su-heading p { color: #aab6d6; }
.su-checklist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: su; }
.su-checklist li { position: relative; padding: 24px; border: 1px solid rgba(148, 163, 255, .18); border-radius: 22px; background: rgba(255, 255, 255, .04); }
.su-checklist li::before { counter-increment: su; content: counter(su, decimal-leading-zero); position: absolute; top: 20px; right: 22px; color: rgba(167, 139, 250, .5); font-size: 13px; font-weight: 900; }
.su-checklist li > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #3b82f6, #7c3aed); }
.su-checklist p { display: grid; gap: 6px; margin: 16px 0 0; }
.su-checklist strong { color: #fff; font-size: 17px; }
.su-checklist small { color: #8f9cc0; font-size: 14px; line-height: 1.5; }

.su-steps { position: relative; display: grid; gap: 40px; }
.su-steps::before { content: ""; position: absolute; top: 20px; bottom: 20px; left: 27px; width: 2px; background: linear-gradient(180deg, #bfdbfe, #ddd6fe); }
.su-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: center; padding: 6px 0 6px 84px; scroll-margin-top: 100px; }
.su-step.has-visual { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.su-step-num { position: absolute; top: 4px; left: 0; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #3b82f6, #7c3aed); box-shadow: 0 0 0 8px #fff, 0 14px 28px rgba(79, 70, 229, .3); font-size: 18px; font-weight: 900; }
.su-step-copy h3 { margin: 0 0 10px; color: #071633; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.035em; }
.su-where { display: inline-flex; gap: 6px; align-items: center; padding: 5px 11px; border-radius: 999px; color: #1d4ed8; background: #eff6ff; box-shadow: inset 0 0 0 1px #bfdbfe; font-size: 13px; font-weight: 800; }
.su-step-copy > p { margin: 14px 0 0; color: #5d6b85; font-size: 16.5px; line-height: 1.65; }
.su-step-copy ul { display: grid; gap: 7px; margin: 16px 0 0; padding: 0; list-style: none; }
.su-step-copy li { display: flex; gap: 8px; align-items: center; color: #334155; font-size: 14.5px; font-weight: 600; }
.su-step-copy li svg { flex: 0 0 auto; color: #059669; }
.su-step-visual { display: grid; place-items: center; }
.su-step-visual .dv-phone { width: min(300px, 70%); }
.su-step-visual .pv { width: 100%; }

.su-daily { padding: clamp(80px, 9vw, 120px) 0; color: #fff; background: #070c22; }
.su-daily-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.su-daily-grid article { padding: 28px; border: 1px solid rgba(148, 163, 255, .18); border-radius: 24px; background: rgba(255, 255, 255, .04); }
.su-daily-grid b { padding: 4px 10px; border-radius: 999px; color: #c7d2fe; background: rgba(129, 140, 248, .18); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.su-daily-grid h3 { margin: 16px 0 8px; color: #fff; font-size: 21px; }
.su-daily-grid p { margin: 0; color: #8f9cc0; font-size: 15px; line-height: 1.6; }
.setup-page .faq-section { padding-top: clamp(80px, 9vw, 120px); }

@media (max-width: 1100px) {
	.su-hw-grid { grid-template-columns: 1fr 1fr; }
	.su-hw-grid article.is-main { grid-column: 1 / -1; grid-row: auto; }
	.su-checklist { grid-template-columns: 1fr 1fr; }
	.su-step.has-visual { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
	.su-hw-grid, .su-checklist, .su-daily-grid { grid-template-columns: 1fr; }
	.su-steps::before { left: 21px; }
	.su-step { padding-left: 62px; }
	.su-step-num { width: 44px; height: 44px; border-radius: 14px; font-size: 15px; }
}
.su-step.has-visual { align-items: start; }
.su-step-copy { padding-top: 8px; }

/* =====================================================================
   Demo – tablet z kioskiem i panel menedżera
   ===================================================================== */
.dm { padding-bottom: clamp(70px, 8vw, 110px); }
.dm-shell { display: grid; gap: 34px; width: min(100% - 48px, 1280px); margin: 0 auto; }
.dm-intro { max-width: 860px; margin: 0 auto; text-align: center; }
.dm-intro h1 { margin: 22px 0 16px; color: #fff; font-size: clamp(40px, 4.8vw, 70px); font-weight: 900; line-height: 1; letter-spacing: -.055em; }
.dm-intro h1 span { background: linear-gradient(95deg, #60a5fa 10%, #a78bfa 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dm-intro p { margin: 0 auto; max-width: 640px; color: #aab6d6; font-size: 18px; line-height: 1.6; }

.dm-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 34px; align-items: center; }
.dm-screens { position: relative; }
.dm-screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
.dm-screen.is-active { opacity: 1; visibility: visible; }
.dm-screen .ks-action { border: 0; font-family: inherit; cursor: pointer; transition: transform .15s ease, filter .15s ease; }
.dm-screen .ks-action:hover { filter: brightness(1.05); transform: translateY(-1px); }
.dm-screen .ks-action.is-break { border: 1px solid #f5c542; }
.dm-screen .ks-action.is-end { border: 1px solid #fecaca; }
.dm-screen .ks-back { cursor: pointer; }

.dm-guide { display: grid; gap: 16px; }
.dm-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dm-steps li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid rgba(148, 163, 255, .14); border-radius: 16px; background: rgba(255, 255, 255, .03); transition: .25s ease; }
.dm-steps li b { display: grid; flex: 0 0 32px; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #a5b4fc; background: rgba(255, 255, 255, .06); font-size: 13px; }
.dm-steps li p { display: grid; gap: 2px; margin: 0; }
.dm-steps li strong { color: #fff; font-size: 15px; }
.dm-steps li small { color: #8f9cc0; font-size: 13px; }
.dm-steps li.is-active { border-color: rgba(129, 140, 248, .55); background: linear-gradient(135deg, rgba(59, 130, 246, .2), rgba(124, 58, 237, .16)); }
.dm-steps li.is-active b { color: #fff; background: linear-gradient(135deg, #3b82f6, #7c3aed); }
.dm-steps li.is-done b { color: #fff; background: #10b981; }

.dm-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.dm-card {
	position: relative;
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 14px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 16px;
	color: #0f172a;
	background: linear-gradient(135deg, #fff, #eef3ff);
	box-shadow: 0 14px 30px rgba(3, 8, 30, .35);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease;
}

.dm-card:hover, .dm-card:focus-visible { box-shadow: 0 18px 38px rgba(79, 70, 229, .45); transform: translateY(-3px) rotate(-1deg); outline: 0; }
.dm-card-chip { flex: 0 0 26px; width: 26px; height: 20px; border-radius: 5px; background: linear-gradient(135deg, #fcd34d, #d97706); box-shadow: inset 0 0 0 1px rgba(146, 64, 14, .3); }
.dm-card-copy { display: grid; flex: 1; gap: 2px; min-width: 0; }
.dm-card-copy b { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.dm-card-copy small { color: #64748b; font-size: 11.5px; }
.dm-card-copy em { font-style: normal; font-weight: 800; }
.dm-card.is-working em { color: #059669; }
.dm-card.is-break em { color: #d97706; }
.dm-card-nfc { color: #2563eb; }

.dm-reset { display: inline-flex; gap: 6px; align-items: center; justify-self: start; padding: 6px 2px; border: 0; color: #8f9cc0; background: none; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.dm-reset:hover { color: #fff; }

.dm-panel { display: grid; gap: 12px; }
.dm-panel-head p { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin: 0; }
.dm-panel-head b { display: inline-flex; gap: 8px; align-items: center; color: #fff; font-size: 16px; }
.dm-panel-head small { color: #8f9cc0; font-size: 14px; }
.dm-panel-screens { position: relative; }
.dm-view { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
.dm-view.is-active { opacity: 1; visibility: visible; }
.dm-view [data-mg-nav] { cursor: pointer; transition: background .15s ease; }
.dm-view [data-mg-nav]:not(.is-active):hover { background: rgba(255, 255, 255, .08); }
.dm-view .mg-presence { min-height: 0; }

/* Panel obecności generowany w demo */
.mg-person.is-fresh { box-shadow: 0 0 0 calc(2 * var(--u)) #3b82f6; animation: dm-fresh 1.4s ease; }
.mg-person p > em.is-amber { color: #b45309; background: #fffbeb; }
.mg-timer.is-break { background: #fffbeb; }
.mg-chips { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)); }
.mg-chips span { display: inline-flex; gap: calc(8 * var(--u)); align-items: center; padding: calc(5 * var(--u)) calc(12 * var(--u)) calc(5 * var(--u)) calc(5 * var(--u)); border: 1px solid #e8eef6; border-radius: 999px; font-size: calc(11 * var(--u)); font-weight: 800; }
.mg-chips span.is-fresh { border-color: #3b82f6; background: #eff6ff; }
.mg-chips i { display: grid; place-items: center; width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%; color: #475569; background: #e2e8f0; font-size: calc(8.5 * var(--u)); font-style: normal; font-weight: 900; }
.mg-group.is-amber { --c: #f59e0b; --s: #fff8eb; }
.mg-group.is-blue { --c: #2563eb; --s: #eff5ff; }
.mg-group.is-gray { --c: #94a3b8; --s: #f8fafc; }

.dm-toast { position: absolute; z-index: 5; top: 7%; right: 2%; display: flex; gap: 12px; align-items: center; padding: 12px 16px 12px 12px; border: 1px solid #e3e9f2; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px rgba(15, 23, 42, .2), inset 0 -3px 0 #22c55e; animation: dm-toast .35s ease; }
.dm-toast[hidden] { display: none; }
.dm-toast > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #16a34a; background: #dcfce7; }
.dm-toast p { display: grid; gap: 2px; margin: 0; }
.dm-toast strong { color: #0f172a; font-size: 14px; }
.dm-toast small { color: #64748b; font-size: 12.5px; }

.dm-cta { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: center; padding: 22px; border: 1px solid rgba(148, 163, 255, .2); border-radius: 22px; background: rgba(255, 255, 255, .04); text-align: center; }
.dm-cta p { margin: 0; color: #aab6d6; font-size: 16px; }
.dm-cta strong { color: #fff; }
.dm-cta-link { display: inline-flex; gap: 6px; align-items: center; color: #93c5fd; font-weight: 800; }
.dm-cta-link:hover { color: #fff; }

@keyframes dm-fresh { 0% { transform: scale(.96); } 60% { transform: scale(1.02); } 100% { transform: none; } }
@keyframes dm-toast { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (max-width: 1000px) {
	.dm-top { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
	.dm-cards { grid-template-columns: 1fr; }
	.dm-toast { right: 2%; left: 2%; }
}
@media (prefers-reduced-motion: reduce) {
	.dm-screen, .dm-view { transition: none; }
	.mg-person.is-fresh, .dm-toast { animation: none; }
}
.dm-panel .bw-screen.is-panel { aspect-ratio: 1440 / 1220; }
.mf-demo { display: inline-flex; gap: 6px; align-items: center; margin-top: 18px; padding: 10px 18px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #2563eb, #4338ca); box-shadow: 0 12px 26px rgba(37, 99, 235, .3); font-size: 15px; font-weight: 800; transition: transform .2s ease; }
.mf-demo:hover { color: #fff; transform: translateY(-2px); }

/* =====================================================================
   Panel – Historia zmian i okno korekty (demo)
   ===================================================================== */
button.mg-btn { width: 100%; font-family: inherit; cursor: pointer; }
button.mg-btn.is-red:hover { background: #b91c1c; }
.mg-history { padding: calc(20 * var(--u)); }
.mg-hfilters { display: flex; gap: calc(8 * var(--u)); padding: calc(10 * var(--u)); border: 1px solid #e3eaf3; border-radius: calc(14 * var(--u)); background: #f8fafc; }
.mg-hfilters span { display: inline-flex; flex: 1; gap: calc(6 * var(--u)); align-items: center; height: calc(36 * var(--u)); padding: 0 calc(12 * var(--u)); border: 1px solid #dce5f1; border-radius: calc(10 * var(--u)); background: #fff; font-size: calc(11 * var(--u)); font-weight: 600; }
.mg-hfilters svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); color: #94a3b8; }
.mg-timeline { display: grid; gap: calc(10 * var(--u)); margin-top: calc(16 * var(--u)); }
.mg-hday { display: flex; gap: calc(8 * var(--u)); align-items: baseline; padding: calc(6 * var(--u)) 0; }
.mg-hday b { font-size: calc(13 * var(--u)); font-weight: 900; }
.mg-hday span { color: #94a3b8; font-size: calc(10.5 * var(--u)); font-weight: 600; }
.mg-hday em { margin-left: auto; padding: calc(1 * var(--u)) calc(8 * var(--u)); border-radius: 999px; color: #64748b; background: #f1f5f9; font-size: calc(9.5 * var(--u)); font-style: normal; font-weight: 700; }
.mg-hentry { --c: #2563eb; --s: #eff6ff; display: grid; grid-template-columns: calc(46 * var(--u)) calc(30 * var(--u)) minmax(0, 1fr); gap: 0 calc(10 * var(--u)); align-items: start; }
.mg-hentry.is-added { --c: #059669; --s: #ecfdf5; }
.mg-hentry time { padding-top: calc(7 * var(--u)); color: #64748b; font-size: calc(11 * var(--u)); font-weight: 700; text-align: right; }
.mg-hdot { display: grid; place-items: center; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: calc(10 * var(--u)); color: var(--c); background: var(--s); font-style: normal; }
.mg-hdot svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.mg-hcard { display: grid; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border: 1px solid #e6ecf4; border-radius: calc(14 * var(--u)); background: #fff; }
.mg-hentry.is-fresh .mg-hcard { border-color: #93c5fd; box-shadow: 0 0 0 calc(3 * var(--u)) rgba(59, 130, 246, .18); animation: dm-fresh 1.4s ease; }
.mg-hhead { display: flex; gap: calc(10 * var(--u)); align-items: center; }
.mg-hav, .mg-hfoot i { display: grid; flex: 0 0 auto; place-items: center; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: calc(9 * var(--u)); color: #fff; background: linear-gradient(145deg, #3b82f6, #6366f1); font-size: calc(10 * var(--u)); font-style: normal; font-weight: 800; }
.mg-hhead p { display: grid; flex: 1; gap: calc(2 * var(--u)); margin: 0; }
.mg-hhead b { font-size: calc(12.5 * var(--u)); font-weight: 900; }
.mg-hhead small { color: #64748b; font-size: calc(10 * var(--u)); }
.mg-hhead > em { padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: 999px; color: var(--c); background: var(--s); font-size: calc(9.5 * var(--u)); font-style: normal; font-weight: 800; }
.mg-hdiff { display: grid; grid-template-columns: calc(170 * var(--u)) 1fr; gap: calc(12 * var(--u)); align-items: center; padding: calc(7 * var(--u)) calc(12 * var(--u)); border: 1px solid #edf1f7; border-radius: calc(10 * var(--u)); background: #fbfcfe; }
.mg-hdiff span { display: grid; font-size: calc(10.5 * var(--u)); font-weight: 750; }
.mg-hdiff span small { color: #94a3b8; font-size: calc(8.5 * var(--u)); font-weight: 600; }
.mg-hdiff p { display: flex; gap: calc(6 * var(--u)); align-items: center; margin: 0; color: #94a3b8; font-size: calc(11 * var(--u)); }
.mg-hdiff s { padding: calc(2 * var(--u)) calc(7 * var(--u)); border-radius: calc(7 * var(--u)); color: #94a3b8; background: #f1f5f9; }
.mg-hdiff b { padding: calc(2 * var(--u)) calc(7 * var(--u)); border-radius: calc(7 * var(--u)); color: #065f46; background: #ecfdf5; box-shadow: inset 0 0 0 1px #a7f3d0; }
.mg-hdiff.is-derived { background: #fff; }
.mg-hdiff.is-derived span { color: #64748b; font-weight: 650; }
.mg-hdiff.is-derived b { color: #334155; background: #f8fafc; box-shadow: inset 0 0 0 1px #e2e8f0; }
.mg-hcard blockquote { margin: 0; padding: calc(7 * var(--u)) calc(11 * var(--u)); border-left: calc(3 * var(--u)) solid #f59e0b; border-radius: 0 calc(10 * var(--u)) calc(10 * var(--u)) 0; color: #78350f; background: #fffbeb; font-size: calc(11 * var(--u)); }
.mg-hfoot { display: flex; align-items: center; justify-content: space-between; padding-top: calc(8 * var(--u)); border-top: 1px dashed #e8eef6; }
.mg-hfoot span { display: flex; gap: calc(6 * var(--u)); align-items: center; color: #94a3b8; font-size: calc(9.5 * var(--u)); }
.mg-hfoot i { width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: calc(7 * var(--u)); color: #475569; background: #e2e8f0; font-size: calc(8 * var(--u)); }
.mg-hfoot b { color: #475569; }
.mg-hfoot em { padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: calc(8 * var(--u)); color: #1d4ed8; background: #eff6ff; font-size: calc(10 * var(--u)); font-style: normal; font-weight: 800; }

/* Okno korekty dnia */
.dm-modal { --u: calc(100cqw / 1440); position: absolute; z-index: 8; inset: 0; display: grid; place-items: center; background: rgba(7, 12, 34, .45); backdrop-filter: blur(3px); animation: dm-toast .25s ease; }
.dm-modal[hidden] { display: none; }
.dm-modal-panel { display: grid; gap: calc(14 * var(--u)); width: calc(560 * var(--u)); padding: calc(24 * var(--u)); border-radius: calc(20 * var(--u)); color: #0f172a; background: #fff; box-shadow: 0 calc(30 * var(--u)) calc(70 * var(--u)) rgba(3, 8, 30, .35); font-size: calc(13 * var(--u)); text-align: left; }
.dm-modal-head { display: flex; align-items: flex-start; justify-content: space-between; }
.dm-modal-head p { display: grid; gap: calc(3 * var(--u)); margin: 0; }
.dm-modal-head small { color: #2563eb; font-size: calc(10 * var(--u)); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.dm-modal-head b { font-size: calc(20 * var(--u)); }
.dm-modal-head span { color: #64748b; font-size: calc(11.5 * var(--u)); }
.dm-modal-head em { font-style: normal; }
.dm-modal-x { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border: 1px solid #e2e8f0; border-radius: calc(10 * var(--u)); color: #64748b; background: #fff; font-size: calc(18 * var(--u)); line-height: 1; cursor: pointer; }
.dm-modal-alert { display: flex; gap: calc(8 * var(--u)); align-items: center; padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(11 * var(--u)); color: #b91c1c; background: #fef2f2; font-size: calc(11.5 * var(--u)); font-weight: 700; }
.dm-modal-alert svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.dm-modal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(10 * var(--u)); }
.dm-modal label { display: grid; gap: calc(6 * var(--u)); color: #334155; font-size: calc(11 * var(--u)); font-weight: 800; }
.dm-modal input, .dm-modal select, .dm-modal textarea { width: 100%; min-height: calc(40 * var(--u)); padding: 0 calc(10 * var(--u)); border: 1px solid #d8e3f0; border-radius: calc(10 * var(--u)); color: #0f172a; background: #fff; font: inherit; font-size: calc(13 * var(--u)); font-weight: 600; }
.dm-modal input:disabled { color: #64748b; background: #f8fafc; }
.dm-modal textarea { padding: calc(8 * var(--u)) calc(10 * var(--u)); resize: none; }
.dm-modal input:focus, .dm-modal select:focus, .dm-modal textarea:focus { border-color: #60a5fa; outline: 0; box-shadow: 0 0 0 calc(3 * var(--u)) rgba(37, 99, 235, .15); }
.dm-modal-sum { margin: 0; padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(11 * var(--u)); color: #065f46; background: #ecfdf5; font-size: calc(12 * var(--u)); font-weight: 700; }
.dm-modal-actions { display: flex; gap: calc(8 * var(--u)); justify-content: flex-end; }
.dm-btn, .dm-btn-ghost { display: inline-flex; gap: calc(6 * var(--u)); align-items: center; height: calc(42 * var(--u)); padding: 0 calc(18 * var(--u)); border-radius: calc(11 * var(--u)); font: inherit; font-size: calc(13 * var(--u)); font-weight: 800; cursor: pointer; }
.dm-btn { border: 0; color: #fff; background: linear-gradient(135deg, #2563eb, #4338ca); box-shadow: 0 calc(10 * var(--u)) calc(22 * var(--u)) rgba(37, 99, 235, .3); }
.dm-btn svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.dm-btn-ghost { border: 1px solid #dce5f1; color: #334155; background: #fff; }

@media (max-width: 700px) {
	.dm-modal-panel { width: 92%; font-size: 12px; }
	.dm-modal { --u: 1px; }
}