/* ============================================================
   Pointech — Theme components
   Ported faithfully from the Pointech Design System handoff.
   Depends on design-tokens.css (CSS custom properties).
   ============================================================ */

/* ── Base ─────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-prose);
	color: var(--fg-1);
	background: var(--bg-1);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
	font-family: var(--font-display);
	color: var(--fg-1);
	letter-spacing: var(--tr-display);
	line-height: var(--lh-snug);
	font-weight: 700;
	margin: 0 0 var(--sp-4);
	text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-size: var(--fs-h4); font-weight: 600; }
p  { margin: 0 0 var(--sp-5); line-height: var(--lh-prose); text-wrap: pretty; }
small, .caption { font-size: var(--fs-caption); color: var(--fg-3); }
code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.92em; }

a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--link-hover); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--bw-2) solid var(--pt-blue-400);
	outline-offset: 2px;
	border-radius: var(--r-1);
}

/* ── Layout ───────────────────────────────────────────────── */
.pt-container { max-width: var(--pt-maxw); margin-inline: auto; padding-inline: var(--pt-gutter); }
.pt-section { padding-block: clamp(64px, 4rem + 4vw, 120px); }
.pt-section-head { display: grid; grid-template-columns: 1fr 1.5fr; gap: 40px; margin-bottom: 56px; align-items: end; }
.pt-section-head .pt-eyebrow { padding-top: 12px; }
.pt-section-title { font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem); line-height: var(--lh-tight); letter-spacing: -.025em; margin: 12px 0 0; }
.pt-lead { font-size: var(--fs-body-lg); color: var(--fg-2); max-width: 60ch; }

/* Eyebrow / mono micro-label — the Pointech signature */
.pt-eyebrow {
	font-family: var(--font-mono); font-size: var(--fs-micro);
	text-transform: uppercase; letter-spacing: var(--tr-eyebrow);
	font-weight: 500; display: inline-block;
}
.pt-eyebrow--brand { color: var(--pt-blue-700); }
.pt-eyebrow--light { color: var(--pt-blue-200); }
.pt-data { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
	font-family: var(--font-body); font-weight: 500; font-size: 14px;
	letter-spacing: var(--tr-button); padding: 10px 18px; border-radius: var(--r-2);
	border: 1px solid transparent; cursor: pointer; display: inline-flex;
	align-items: center; gap: 8px; text-decoration: none;
	transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
	            color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--pt-blue-700); color: #fff; }
.btn-primary:hover { background: var(--pt-blue-800); box-shadow: var(--shadow-brand); color: #fff; }
.btn-secondary { background: #fff; color: var(--pt-blue-700); border-color: var(--pt-blue-700); }
.btn-secondary:hover { background: var(--pt-blue-050); }
.btn-ghost { background: transparent; color: var(--pt-blue-700); }
.btn-ghost:hover { background: var(--pt-blue-050); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-lg { padding: 14px 22px; font-size: 16px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }

/* ── Skip link target ─────────────────────────────────────── */
#pt-main:focus { outline: none; }

/* ── Navigation ───────────────────────────────────────────── */
.pt-nav {
	position: sticky; top: 0; z-index: 50;
	background: rgba(255,255,255,.86); backdrop-filter: blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.pt-nav.is-scrolled { border-bottom-color: var(--border-1); background: rgba(255,255,255,.94); }
.pt-nav-inner { max-width: var(--pt-maxw); margin: 0 auto; padding: 14px var(--pt-gutter); display: flex; align-items: center; gap: 40px; }
.pt-nav-logo { display: flex; align-items: center; gap: 8px; }
.pt-nav-logo img, .pt-nav-logo .pt-logo-svg { display: block; height: 36px; width: auto; }
.custom-logo-link { display: flex; }
.pt-nav-menu { display: flex; gap: 28px; margin-left: 12px; flex: 1; list-style: none; padding: 0; margin-block: 0; }
.pt-nav-menu li { position: relative; }
.pt-nav-menu a { color: var(--fg-2); font-size: 14px; font-weight: 500; }
.pt-nav-menu a:hover, .pt-nav-menu .current-menu-item > a { color: var(--pt-blue-700); }
.pt-nav-menu .sub-menu {
	position: absolute; top: calc(100% + 10px); left: 0; min-width: 220px;
	background: #fff; border: 1px solid var(--border-1); box-shadow: var(--shadow-3);
	list-style: none; padding: 8px; margin: 0; display: none; z-index: 60;
}
.pt-nav-menu li:hover > .sub-menu, .pt-nav-menu li:focus-within > .sub-menu { display: block; }
.pt-nav-menu .sub-menu a { display: block; padding: 8px 12px; font-size: 14px; }
.pt-nav-menu .sub-menu a:hover { background: var(--pt-blue-050); }
.pt-nav-cta { display: flex; gap: 10px; align-items: center; }
.pt-nav-toggle {
	display: none; background: none; border: 1px solid var(--border-1);
	border-radius: var(--r-2); padding: 8px 10px; cursor: pointer; color: var(--fg-1);
}
.pt-lang { display: flex; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: 12px; }
.pt-lang a { color: var(--fg-3); border-bottom: 0; }
.pt-lang a.current-lang, .pt-lang a:hover { color: var(--pt-blue-700); }

/* ── Hero ─────────────────────────────────────────────────── */
.pt-hero { --pt-spd: 1; --pt-cb: 1; position: relative; overflow: hidden; background: var(--pt-blue-700); color: #fff; padding: 56px var(--pt-gutter) 60px; }
/* Compute Lattice — decorative animated grid (replaces the static square) */
.pt-hero-lattice {
	position: absolute; right: -120px; top: 80px;
	width: 480px; height: 480px;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(12, 1fr);
	gap: 5px;
	pointer-events: none;
}
/* Mid variant: same 480x480 container, 9x9 grid → each cell side ≈ 12/9 =
   1.33x bigger than the default 12x12 (the „o 1/3 większe" target).
   Gap bumps 5px → 6px proportionally to the cell growth. */
.pt-hero-lattice--mid { grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr); gap: 6px; }
@media (max-width: 900px) { .pt-hero-lattice--mid { gap: 5px; } }

/* Sparse variant: same 480x480 container, 8x8 grid → cells are ~2.25x bigger
   in area than the default 12x12. Slightly larger gap keeps the rhythm. */
.pt-hero-lattice--sparse { grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); gap: 8px; }
@media (max-width: 900px) { .pt-hero-lattice--sparse { gap: 6px; } }

/* XL variant: same 480x480 container, 5x5 grid → each cell side is 12/5 =
   2.4x bigger than the default 12x12 (+140%). Gap scales proportionally
   (5px → 12px on desktop, 8px on mobile). */
.pt-hero-lattice--xl { grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); gap: 12px; }
@media (max-width: 900px) { .pt-hero-lattice--xl { gap: 8px; } }

/* Blend variants: edge / corner cells get a `mask-image` that fades their
   OUTER side to transparent, so the boundary of the whole mosaic dissolves
   into the hero background instead of forming a hard rectangle. Inner cells
   stay fully opaque. Three layouts share these fade rules:
     • --blend       — 5x5 square
     • --blend-wide  — 7x5 rectangle (same cell size)
     • --blend-band  — 7x3 horizontal strip (same cell size, half-height)
   The [class*="…--blend"] selector covers all (and any future --blend-*).
   Webkit prefix kept for older Safari (mask-image was unprefixed only
   since Safari 15.4). */
.pt-hero-lattice--blend      { grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); gap: 12px; }
@media (max-width: 900px) { .pt-hero-lattice--blend { gap: 8px; } }

/* Wide variant — 7x5 rectangle. Container w:h = 676.8:480 = 1.41:1 to keep
   cells square at the same ~86 px size as --blend / --xl. Responsive sizes
   shrink proportionally; hidden under 600 px (parent rule already does it). */
.pt-hero-lattice--blend-wide { width: 680px; height: 480px; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(5, 1fr); gap: 12px; }
@media (max-width: 1100px) { .pt-hero-lattice--blend-wide { width: 540px; height: 380px; right: -100px; } }
@media (max-width: 900px)  { .pt-hero-lattice--blend-wide { width: 425px; height: 300px; right: -90px; top: 48px; gap: 8px; } }

/* Band variant — 7x3 horizontal strip. Same cell side ≈ 86 px as wide and
   blend, but only 3 rows tall, giving a very horizontal aspect (~2.39:1).
   Width 680 = 7×86.4 + 6×12 gap, height 285 = 3×86.4 + 2×12 gap.
   Responsive heights shrink in proportion (5/3 ratio kept across breakpoints). */
.pt-hero-lattice--blend-band { width: 680px; height: 285px; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(3, 1fr); gap: 12px; }
@media (max-width: 1100px) { .pt-hero-lattice--blend-band { width: 540px; height: 225px; right: -100px; } }
@media (max-width: 900px)  { .pt-hero-lattice--blend-band { width: 425px; height: 180px; right: -90px; top: 48px; gap: 8px; } }

[class*="pt-hero-lattice--blend"] .pt-fade-t  { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 60%); mask-image: linear-gradient(to bottom, transparent 0%, #000 60%); }
[class*="pt-hero-lattice--blend"] .pt-fade-b  { -webkit-mask-image: linear-gradient(to top,    transparent 0%, #000 60%); mask-image: linear-gradient(to top,    transparent 0%, #000 60%); }
[class*="pt-hero-lattice--blend"] .pt-fade-l  { -webkit-mask-image: linear-gradient(to right,  transparent 0%, #000 60%); mask-image: linear-gradient(to right,  transparent 0%, #000 60%); }
[class*="pt-hero-lattice--blend"] .pt-fade-r  { -webkit-mask-image: linear-gradient(to left,   transparent 0%, #000 60%); mask-image: linear-gradient(to left,   transparent 0%, #000 60%); }
[class*="pt-hero-lattice--blend"] .pt-fade-tl { -webkit-mask-image: linear-gradient(135deg,    transparent 0%, #000 60%); mask-image: linear-gradient(135deg,    transparent 0%, #000 60%); }
[class*="pt-hero-lattice--blend"] .pt-fade-tr { -webkit-mask-image: linear-gradient(225deg,    transparent 0%, #000 60%); mask-image: linear-gradient(225deg,    transparent 0%, #000 60%); }
[class*="pt-hero-lattice--blend"] .pt-fade-bl { -webkit-mask-image: linear-gradient(45deg,     transparent 0%, #000 60%); mask-image: linear-gradient(45deg,     transparent 0%, #000 60%); }
[class*="pt-hero-lattice--blend"] .pt-fade-br { -webkit-mask-image: linear-gradient(315deg,    transparent 0%, #000 60%); mask-image: linear-gradient(315deg,    transparent 0%, #000 60%); }
.pt-hero-cell { background: var(--pt-blue-400); opacity: .07; border-radius: var(--r-0); }
.pt-hero-cell.is-live { background: var(--pt-scan); opacity: .12; }
.pt-hero-lattice--anim .pt-hero-cell {
	will-change: opacity;
	animation: pt-lattice 3.6s var(--ease-out) infinite;
	animation-duration: calc(3.6s * var(--pt-spd, 1));
	animation-delay: calc(var(--d) * -160ms * var(--pt-spd, 1));
}
.pt-hero-lattice--anim .pt-hero-cell.is-live { animation-name: pt-lattice-live; animation-duration: calc(2.4s * var(--pt-spd, 1)); }
@keyframes pt-lattice {
	0%, 100% { opacity: .07; }
	12%      { opacity: calc(.85 * var(--pt-cb, 1)); }
	34%      { opacity: calc(.16 * var(--pt-cb, 1)); }
}
@keyframes pt-lattice-live {
	0%, 100% { opacity: .15; }
	10%      { opacity: calc(1 * var(--pt-cb, 1)); }
	44%      { opacity: calc(.22 * var(--pt-cb, 1)); }
}
@media (prefers-reduced-motion: reduce) {
	.pt-hero-lattice--anim .pt-hero-cell { animation: none; }
	.pt-hero-cell { opacity: .12; }
	.pt-hero-cell.is-live { opacity: .55; }
}
@media (max-width: 1100px) { .pt-hero-lattice { width: 380px; height: 380px; right: -100px; } }
@media (max-width: 900px)  { .pt-hero-lattice { width: 300px; height: 300px; right: -90px; top: 48px; gap: 4px; } }
@media (max-width: 600px)  { .pt-hero-lattice { display: none; } }

/* Neural graph — alternative hero animation (pure CSS on inline SVG) */
.pt-hero-neural {
	position: absolute; right: -120px; top: 80px;
	width: 480px; height: 480px;
	pointer-events: none; overflow: visible;
}
.pt-neural-base { stroke: #fff; stroke-width: 1.5; opacity: .10; }
.pt-neural-base.is-live { stroke: var(--pt-scan); opacity: .20; }
.pt-neural-pulse {
	stroke: var(--pt-blue-200); stroke-width: 2; fill: none;
	stroke-dasharray: 6 100; stroke-dashoffset: 100; opacity: 0;
	animation: pt-neural 2.8s var(--ease-out) infinite;
	animation-duration: calc(2.8s * var(--pt-spd, 1));
	animation-delay: calc(var(--k) * -220ms * var(--pt-spd, 1));
	will-change: stroke-dashoffset, opacity;
}
.pt-neural-pulse.is-live { stroke: var(--pt-scan); }
.pt-neural-node {
	fill: var(--pt-blue-200); opacity: .35;
	animation: pt-neural-node 3s var(--ease-out) infinite;
	animation-duration: calc(3s * var(--pt-spd, 1));
	animation-delay: calc(var(--k) * -240ms * var(--pt-spd, 1));
}
.pt-neural-node.is-live { fill: var(--pt-scan); }
@keyframes pt-neural {
	0%   { stroke-dashoffset: 100; opacity: 0; }
	8%   { opacity: 1; }
	62%  { opacity: 1; }
	100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes pt-neural-node {
	0%, 100% { opacity: .3; }
	50%      { opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
	.pt-neural-pulse { animation: none; opacity: .22; stroke-dashoffset: 0; stroke-dasharray: none; stroke-width: 1.5; }
	.pt-neural-node  { animation: none; opacity: .5; }
}
@media (max-width: 1100px) { .pt-hero-neural { width: 380px; height: 380px; right: -100px; } }
@media (max-width: 900px)  { .pt-hero-neural { width: 300px; height: 300px; right: -90px; top: 48px; } }
@media (max-width: 600px)  { .pt-hero-neural { display: none; } }

/* Live readout — mono data terminal (pure CSS) */
.pt-hero-readout {
	position: absolute; right: -20px; top: 88px;
	width: 440px;
	padding: 22px 24px;
	border: 1px solid rgba(255,255,255,.14);
	font-family: var(--font-mono);
	color: rgba(255,255,255,.55);
	pointer-events: none;
	display: flex; flex-direction: column; gap: 18px;
}
.pt-ro-head { display: flex; align-items: center; gap: 10px; }
.pt-ro-dot { width: 8px; height: 8px; background: var(--pt-scan); animation: pt-ro-blink 1.4s steps(1, end) infinite; animation-duration: calc(1.4s * var(--pt-spd, 1)); }
.pt-ro-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--pt-blue-200); }
.pt-ro-stream { height: 132px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
.pt-ro-rows { display: flex; flex-direction: column; animation: pt-ro-scroll 16s linear infinite; animation-duration: calc(16s * var(--pt-spd, 1)); will-change: transform; }
.pt-ro-row { font-size: 12.5px; line-height: 22px; white-space: nowrap; color: rgba(255,255,255,.6); }
.pt-ro-stat { display: flex; align-items: flex-end; justify-content: space-between; }
.pt-ro-stat-lbl { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); padding-bottom: 6px; }
.pt-ro-counter { font-size: 34px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; display: inline-block; white-space: nowrap; line-height: 1; }
.pt-ro-reel { display: inline-block; height: 1em; overflow: hidden; vertical-align: bottom; }
.pt-ro-digits { display: flex; flex-direction: column; }
.pt-ro-digits i { display: block; height: 1em; line-height: 1em; font-style: normal; }
.pt-ro-reel--u .pt-ro-digits { animation: pt-ro-tick .9s steps(10, end) infinite; animation-duration: calc(.9s * var(--pt-spd, 1)); }
.pt-ro-reel--t .pt-ro-digits { animation: pt-ro-tick 9s steps(10, end) infinite; animation-duration: calc(9s * var(--pt-spd, 1)); }
.pt-ro-reel--h .pt-ro-digits { animation: pt-ro-tick 90s steps(10, end) infinite; animation-duration: calc(90s * var(--pt-spd, 1)); }
.pt-ro-bar { position: relative; height: 4px; background: rgba(255,255,255,.10); overflow: hidden; }
.pt-ro-bar-fill { position: absolute; top: 0; left: 0; height: 100%; width: 34%; background: var(--pt-blue-200); animation: pt-ro-bar 2.6s var(--ease-in-out) infinite; animation-duration: calc(2.6s * var(--pt-spd, 1)); will-change: transform; }
.pt-ro-cursor { font-size: 12px; letter-spacing: .12em; color: rgba(255,255,255,.5); }
.pt-ro-caret { color: var(--pt-scan); animation: pt-ro-blink 1s steps(1, end) infinite; animation-duration: calc(1s * var(--pt-spd, 1)); }
@keyframes pt-ro-scroll { to { transform: translateY(-50%); } }
@keyframes pt-ro-tick  { to { transform: translateY(-10em); } }
@keyframes pt-ro-bar   { 0% { transform: translateX(-110%); } 100% { transform: translateX(330%); } }
@keyframes pt-ro-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) {
	.pt-ro-rows, .pt-ro-digits, .pt-ro-bar-fill, .pt-ro-dot, .pt-ro-caret { animation: none; }
	.pt-ro-bar-fill { transform: translateX(40%); }
	.pt-ro-dot, .pt-ro-caret { opacity: 1; }
}
@media (max-width: 1100px) { .pt-hero-readout { width: 380px; right: -16px; } }
@media (max-width: 900px)  { .pt-hero-readout { width: 320px; top: 56px; padding: 18px; } .pt-ro-counter { font-size: 28px; } }
@media (max-width: 600px)  { .pt-hero-readout { display: none; } }

/* Coder terminal — typewriter code reveal + flowing bit stream (dark) */
.pt-hero-coder {
	position: absolute; right: -20px; top: 84px;
	width: 460px;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 8px;
	background: rgba(4,7,22,.55);
	font-family: var(--font-mono);
	pointer-events: none;
	overflow: hidden;
	display: flex; flex-direction: column;
}
.pt-cd-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.pt-cd-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.16); flex: none; }
.pt-cd-bar .pt-cd-dot:first-child { background: var(--pt-scan); opacity: .65; }
.pt-cd-file { font-size: 11px; letter-spacing: .1em; color: rgba(255,255,255,.5); }
.pt-cd-tag { margin-left: auto; font-size: 10px; letter-spacing: .16em; color: var(--pt-blue-200); }
.pt-cd-code { padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.pt-cd-line { display: flex; align-items: center; gap: 12px; }
.pt-cd-gut { font-size: 10px; color: rgba(255,255,255,.2); width: 16px; text-align: right; flex: none; }
.pt-cd-ink {
	display: inline-flex; align-items: center; gap: 7px; flex-wrap: nowrap;
	clip-path: inset(0 100% 0 0);
	animation: pt-cd-type calc(9s * var(--pt-spd, 1)) linear infinite;
	animation-delay: calc(var(--ln) * .45s * var(--pt-spd, 1));
	will-change: clip-path;
}
.pt-cd-t { display: block; height: 7px; border-radius: 2px; background: rgba(255,255,255,.4); }
.pt-cd-t--kw  { background: var(--pt-scan); opacity: .8; }
.pt-cd-t--fn  { background: var(--pt-blue-200); }
.pt-cd-t--var { background: rgba(255,255,255,.5); }
.pt-cd-t--num { background: var(--pt-blue-400); }
.pt-cd-t--str { background: var(--pt-scan); opacity: .55; }
.pt-cd-t--op  { background: rgba(255,255,255,.26); }
.pt-cd-t--ind { background: transparent; }
.pt-cd-caret { display: block; width: 7px; height: 14px; background: var(--pt-scan); flex: none; animation: pt-cd-blink 1s steps(1, end) infinite; animation-duration: calc(1s * var(--pt-spd, 1)); }
.pt-cd-bits {
	margin-top: 4px; padding: 10px 0 14px;
	display: flex; flex-direction: column; gap: 7px;
	border-top: 1px solid rgba(255,255,255,.07);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.pt-cd-bitrow {
	display: block; width: max-content;
	white-space: pre; font-size: 11px; letter-spacing: .22em;
	color: var(--pt-scan); opacity: .34;
	will-change: transform;
	animation: pt-cd-bitflow var(--bs, 16s) linear infinite;
	animation-duration: calc(var(--bs, 16s) * var(--pt-spd, 1));
	animation-delay: var(--bd, 0s);
}
@keyframes pt-cd-type {
	0%        { clip-path: inset(0 100% 0 0); }
	4%        { clip-path: inset(0 72% 0 0); }
	8%        { clip-path: inset(0 44% 0 0); }
	12%       { clip-path: inset(0 0 0 0); }
	88%       { clip-path: inset(0 0 0 0); }
	95%, 100% { clip-path: inset(0 100% 0 0); }
}
@keyframes pt-cd-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .14; } }
@keyframes pt-cd-bitflow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.pt-cd-ink { animation: none; clip-path: none; }
	.pt-cd-caret { animation: none; opacity: 1; }
	.pt-cd-bitrow { animation: none; }
}
@media (max-width: 1100px) { .pt-hero-coder { width: 400px; right: -16px; } }
@media (max-width: 900px)  { .pt-hero-coder { width: 340px; top: 56px; } }
@media (max-width: 600px)  { .pt-hero-coder { display: none; } }

/* Fiber flow — horizontal random data pulses (fiber-optic feel) */
.pt-hero-fiber {
	position: absolute; right: -120px; top: 80px;
	width: 480px; height: 480px;
	display: grid;
	grid-template-columns: repeat(16, 1fr);
	grid-template-rows: repeat(9, 1fr);
	gap: 5px;
	pointer-events: none;
}
.pt-fiber-cell {
	background: var(--pt-blue-400); opacity: .05; border-radius: var(--r-0);
	animation: pt-fiber var(--du, 3s) linear infinite;
	animation-duration: calc(var(--du, 3s) * var(--pt-spd, 1));
	animation-delay: calc((var(--c) * 70ms - var(--ph, 0ms)) * var(--pt-spd, 1));
	will-change: opacity;
}
.pt-fiber-cell.is-live { background: var(--pt-scan); }
@keyframes pt-fiber {
	0%, 100% { opacity: .05; }
	6%       { opacity: calc(.92 * var(--pt-cb, 1)); }
	15%      { opacity: calc(.30 * var(--pt-cb, 1)); }
	30%      { opacity: .05; }
}
@media (prefers-reduced-motion: reduce) {
	.pt-fiber-cell { animation: none; opacity: .12; }
	.pt-fiber-cell.is-live { opacity: .5; }
}
@media (max-width: 1100px) { .pt-hero-fiber { width: 380px; height: 380px; right: -100px; } }
@media (max-width: 900px)  { .pt-hero-fiber { width: 300px; height: 300px; right: -90px; top: 48px; gap: 4px; } }
@media (max-width: 600px)  { .pt-hero-fiber { display: none; } }

/* Soft haze — edgeless blended shimmer (Lattice variant) */
.pt-hero-haze {
	position: absolute; right: -120px; top: 80px;
	width: 480px; height: 480px;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(12, 1fr);
	gap: 0;
	pointer-events: none;
}
/* Resting grid is fully transparent -> it disappears into the blue field.
   Only the travelling square is painted (crisp periwinkle, no blur).
   --hp = per-cell peak, --hg = per-cell trailing factor -> uneven fades. */
.pt-haze-cell {
	background: var(--pt-blue-400);
	opacity: 0;
	animation: pt-haze var(--hu, 3.6s) var(--ease-out) infinite;
	animation-duration: calc(var(--hu, 3.6s) * var(--pt-spd, 1));
	animation-delay: calc(var(--hd, 0ms) * var(--pt-spd, 1));
	will-change: opacity;
}
@keyframes pt-haze {
	0%, 100% { opacity: 0; }
	16%      { opacity: var(--hp, .85); }
	46%      { opacity: calc(var(--hp, .85) * var(--hg, .25)); }
	74%      { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.pt-haze-cell { animation: none; opacity: 0; }
}
@media (max-width: 1100px) { .pt-hero-haze { width: 380px; height: 380px; right: -100px; } }
@media (max-width: 900px)  { .pt-hero-haze { width: 300px; height: 300px; right: -90px; top: 48px; } }
@media (max-width: 600px)  { .pt-hero-haze { display: none; } }

/* Matrix text — Lattice cells assemble sequentially into AI / CRM / WMS */
.pt-hero-matrix { position: absolute; right: 24px; top: 150px; pointer-events: none; }
.pt-mx-word {
	position: absolute; top: 0; right: 0;
	display: grid;
	grid-template-columns: repeat(17, 20px);
	grid-template-rows: repeat(7, 20px);
	gap: 5px;
}
.pt-mx-cell {
	background: var(--pt-blue-400); border-radius: var(--r-0); opacity: 0;
	animation: pt-mx 12s var(--ease-out) infinite;
	animation-duration: calc(12s * var(--pt-spd, 1));
	animation-delay: calc(var(--md, 0ms) * var(--pt-spd, 1));
	will-change: opacity;
}
@keyframes pt-mx {
	0%   { opacity: 0; }
	2%   { opacity: calc(.9 * var(--pt-cb, 1)); }
	19%  { opacity: calc(.9 * var(--pt-cb, 1)); }
	23%  { opacity: 0; }
	100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.pt-mx-cell { animation: none; opacity: 0; }
	.pt-mx-word:first-child .pt-mx-cell { opacity: calc(.85 * var(--pt-cb, 1)); }
}
@media (max-width: 1100px) {
	.pt-hero-matrix { right: 8px; top: 130px; }
	.pt-mx-word { grid-template-columns: repeat(17, 16px); grid-template-rows: repeat(7, 16px); gap: 4px; }
}
@media (max-width: 900px) {
	.pt-hero-matrix { top: 88px; }
	.pt-mx-word { grid-template-columns: repeat(17, 13px); grid-template-rows: repeat(7, 13px); gap: 3px; }
}
@media (max-width: 600px) { .pt-hero-matrix { display: none; } }

/* Matrix text — bright glint sweeps across the assembled word.
   Second animation drives background-color (no conflict with pt-mx opacity);
   --mg = per-column delay so the flash travels left->right after assembly. */
.pt-mx--glint .pt-mx-cell {
	animation: pt-mx 12s var(--ease-out) infinite, pt-mx-glint 12s linear infinite;
	animation-duration: calc(12s * var(--pt-spd, 1)), calc(12s * var(--pt-spd, 1));
	animation-delay: calc(var(--md, 0ms) * var(--pt-spd, 1)), calc(var(--mg, 0ms) * var(--pt-spd, 1));
	will-change: opacity, background-color;
}
@keyframes pt-mx-glint {
	0%, 100% { background-color: var(--pt-blue-400); }
	1%       { background-color: #fff; }
	4%       { background-color: var(--pt-blue-400); }
}
@media (prefers-reduced-motion: reduce) {
	.pt-mx--glint .pt-mx-cell { animation: none; }
}
/* Lottie-style bg: two dashboards shattering into tiles, ~4s each.
   Static SVGs as tile backgrounds; the macro shatter/rotate is the motion. */
.pt-hero-lottie { position: absolute; right: -120px; top: 80px; width: 480px; height: 480px; pointer-events: none; }
.pt-lt-scene { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); }
.pt-lt-scene.is-a { z-index: 2; }
.pt-lt-scene.is-b { z-index: 1; }
.pt-lt-tile {
	background-repeat: no-repeat;
	background-size: 600% 600%;
	background-position: calc(var(--col) / 5 * 100%) calc(var(--row) / 5 * 100%);
	opacity: 0;
	transform: translate(0, 0) scale(1);
	will-change: opacity, transform;
	animation: pt-lt 9s ease-in-out infinite;
}
.pt-lt-scene.is-a .pt-lt-tile { background-image: url("../img/hero/integracje.svg"); animation-delay: calc(var(--d) * -25ms); }
.pt-lt-scene.is-b .pt-lt-tile { background-image: url("../img/hero/crm-dark.svg"); animation-delay: calc(var(--d) * -25ms - 4.5s); }
@keyframes pt-lt {
	0%, 40%      { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
	50%          { opacity: 0; transform: translate(var(--sx, 0), var(--sy, 0)) scale(.12) rotate(var(--rot, 20deg)); }
	50.01%, 90%  { opacity: 0; transform: translate(var(--sx, 0), var(--sy, 0)) scale(.12) rotate(var(--rot, 20deg)); }
	100%         { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
	.pt-lt-tile { animation: none; opacity: 1; transform: none; }
	.pt-lt-scene.is-b .pt-lt-tile { opacity: 0; }
}
@media (max-width: 1100px) { .pt-hero-lottie { width: 380px; height: 380px; right: -100px; } }
@media (max-width: 900px)  { .pt-hero-lottie { width: 300px; height: 300px; right: -90px; top: 48px; } }
@media (max-width: 600px)  { .pt-hero-lottie { display: none; } }

/* Lottie-style bg, extended: three scenes (Integracje -> CRM -> smartfon
   „Aplikacje mobilne"). 21s cycle, three layers offset by 7s; each scene is
   held assembled ~6s, then shatters as the next reassembles. Reuses the
   .pt-hero-lottie container (sizing / position / responsive / .pt-hero-bg). */
.pt-lt3-scene { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); }
.pt-lt3-scene.is-a { z-index: 3; }
.pt-lt3-scene.is-b { z-index: 2; }
.pt-lt3-scene.is-c { z-index: 1; }
.pt-lt3-tile {
	background-repeat: no-repeat;
	background-size: 600% 600%;
	background-position: calc(var(--col) / 5 * 100%) calc(var(--row) / 5 * 100%);
	opacity: 0;
	transform: translate(0, 0) scale(1);
	will-change: opacity, transform;
	animation: pt-lt3 21s ease-in-out infinite;
}
.pt-lt3-scene.is-a .pt-lt3-tile { background-image: url("../img/hero/integracje.svg"); animation-delay: calc(var(--d) * -25ms); }
.pt-lt3-scene.is-b .pt-lt3-tile { background-image: url("../img/hero/smartphone.svg"); animation-delay: calc(var(--d) * -25ms - 7s); }
.pt-lt3-scene.is-c .pt-lt3-tile { background-image: url("../img/hero/crm-dark.svg"); animation-delay: calc(var(--d) * -25ms - 14s); }
@keyframes pt-lt3 {
	0%, 28%      { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
	34%          { opacity: 0; transform: translate(var(--sx, 0), var(--sy, 0)) scale(.12) rotate(var(--rot, 20deg)); }
	34.01%, 94%  { opacity: 0; transform: translate(var(--sx, 0), var(--sy, 0)) scale(.12) rotate(var(--rot, 20deg)); }
	100%         { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
	.pt-lt3-tile { animation: none; opacity: 1; transform: none; }
	.pt-lt3-scene.is-b .pt-lt3-tile, .pt-lt3-scene.is-c .pt-lt3-tile { opacity: 0; }
}

/* Lottie-style bg, extended to four scenes (Integracje -> CRM -> smartfon
   „Aplikacje mobilne" -> „Automatyzacje AI"). 28s cycle, four layers offset
   by 7s; each scene is held assembled ~6s, then shatters as the next
   reassembles. Reuses the .pt-hero-lottie container. */
.pt-lt4-scene { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); }
.pt-lt4-scene.is-a { z-index: 4; }
.pt-lt4-scene.is-b { z-index: 3; }
.pt-lt4-scene.is-c { z-index: 2; }
.pt-lt4-scene.is-d { z-index: 1; }
.pt-lt4-tile {
	background-repeat: no-repeat;
	background-size: 600% 600%;
	background-position: calc(var(--col) / 5 * 100%) calc(var(--row) / 5 * 100%);
	opacity: 0;
	transform: translate(0, 0) scale(1);
	will-change: opacity, transform;
	animation: pt-lt4 28s ease-in-out infinite;
}
.pt-lt4-scene.is-a .pt-lt4-tile { background-image: url("../img/hero/integracje.svg"); animation-delay: calc(var(--d) * -25ms); }
.pt-lt4-scene.is-b .pt-lt4-tile { background-image: url("../img/hero/automation-ai.svg"); animation-delay: calc(var(--d) * -25ms - 7s); }
.pt-lt4-scene.is-c .pt-lt4-tile { background-image: url("../img/hero/smartphone.svg"); animation-delay: calc(var(--d) * -25ms - 14s); }
.pt-lt4-scene.is-d .pt-lt4-tile { background-image: url("../img/hero/crm-dark.svg"); animation-delay: calc(var(--d) * -25ms - 21s); }
@keyframes pt-lt4 {
	0%, 22%      { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
	27%          { opacity: 0; transform: translate(var(--sx, 0), var(--sy, 0)) scale(.12) rotate(var(--rot, 20deg)); }
	27.01%, 95%  { opacity: 0; transform: translate(var(--sx, 0), var(--sy, 0)) scale(.12) rotate(var(--rot, 20deg)); }
	100%         { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
	.pt-lt4-tile { animation: none; opacity: 1; transform: none; }
	.pt-lt4-scene.is-b .pt-lt4-tile, .pt-lt4-scene.is-c .pt-lt4-tile, .pt-lt4-scene.is-d .pt-lt4-tile { opacity: 0; }
}

.pt-hero-inner { position: relative; max-width: var(--pt-maxw); margin: 0 auto; }
/* Hero content rotator: panels stacked in one grid cell so the box sizes to
   the tallest panel (no layout jump); only .is-active is shown. */
.pt-hero-rotator { display: grid; }
.pt-hero-panel { grid-area: 1 / 1; opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) var(--ease-out); }
.pt-hero-panel.is-active { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .pt-hero-panel { transition: none; } }
/* Per-panel image: copy on the left, figure on the right (red-rect spot). */
.pt-hero-panel:not(.has-figure) { display: grid; }
.pt-hero-panel.has-figure { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 4vw, 72px); align-items: stretch; }
/* Copy fills the (equal-height) panel; CTA + stats are pinned to the bottom
   so they stay put across panel transitions and never jump. */
.pt-hero-copy { min-width: 0; min-height: 100%; display: flex; flex-direction: column; }
.pt-hero-copy .pt-hero-sub { margin-bottom: 40px; }
.pt-hero-copy .pt-hero-cta { margin-top: auto; }
/* Built-in graphic glides between panels: longer, eased opacity + scale,
   so switching panels reads as a fluid graphic-to-graphic transition. */
.pt-hero-figure { position: relative; margin: 0; min-width: 0; align-self: center; opacity: 0; transform: scale(.94); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.pt-hero-panel.is-active .pt-hero-figure { opacity: 1; transform: scale(1); }
.pt-hero-panel.is-active .pt-hero-figure:hover { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
	.pt-hero-figure { transition: none; transform: none; opacity: 1; }
	.pt-hero-panel.is-active .pt-hero-figure:hover { transform: none; }
}
.pt-hero-fig-img { display: block; width: 100%; height: auto; }
.pt-hero-fig-svg { display: block; width: 100%; height: auto; }
.pt-hero-figure--blend { /* transparent SVG already merges with the hero field */ }
/* Hover: the graphic enlarges slightly. Scales the inner element (separate
   from the figure container's panel-glide transform) so they never fight. */
.pt-hero-fig-img, .pt-hero-fig-svg { transform-origin: center; transition: transform .3s var(--ease-out); }
.pt-hero-figure:hover .pt-hero-fig-img,
.pt-hero-figure:hover .pt-hero-fig-svg { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
	.pt-hero-fig-img, .pt-hero-fig-svg { transition: none; }
	.pt-hero-figure:hover .pt-hero-fig-img,
	.pt-hero-figure:hover .pt-hero-fig-svg { transform: none; }
}
.pt-hero-fig-square { position: absolute; left: -24px; bottom: -24px; width: 96px; height: 96px; background: var(--pt-blue-400); z-index: -1; }
.pt-hero-figcaption { margin-top: 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; line-height: 1.5; color: rgba(255, 255, 255, .6); }
@media (max-width: 900px) {
	.pt-hero-panel.has-figure { grid-template-columns: 1fr; gap: 32px; }
	.pt-hero-figure { order: 2; }
}
.pt-hero-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--pt-blue-200); margin-bottom: 24px; font-weight: 500; }
.pt-hero-title { font-size: var(--fs-display-xl); line-height: 1.02; letter-spacing: -.025em; color: #fff; max-width: 16ch; margin: 0; }
.pt-hero-sub { font-size: var(--fs-body-lg); line-height: 1.55; color: rgba(255,255,255,.78); max-width: 560px; margin: 28px 0 0; }
.pt-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.pt-hero-cta .btn-primary { background: #fff; color: var(--pt-blue-700); }
.pt-hero-cta .btn-primary:hover { background: var(--pt-blue-050); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.pt-hero-cta .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.pt-hero-cta .btn-secondary:hover { background: rgba(255,255,255,.08); }

/* Compact page header (interior pages / archives) */
.pt-page-header { background: var(--pt-blue-700); color: #fff; padding: 72px var(--pt-gutter); position: relative; overflow: hidden; }
.pt-page-header-square { position: absolute; right: -80px; top: -40px; width: 280px; height: 280px; background: var(--pt-blue-400); opacity: .7; }
.pt-page-header-inner { position: relative; max-width: var(--pt-maxw); margin: 0 auto; }

/* Editorial breathing room — gap BELOW the title section (between the
   blue title band and the first content block), and between the last
   content block and the footer. Aligns with brand DNA „white space
   carries the weight"; the title section still sits flush against the
   nav above (original behaviour). Home page (.pt-hero without --page
   modifier) is unaffected — it paints its own ambient field. */
.pt-page-header,
.pt-hero--page { margin-bottom: var(--sp-7); }
.pt-main { margin-bottom: var(--sp-7); }
@media (max-width: 700px) {
	.pt-page-header,
	.pt-hero--page { margin-bottom: var(--sp-6); }
	.pt-main { margin-bottom: var(--sp-6); }
}
.pt-page-title { font-size: var(--fs-display-md); color: #fff; margin: 12px 0 0; letter-spacing: -.025em; }
.pt-page-desc { color: rgba(255,255,255,.78); margin: 16px 0 0; max-width: 60ch; }

/* Animated page header (per-page opt-in) — reuses the hero background system
   with a single eyebrow + H1 + optional subtitle (no rotator/CTA). */
.pt-hero--page { padding: 72px var(--pt-gutter); }
.pt-hero--page .pt-hero-inner { display: block; }
.pt-hero--page .pt-hero-eyebrow { margin-bottom: 12px; }
.pt-hero--page .pt-hero-title { font-size: var(--fs-display-md); max-width: none; }
.pt-hero--page .pt-hero-sub { max-width: 640px; margin: 18px 0 0; }

/* ── Practice / product grid ──────────────────────────────── */
.pt-prod-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--border-1); border-left: 1px solid var(--border-1); }
.pt-prod-card { padding: 40px 36px; border-right: 1px solid var(--border-1); border-bottom: 1px solid var(--border-1); background: #fff; position: relative; overflow: hidden; transition: background var(--dur-base) var(--ease-out); }
.pt-prod-card:hover { background: var(--pt-blue-050); }
.pt-prod-media { margin: 0 0 24px; border-radius: var(--r-0); overflow: hidden; background: var(--pt-blue-050); aspect-ratio: 16 / 10; }
.pt-prod-media-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pt-prod-media--anim { background: var(--pt-blue-700); }

/* Efekt „okno": szer. kontenera × 200px. Statyczny kadr, bez ruchu.
   Hover: zoom obiektywu (scale 1.10). */
.pt-prod-media--effect-window { aspect-ratio: auto; height: 200px; width: 100%; position: relative; }
.pt-prod-media--effect-window .pt-prod-media-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	transition: scale 900ms var(--ease-out);
	will-change: scale;
	scale: 1;
}
.pt-prod-card:hover .pt-prod-media--effect-window .pt-prod-media-img,
.pt-prod-card:focus-within .pt-prod-media--effect-window .pt-prod-media-img { scale: 1.1; }
@media (prefers-reduced-motion: reduce) {
	.pt-prod-media--effect-window .pt-prod-media-img { transition: none; }
	.pt-prod-card:hover .pt-prod-media--effect-window .pt-prod-media-img,
	.pt-prod-card:focus-within .pt-prod-media--effect-window .pt-prod-media-img { scale: 1; }
}
.pt-prod-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--pt-blue-700); text-transform: uppercase; font-weight: 500; margin-bottom: 18px; }
.pt-prod-title { font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; margin-bottom: 12px; }
.pt-prod-body { font-size: 15px; line-height: 1.55; color: var(--fg-2); max-width: 38ch; margin-bottom: 20px; }
.pt-prod-bullets { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 8px; }
.pt-prod-bullets li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--fg-1); font-family: var(--font-mono); }
.pt-bullet-dot { width: 6px; height: 6px; background: var(--pt-blue-400); flex-shrink: 0; }
.pt-prod-link { font-family: var(--font-mono); font-size: 13px; color: var(--pt-blue-700); font-weight: 500; }
.pt-prod-link:hover { color: var(--pt-blue-900); }
.pt-prod-card > :not(.pt-prod-accent) { position: relative; z-index: 1; }
.pt-prod-accent { position: absolute; z-index: 0; width: 120px; height: 120px; background: var(--pt-blue-400); opacity: 0; transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out); }
.pt-prod-card:nth-child(1) .pt-prod-accent { right: -40px; bottom: -40px; transform: translate(20px, 20px); }
.pt-prod-card:nth-child(2) .pt-prod-accent { left: -40px; bottom: -40px; transform: translate(-20px, 20px); }
.pt-prod-card:nth-child(3) .pt-prod-accent { right: -40px; top: -40px; transform: translate(20px, -20px); }
.pt-prod-card:nth-child(4) .pt-prod-accent { left: -40px; top: -40px; transform: translate(-20px, -20px); }
.pt-prod-card:hover .pt-prod-accent { transform: translate(0, 0); opacity: .22; }

/* ── Case study band ──────────────────────────────────────── */
.pt-case { background: var(--pt-blue-800); color: #fff; padding: 96px var(--pt-gutter); position: relative; overflow: hidden; }
.pt-case-inner { max-width: var(--pt-maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.pt-case-title { font-size: var(--fs-display-md); line-height: 1.1; letter-spacing: -.02em; margin: 12px 0 24px; color: #fff; max-width: 18ch; }
.pt-case-body { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.78); max-width: 50ch; margin-bottom: 32px; }
.pt-case-stats { display: grid; grid-template-columns: repeat(3, max-content); gap: 48px; margin-bottom: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); }
.pt-case-num { font-family: var(--font-display); font-size: 40px; font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--pt-blue-300); }
.pt-case-num small { font-size: 22px; color: rgba(255,255,255,.5); }
.pt-case-lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: 6px; }
.pt-case-link { font-family: var(--font-mono); font-size: 13px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 4px; }
.pt-case-link:hover { color: var(--pt-blue-200); border-color: var(--pt-blue-200); }
.pt-case-right { position: relative; }
.pt-case-image { position: relative; aspect-ratio: 4/3; }
.pt-case-image img { width: 100%; height: 100%; object-fit: cover; }
.pt-img-placeholder { background: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 14px, rgba(255,255,255,.06) 14px 28px); border: 1px dashed rgba(255,255,255,.25); width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: rgba(255,255,255,.55); }
.pt-img-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.pt-case-image-square { position: absolute; bottom: -28px; left: -28px; width: 100px; height: 100px; background: var(--pt-blue-400); z-index: -1; }

/* ── CTA band ─────────────────────────────────────────────── */
.pt-cta { background: var(--pt-blue-700); color: #fff; padding: 80px var(--pt-gutter); position: relative; overflow: hidden; }
.pt-cta-square { position: absolute; left: -60px; bottom: -60px; width: 240px; height: 240px; background: var(--pt-blue-400); opacity: .55; }
.pt-cta-inner { position: relative; max-width: var(--pt-maxw); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; }
.pt-cta-title { font-size: var(--fs-display-md); color: #fff; margin: 12px 0 0; max-width: 18ch; }

/* ── Content / prose (WordPress) ──────────────────────────── */
.pt-content-wrap { max-width: var(--pt-maxw); margin-inline: auto; padding: clamp(48px,3rem+3vw,96px) var(--pt-gutter); display: grid; grid-template-columns: minmax(0,1fr); gap: 64px; }
.pt-content-wrap.has-sidebar { grid-template-columns: minmax(0,1fr) 320px; }
.pt-prose { max-width: none; }
.pt-prose > * + * { margin-top: var(--sp-5); }
.pt-prose h2 { font-size: var(--fs-h2); margin-top: var(--sp-8); }
.pt-prose h3 { font-size: var(--fs-h3); margin-top: var(--sp-7); }
.pt-prose ul, .pt-prose ol { padding-left: 1.25em; }
.pt-prose li { margin-bottom: var(--sp-2); }
.pt-prose img { border-radius: var(--r-2); }
.pt-prose a { border-bottom: 1px solid currentColor; }
.pt-prose blockquote {
	border-left: var(--bw-strong) solid var(--pt-blue-400);
	padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
	margin: var(--sp-6) 0; color: var(--fg-2); font-size: var(--fs-body-lg);
}
.pt-prose pre { background: var(--pt-ink-1000); color: #E2E6FE; padding: var(--sp-5); overflow: auto; border-radius: var(--r-2); font-size: 14px; }
.pt-prose :not(pre) > code { background: var(--pt-blue-050); padding: 2px 6px; border-radius: var(--r-1); }
.pt-prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); }
.pt-prose th, .pt-prose td { border: 1px solid var(--border-1); padding: 10px 14px; text-align: left; }
.pt-prose th { background: var(--pt-ink-050); font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.wp-caption-text, figcaption { font-size: var(--fs-caption); color: var(--fg-3); margin-top: var(--sp-2); font-family: var(--font-mono); }

/* ── Editorial components for case study content ──────────────
   Reusable classes for rich content in pt_case posts (or any page).
   Inspired by Pointech print collateral (ulotka-brand.html) — bring
   the same brand-aligned components to web content. Add to any post
   via Custom HTML block or via the seeder content_html field. */

/* Mono section eyebrow „// LABEL" — same style as Customizer
   eyebrows on home page sections. */
.pt-eyebrow-label {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	color: var(--pt-blue-700);
	letter-spacing: var(--tr-eyebrow);
	text-transform: uppercase;
	margin: var(--sp-8) 0 var(--sp-5) !important;
	display: block;
}
.pt-eyebrow-label::before { content: '// '; opacity: 0.5; }

/* Stat tiles grid — dark cards with mono accent number (AI, 360°, 0, 3×).
   4-col on desktop, 2-col on mobile. Stat number in teal, label in cool
   white on near-black bg with periwinkle top-left accent bar. */
.pt-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: var(--sp-6) 0 !important;
}
.pt-stats-grid > * { margin-top: 0 !important; }
.pt-stat-tile {
	background: var(--pt-ink-900);
	color: #fff;
	padding: 32px 16px;
	text-align: center;
	border: 1px solid var(--pt-ink-700);
	position: relative;
}
.pt-stat-tile::before {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 24px; height: 3px;
	background: var(--pt-blue-400);
}
.pt-stat-tile__num {
	font-family: var(--font-mono);
	font-size: 36px;
	font-weight: 700;
	color: var(--pt-scan);
	line-height: 1;
	margin-bottom: 12px;
	letter-spacing: -0.02em;
	display: block;
}
.pt-stat-tile__label {
	font-size: 13px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.85);
	display: block;
}
@media (max-width: 700px) {
	.pt-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.pt-stat-tile { padding: 24px 12px; }
	.pt-stat-tile__num { font-size: 28px; }
}

/* Callout box — light blue background, periwinkle left accent bar.
   Used for "Dla kogo" type framing — set context, soft visual weight. */
.pt-callout {
	background: var(--pt-blue-050);
	padding: 24px 32px;
	border-left: 4px solid var(--pt-blue-400);
	margin: var(--sp-6) 0 !important;
}
.pt-callout > * { margin-top: 0 !important; }
.pt-callout > * + * { margin-top: var(--sp-4) !important; }
.pt-callout p { font-size: 16px; line-height: 1.65; }
.pt-callout strong { color: var(--pt-blue-700); }

/* Highlight dark — ink background with teal left bar. Strong attention
   grabber, used for key claims (tracking explanation, security
   statement, etc). */
.pt-highlight-dark {
	background: var(--pt-ink-900);
	color: #fff;
	padding: 28px 32px;
	border-left: 4px solid var(--pt-scan);
	margin: var(--sp-7) 0 !important;
}
.pt-highlight-dark > * { margin-top: 0 !important; }
.pt-highlight-dark > * + * { margin-top: var(--sp-4) !important; }
.pt-highlight-dark p { color: rgba(255, 255, 255, 0.92); line-height: 1.65; }
.pt-highlight-dark strong { color: var(--pt-blue-400); font-weight: 600; }
.pt-highlight-label {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: var(--tr-eyebrow);
	color: var(--pt-scan);
	text-transform: uppercase;
	display: block;
}
.pt-highlight-label::before { content: '// '; opacity: 0.6; }

/* Workflow timeline — numbered steps with mono timestamps. Alternating
   row colors, periwinkle number block, teal time. */
.pt-workflow {
	border: 1px solid var(--pt-ink-200);
	margin: var(--sp-6) 0 !important;
}
.pt-workflow > * { margin-top: 0 !important; }
.pt-workflow-step {
	display: grid;
	grid-template-columns: 60px 1fr;
	border-bottom: 1px solid var(--pt-ink-200);
}
.pt-workflow-step:last-child { border-bottom: none; }
.pt-workflow-step:nth-child(even) { background: var(--pt-ink-050); }
.pt-workflow-step__num {
	background: var(--pt-blue-700);
	color: #fff;
	font-family: var(--font-mono);
	font-size: 20px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: -0.02em;
}
.pt-workflow-step__body { padding: 16px 24px; line-height: 1.6; }
.pt-workflow-step__time {
	font-family: var(--font-mono);
	color: var(--pt-scan);
	font-weight: 700;
	margin-right: 8px;
	letter-spacing: 0.02em;
}

/* Features grid — 2-column layout of cards with mono-numbered badge.
   Each card has: square mono number (01, 02...) in periwinkle, title,
   body with first emphasis in periwinkle bold. Used for listing
   capabilities / features (Sprzedaż, Operacje sections). */
.pt-features-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: var(--sp-6) 0 !important;
}
.pt-features-grid > * { margin-top: 0 !important; }
.pt-feature {
	display: flex;
	gap: 16px;
	background: var(--pt-blue-050);
	padding: 20px;
	border-left: 2px solid var(--pt-blue-700);
}
.pt-feature-num {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	background: var(--pt-blue-700);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.02em;
}
.pt-feature-content { flex: 1; min-width: 0; }
.pt-feature-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--pt-ink-1000);
	margin-bottom: 8px;
	letter-spacing: -0.01em;
	line-height: 1.3;
}
.pt-feature-body {
	font-size: 14px;
	line-height: 1.55;
	color: var(--pt-ink-700);
}
.pt-feature-body strong { color: var(--pt-blue-700); font-weight: 600; }
@media (max-width: 700px) {
	.pt-features-grid { grid-template-columns: 1fr; gap: 12px; }
	.pt-feature { padding: 16px; }
}

/* Why grid — 3-column cards with top accent bar (for „Dlaczego" sections).
   Different visual rhythm from features (no number badges, top accent
   instead of left, slightly more padding). */
.pt-why-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 16px;
	margin: var(--sp-6) 0 !important;
}
.pt-why-grid > * { margin-top: 0 !important; }
.pt-why-card {
	background: var(--pt-blue-050);
	padding: 24px 22px;
	border-top: 2px solid var(--pt-blue-700);
	position: relative;
}
.pt-why-card::before {
	content: '';
	position: absolute;
	top: -2px;
	left: 0;
	width: 32px;
	height: 2px;
	background: var(--pt-scan);
}
.pt-why-card-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--pt-ink-1000);
	margin-bottom: 10px;
	line-height: 1.3;
	letter-spacing: -0.01em;
}
.pt-why-card-body {
	font-size: 14px;
	line-height: 1.55;
	color: var(--pt-ink-700);
}
.pt-why-card-body strong { color: var(--pt-blue-700); font-weight: 600; }
@media (max-width: 900px) { .pt-why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pt-why-grid { grid-template-columns: 1fr; } }

/* Contact Form 7 — Pointech brand styling. Overrides CF7 default
   visual to match the rest of the site (sharp corners, mono labels,
   periwinkle accents, cool input borders). Targets .wpcf7 wrapper
   that CF7 generates automatically. */
.wpcf7 { margin: var(--sp-6) 0; }
.wpcf7-form { display: flex; flex-direction: column; gap: var(--sp-5); }
.wpcf7-form p { margin: 0; }

.pt-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-5);
}
.pt-form-row > p { margin: 0; }
@media (max-width: 700px) {
	.pt-form-row { grid-template-columns: 1fr; }
}

.wpcf7-form label {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	color: var(--pt-blue-700);
	letter-spacing: var(--tr-eyebrow);
	text-transform: uppercase;
	margin: 0 0 8px;
	line-height: 1.4;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--pt-ink-300);
	background: #fff;
	color: var(--pt-ink-1000);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.5;
	border-radius: 0;
	transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
	box-sizing: border-box;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--pt-blue-700);
	box-shadow: 0 0 0 3px var(--pt-blue-100);
}
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
	color: var(--pt-ink-400);
}
.wpcf7-form textarea { min-height: 140px; resize: vertical; }

.wpcf7-form .wpcf7-not-valid { border-color: var(--pt-danger) !important; }
.wpcf7-not-valid-tip {
	color: var(--pt-danger);
	font-size: 13px;
	margin: 6px 0 0;
	font-family: var(--font-mono);
	letter-spacing: 0.01em;
}

/* Submit button — same as .pt-cta__btn but specific to CF7 */
.wpcf7-form .wpcf7-submit,
.wpcf7-form .pt-form-submit {
	display: inline-block;
	padding: 14px 32px;
	background: var(--pt-blue-700);
	color: #fff;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: var(--tr-button);
	text-transform: uppercase;
	border: none;
	border-radius: 0;
	cursor: pointer;
	transition: background var(--dur-base) var(--ease-out);
	margin-top: var(--sp-3);
}
.wpcf7-form .wpcf7-submit:hover,
.wpcf7-form .wpcf7-submit:focus {
	background: var(--pt-blue-900);
}
.wpcf7-form .wpcf7-submit:disabled {
	background: var(--pt-ink-300);
	cursor: wait;
}

/* Spinner during submission */
.wpcf7-spinner {
	background-color: var(--pt-blue-400);
	width: 16px;
	height: 16px;
	margin-left: 12px;
	vertical-align: middle;
}

/* Response messages — success / error states */
.wpcf7-response-output {
	padding: 14px 18px !important;
	border-radius: 0 !important;
	margin: var(--sp-5) 0 0 !important;
	font-size: 14px;
	border: 1px solid !important;
	border-left-width: 4px !important;
}
.wpcf7 form.sent .wpcf7-response-output {
	background: var(--pt-success-bg);
	border-color: var(--pt-success) !important;
	color: var(--pt-success);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	background: var(--pt-danger-bg);
	border-color: var(--pt-danger) !important;
	color: var(--pt-danger);
}

/* CTA — dark callout block at end of content. Ink background, centered
   teal accent line on top, mono eyebrow + big white title + light blue
   subtitle + periwinkle action button. Used for end-of-article „Take
   the next step" moments — same component as ulotka-brand.html CTA. */
.pt-cta {
	background: var(--pt-ink-900);
	color: #fff;
	padding: 56px 48px;
	text-align: center;
	margin: var(--sp-8) 0 !important;
	position: relative;
	overflow: hidden;
	border: 1px solid var(--pt-ink-700);
}
.pt-cta > * { margin-top: 0 !important; }
.pt-cta::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 120px;
	height: 4px;
	background: var(--pt-scan);
}
.pt-cta__eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: var(--tr-eyebrow);
	color: var(--pt-scan);
	text-transform: uppercase;
	margin-bottom: 20px !important;
	font-weight: 600;
	display: block;
}
.pt-cta__eyebrow::before { content: '// '; opacity: 0.6; }
.pt-cta__title {
	font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem) !important;
	font-weight: 800 !important;
	margin: 0 0 14px !important;
	letter-spacing: var(--tr-display) !important;
	line-height: 1.1 !important;
	color: #fff !important;
}
.pt-cta__subtitle {
	font-size: 17px !important;
	color: var(--pt-blue-200) !important;
	margin: 0 0 32px !important;
	font-weight: 400;
	line-height: 1.5;
}
.pt-cta__btn {
	display: inline-block;
	padding: 14px 32px;
	background: var(--pt-blue-400);
	color: #fff !important;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: var(--tr-button);
	text-transform: uppercase;
	text-decoration: none !important;
	border-bottom: none !important;
	transition: background var(--dur-base) var(--ease-out);
}
.pt-cta__btn:hover,
.pt-cta__btn:focus { background: var(--pt-blue-300); color: #fff !important; }
@media (max-width: 700px) {
	.pt-cta { padding: 40px 24px; }
	.pt-cta__btn { padding: 12px 24px; font-size: 12px; }
}

/* Stack table — monospace rows for tech stack / spec listings.
   Periwinkle category, ink-grey value, alternate styling for scan. */
.pt-stack-table {
	background: var(--pt-ink-050);
	border: 1px solid var(--pt-ink-200);
	margin: var(--sp-6) 0 !important;
}
.pt-stack-table > * { margin-top: 0 !important; }
.pt-stack-row {
	display: grid;
	grid-template-columns: 180px 1fr;
	padding: 14px 24px;
	border-bottom: 1px solid var(--pt-ink-200);
	font-family: var(--font-mono);
	font-size: 13px;
	align-items: center;
	gap: 12px;
}
.pt-stack-row:last-child { border-bottom: none; }
.pt-stack-row strong {
	color: var(--pt-blue-700);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: var(--tr-eyebrow);
}
.pt-stack-row span { color: var(--pt-ink-700); letter-spacing: 0.01em; }
@media (max-width: 700px) {
	.pt-stack-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 16px; }
}

/* WP alignment */
.alignwide { width: min(100%, 1100px); margin-inline: auto; }
.alignfull { width: 100%; }
.alignleft { float: left; margin: 0 var(--sp-5) var(--sp-4) 0; }
.alignright { float: right; margin: 0 0 var(--sp-4) var(--sp-5); }
.aligncenter { display: block; margin-inline: auto; }
.sticky .pt-card { outline: 2px solid var(--pt-blue-400); }
.bypostauthor > .comment-body { border-left: 3px solid var(--pt-blue-400); padding-left: var(--sp-4); }

/* ── Thumbnails with brand accent ─────────────────────────── */
.pt-thumb { position: relative; margin: 0 0 var(--sp-5); }
.pt-thumb-img { display: block; width: 100%; height: auto; }
.pt-thumb-square { position: absolute; bottom: -18px; left: -18px; width: 72px; height: 72px; background: var(--pt-blue-400); z-index: -1; }

/* General PT page template — featured image banner.
   Full content width strip with editor-selectable height (200/250/300 px)
   set per page via the „Pointech — Banner" meta box. Hover-zoom mechanics
   inherited from .pt-prod-media--effect-window (the home page „Co robimy"
   card „Okno" effect) for visual consistency across the site.
   Margin-top on .pt-prose--after-banner keeps banner+content tight inside
   one .pt-section so vertical rhythm isn't doubled. */
.pt-banner {
	margin: 0;
	width: 100%;
	overflow: hidden;
	background: var(--pt-blue-050);
	position: relative;
}
.pt-banner--h200 { height: 200px; }
.pt-banner--h250 { height: 250px; }
.pt-banner--h300 { height: 300px; }
.pt-banner--h350 { height: 350px; }
.pt-banner--h400 { height: 400px; }
.pt-banner-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--ease-out);
	will-change: transform;
}
.pt-banner:hover .pt-banner-img,
.pt-banner:focus-within .pt-banner-img { transform: scale(1.08); }
.pt-prose--after-banner { margin-top: var(--sp-7); }

/* General PT template — tight top gap between the page header and the
   first content section (banner / prose). Default spacing is
   page-header margin-bottom (48 px) + section padding-top (~96 px) =
   ~144 px. This override brings it to ~32 px (~1/4) so the banner sits
   visually close to the title band. Other templates keep default rhythm.
   Body-class attribute selector ([class*=...]) handles both WP body-class
   naming variants (clean + verbose). */
body[class*="page-template-tpl-general-pt"] .pt-page-header,
body[class*="page-template-tpl-general-pt"] .pt-hero--page {
	margin-bottom: 0;
}
body[class*="page-template-tpl-general-pt"] .pt-section:first-of-type {
	padding-top: var(--sp-6);
}
@media (max-width: 700px) {
	.pt-banner--h200 { height: 160px; }
	.pt-banner--h250 { height: 200px; }
	.pt-banner--h300 { height: 240px; }
	.pt-banner--h350 { height: 280px; }
	.pt-banner--h400 { height: 320px; }
	body[class*="page-template-tpl-general-pt"] .pt-section:first-of-type {
		padding-top: var(--sp-5);
	}
}
@media (prefers-reduced-motion: reduce) {
	.pt-banner-img { transition: none; }
	.pt-banner:hover .pt-banner-img,
	.pt-banner:focus-within .pt-banner-img { transform: none; }
}

/* (Removed) Single Realizacja used to crop .pt-thumb-img to 16:5 via a
   hardcoded aspect-ratio rule. Replaced by the editor-controlled
   .pt-banner--h{N} system (200/250/300/350/400 px) — see single.php
   render branch for pt_case / pt_product and inc/banner.php meta box. */

/* ── Blog / archive cards ─────────────────────────────────── */
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: 32px; }
.pt-card { background: #fff; border: 1px solid var(--border-1); border-radius: var(--r-2); box-shadow: var(--shadow-1); position: relative; overflow: hidden; transition: box-shadow var(--dur-base) var(--ease-out); display: flex; flex-direction: column; }
.pt-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--pt-blue-400); transform: translateX(-2px); transition: transform var(--dur-base) var(--ease-out); }
.pt-card:hover { box-shadow: var(--shadow-2); }
.pt-card:hover::before { transform: translateX(0); }
.pt-card .pt-thumb { margin: 0; }
.pt-card .pt-thumb-img { aspect-ratio: 3/2; object-fit: cover; }
.pt-card-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pt-card-title { font-size: 20px; font-weight: 600; line-height: 1.25; margin: 0; }
.pt-card-title a { color: var(--fg-1); }
.pt-card-title a:hover { color: var(--pt-blue-700); }
.pt-card-excerpt { font-size: 15px; color: var(--fg-2); margin: 0; }
.pt-card-meta { margin-top: auto; padding-top: 12px; font-size: 12px; color: var(--fg-3); }

/* List variant — used by Realizacje and Sprzęt Auto-ID archives.
   Single column of full-width „rectangle" cards: thumbnail on the left,
   editorial preview (tag · title · excerpt · CTA) on the right. The
   thumbnail's height is locked by aspect-ratio 4:3 on the wrapper so the
   whole card has a predictable vertical rhythm regardless of body length
   (without this lock, oversized featured images would inflate the card).
   Below 700 px the card stacks back to image-on-top for mobile. */
.pt-grid--list { grid-template-columns: 1fr; gap: 24px; }
.pt-grid--list .pt-card { flex-direction: row; align-items: stretch; overflow: hidden; }
.pt-grid--list .pt-card .pt-thumb { flex: 0 0 27%; max-width: 27%; aspect-ratio: 16 / 10; overflow: hidden; margin: 0; }
.pt-grid--list .pt-card .pt-thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--ease-out);
	will-change: transform;
}
/* Hover / focus zoom — same physics as the home „okno" effect: the
   image overflows by ~8% on hover, the .pt-thumb wrapper clips edges. */
.pt-grid--list .pt-card:hover .pt-thumb-img,
.pt-grid--list .pt-card:focus-within .pt-thumb-img { transform: scale(1.08); }

.pt-grid--list .pt-card-body { padding: 32px 36px; gap: 14px; justify-content: center; }
.pt-grid--list .pt-card-title { font-size: 26px; line-height: 1.2; }
.pt-grid--list .pt-card-excerpt { font-size: 16px; line-height: 1.55; }
.pt-grid--list .pt-card-meta { font-size: 13px; font-family: var(--font-mono); color: var(--pt-blue-700); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; }

@media (max-width: 700px) {
	.pt-grid--list .pt-card { flex-direction: column; }
	.pt-grid--list .pt-card .pt-thumb { flex: none; max-width: none; aspect-ratio: 3 / 2; }
	.pt-grid--list .pt-card-body { padding: 24px; }
	.pt-grid--list .pt-card-title { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
	.pt-grid--list .pt-card .pt-thumb-img { transition: none; }
	.pt-grid--list .pt-card:hover .pt-thumb-img,
	.pt-grid--list .pt-card:focus-within .pt-thumb-img { transform: none; }
}

/* ── Single post / entry ──────────────────────────────────── */
.pt-entry-header { margin-bottom: var(--sp-6); }
.pt-entry-title { font-size: var(--fs-display-md); margin: 12px 0; }
.pt-entry-meta { font-size: 13px; color: var(--fg-3); }
.pt-entry-footer { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--border-1); display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.pt-entry-footer a { color: var(--pt-blue-700); }
.pt-post-nav { margin-top: var(--sp-7); display: flex; justify-content: space-between; gap: 24px; font-family: var(--font-mono); font-size: 13px; }
.pt-post-nav a { color: var(--pt-blue-700); }

/* ── Pagination ───────────────────────────────────────────── */
.pt-pagination { margin-top: var(--sp-8); }
.pt-pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; font-family: var(--font-mono); }
.pt-pagination .page-numbers { display: inline-flex; min-width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--border-1); color: var(--fg-1); font-size: 14px; }
.pt-pagination .page-numbers.current { background: var(--pt-blue-700); color: #fff; border-color: var(--pt-blue-700); }
.pt-pagination a.page-numbers:hover { border-color: var(--pt-blue-700); color: var(--pt-blue-700); }

/* ── Sidebar / widgets ────────────────────────────────────── */
.pt-sidebar .widget { margin-bottom: var(--sp-7); }
.widget-title { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--pt-blue-700); margin-bottom: var(--sp-4); }
.pt-sidebar ul { list-style: none; padding: 0; margin: 0; }
.pt-sidebar li { padding: 8px 0; border-bottom: 1px solid var(--border-1); font-size: 14px; }
.pt-sidebar a { color: var(--fg-2); }
.pt-sidebar a:hover { color: var(--pt-blue-700); }

/* ── Search form ──────────────────────────────────────────── */
.search-form { display: flex; gap: 8px; }
.search-field, input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="search"], input[type="number"], textarea, select {
	font-family: var(--font-body); font-size: 15px; padding: 11px 14px;
	border: 1px solid var(--border-1); border-radius: var(--r-2);
	background: #fff; color: var(--fg-1); width: 100%;
	box-shadow: var(--shadow-inset); transition: border-color var(--dur-fast) var(--ease-out);
}
input:focus, textarea:focus, select:focus { border-color: var(--pt-blue-400); }
.search-submit { white-space: nowrap; }
label { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-2); display: block; margin-bottom: 6px; }

/* ── Comments ─────────────────────────────────────────────── */
.pt-comments { margin-top: var(--sp-9); border-top: 1px solid var(--border-1); padding-top: var(--sp-7); }
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-list .children { list-style: none; padding-left: var(--sp-6); }
.comment-body { padding: var(--sp-5) 0; border-bottom: 1px solid var(--border-1); }
.comment-author { font-weight: 600; }
.comment-meta { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); }
.comment-form p { margin-bottom: var(--sp-4); }

/* ── Contact page ─────────────────────────────────────────── */
.pt-contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; }
.pt-contact-card { background: var(--pt-ink-050); border: 1px solid var(--border-1); padding: 32px; }
.pt-contact-card dt { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--pt-blue-700); margin-top: var(--sp-5); }
.pt-contact-card dd { margin: 6px 0 0; font-size: 15px; color: var(--fg-1); }
.pt-contact-card dd a { color: var(--fg-1); }
.pt-contact-card dd a:hover { color: var(--pt-blue-700); }

/* ── 404 ──────────────────────────────────────────────────── */
.pt-404 { text-align: center; padding: clamp(80px,6rem+4vw,160px) var(--pt-gutter); }
.pt-404-code { font-family: var(--font-mono); font-size: clamp(64px,8vw,140px); color: var(--pt-blue-100); line-height: 1; letter-spacing: -.04em; }

/* ── Footer ───────────────────────────────────────────────── */
.pt-footer { background: var(--pt-ink-1000); color: rgba(255,255,255,.7); padding: 80px var(--pt-gutter) 0; }
.pt-footer-inner { max-width: var(--pt-maxw); margin: 0 auto; display: grid; grid-template-columns: 1.2fr 2fr; gap: 80px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.1); }
.pt-footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.pt-footer-logo img, .pt-footer-logo .pt-logo-svg { height: 44px; width: auto; }
.pt-footer-tag { font-size: 15px; color: rgba(255,255,255,.7); max-width: 32ch; margin-bottom: 24px; line-height: 1.5; }
.pt-footer-addr { font-size: 12px; color: rgba(255,255,255,.45); line-height: 1.7; letter-spacing: .04em; font-family: var(--font-mono); }
.pt-footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.pt-footer-head { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.pt-footer-cols ul { list-style: none; padding: 0; margin: 0; }
.pt-footer-cols a { display: block; padding: 6px 0; font-size: 14px; color: rgba(255,255,255,.65); }
.pt-footer-cols a:hover { color: #fff; }
.pt-footer-bar { max-width: var(--pt-maxw); margin: 0 auto; padding: 24px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 11px; letter-spacing: .14em; color: rgba(255,255,255,.4); font-family: var(--font-mono); text-transform: uppercase; }
.pt-footer-bar a { color: rgba(255,255,255,.5); }
.pt-footer-bar a:hover { color: #fff; }
.pt-footer-bar ul { list-style: none; display: flex; gap: 16px; padding: 0; margin: 0; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
	.pt-section-head, .pt-prod-grid, .pt-case-inner, .pt-footer-inner,
	.pt-content-wrap.has-sidebar, .pt-contact-grid { grid-template-columns: 1fr; }
	.pt-case-stats { grid-template-columns: repeat(3, 1fr); gap: 24px; }
	.pt-nav-menu, .pt-nav-cta .pt-lang { display: none; }
	.pt-nav-toggle { display: inline-flex; }
	.pt-nav.nav-open .pt-nav-menu {
		display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
		background: #fff; border-bottom: 1px solid var(--border-1); padding: 16px var(--pt-gutter); gap: 4px;
	}
	.pt-nav.nav-open .pt-nav-menu .sub-menu { position: static; display: block; box-shadow: none; border: 0; padding-left: 16px; }
}
@media (max-width: 600px) {
	.pt-case-stats { grid-template-columns: 1fr; }
	.pt-footer-cols { grid-template-columns: 1fr; }
}

/* Unified hero-background size & position. Applied only when the user
   customizes it (root gets .pt-hero-bg). Placed last so it wins over each
   mode's own absolute placement; size is driven by transform: scale() so it
   stays safe for grids, SVG and the terminal alike. */
.pt-hero-bg {
	position: absolute;
	left: var(--pt-bg-left, auto);
	right: var(--pt-bg-right, -120px);
	top: var(--pt-bg-top, 80px);
	bottom: var(--pt-bg-bottom, auto);
	transform: var(--pt-bg-tf, scale(1));
	transform-origin: var(--pt-bg-origin, right top);
}

/* Dual hero backgrounds: each background is positioned independently via its
   own .pt-hero-bg + inline --pt-bg-* vars (per-slot Customizer settings). The
   secondary (.is-bg2) is dropped on tablets so it never crowds the copy; the
   primary keeps its own mode/responsive rules. */
@media (max-width: 900px) {
	.pt-hero-bg.is-bg2 { display: none; }
}