/* =====================================================================
   JAPRIVIO Technology (/technology/) — WP3
   Warstwa strony na site.css: wyłącznie klasy tech-*, tokeny --jp-*,
   punkty łamania 720 / 1080 / 1081. Komponentów jp-* nie nadpisujemy.
   ===================================================================== */

/* ---------- Wspólne drobiazgi ---------- */
/* Fokus klawiatury nie chowa się pod paskiem nawigacji i przyklejonym jp-subnav (WCAG 2.2 „focus not obscured”). */
:root:has(.tech-hero) { scroll-padding-block-start: calc(var(--jp-nav-total) + 72px); }
/* scroll-padding już odsuwa kotwice od obu pasków; bez tego margines z site.css doliczał się drugi raz (sekcja lądowała ok. 170 px pod paskiem, jak wcześniej na CPQ). */
:root:has(.tech-hero) [id] { scroll-margin-block-start: var(--jp-s-4); }
.tech-label { margin: 0; font-size: var(--jp-fs-sm); font-weight: 600; line-height: 1.4; color: var(--jp-text); }
.tech-caveat {
  margin: 0; padding-inline-start: var(--jp-s-3); border-inline-start: 2px solid var(--jp-aqua-200);
  font-size: var(--jp-fs-xs); line-height: 1.55; color: var(--jp-text-2);
}
.tech-tags { margin-block-start: var(--jp-s-4); }

/* ---------- Hero (tekst | ilustracja; własna siatka 6:5, by H1 mieścił się w 3 wierszach) ---------- */
.tech-hero__grid { display: grid; gap: clamp(40px, 2rem + 3vw, 88px); align-items: center; }
@media (min-width: 1081px) { .tech-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
/* ---------- Otwarcie /technology/ (układ jak w CPQ: H1 na całą szerokość, lead i akcje w jednym wierszu,
   pod spodem panel zastosowań — brief s. 10: „Otwarcie i zastosowania biznesowe: co klient może usprawnić”) ---------- */
.tech-open .jp-h1.tech-open__title { max-inline-size: 24ch; }
.tech-open__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--jp-s-6) var(--jp-s-7); margin-block-start: var(--jp-s-5); }
.tech-open__lead { flex: 1 1 auto; max-inline-size: 44rem; margin: 0; color: var(--jp-text-1); }
.tech-open__row .jp-actions { flex: none; margin: 0; }
.tech-uses {
  display: grid; gap: var(--jp-s-4); margin-block-start: clamp(32px, 2rem + 2vw, 64px);
  padding: clamp(16px, .75rem + 1vw, 28px); border-radius: var(--jp-r-xl);
  background: var(--jp-frost); border: 1px solid var(--jp-glass-edge);
  box-shadow: inset 0 1px 0 var(--jp-glass-edge), var(--jp-glass-outline), var(--jp-shadow-3);
}
.tech-uses__title { margin: 0; padding-inline: 4px; font-size: var(--jp-fs-xs); font-weight: 600; color: var(--jp-brand-text); }
.tech-uses__list { display: grid; gap: var(--jp-s-2); grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.tech-use {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon icon ." "text text arrow";
  align-items: end; gap: var(--jp-s-3) var(--jp-s-2); block-size: 100%; min-block-size: 132px; padding: var(--jp-s-4);
  border-radius: var(--jp-r-lg); background: var(--jp-surface); box-shadow: inset 0 0 0 1px var(--jp-hair);
  color: var(--jp-text); text-decoration: none;
  transition: transform var(--jp-dur-2) var(--jp-ease), box-shadow var(--jp-dur-2) var(--jp-ease);
}
.tech-use__icon { grid-area: icon; align-self: start; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: var(--jp-r-md); background: var(--jp-aqua-100); color: var(--jp-brand-icon); }
.tech-use__icon svg { inline-size: 22px; block-size: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tech-use__text { grid-area: text; font-size: var(--jp-fs-sm); font-weight: 600; line-height: 1.35; }
.tech-use__arrow { grid-area: arrow; inline-size: 16px; block-size: 16px; fill: none; stroke: var(--jp-brand-text); stroke-width: 2; transition: transform var(--jp-dur-2) var(--jp-ease); }
@media (hover: hover) and (pointer: fine) {
  .tech-use:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--jp-aqua-200), var(--jp-shadow-2); }
  .tech-use:hover .tech-use__arrow { transform: translateX(3px); }
}
.tech-use:active { transform: scale(.98); transition-duration: 100ms; }
/* Pasek podsekcji nachodzi na dolną krawędź otwarcia, jak w CPQ */
.tech-open + .jp-subnav { margin-block-start: -32px; }
@media (max-width: 1080px) {
  .tech-open__row { flex-direction: column; align-items: flex-start; }
  .tech-uses__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tech-uses__list li:last-child { grid-column: 1 / -1; }
  .tech-use { min-block-size: 0; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon text arrow"; align-items: center; }
  .tech-use__icon { align-self: center; }
}
@media (max-width: 720px) {
  .tech-uses__list { grid-template-columns: 1fr; }
  .tech-open + .jp-subnav { margin-block-start: -28px; }
}

/* ---------- Od problemu do rozwiązania (brief s. 10: „Nie każdy temat musi skończyć się nową aplikacją”;
   s. 8: rezultatem rozmowy może być zmiana procesu, obecny system albo projekt technologiczny) ----------
   Schemat drzewa: problem → diagnoza → rozwidlenie na trzy równorzędne rozwiązania. */
.tech-route { --tech-line: var(--jp-turq); display: grid; justify-items: center; margin-block-start: clamp(32px, 2rem + 2vw, 64px); }
.tech-route__steps { display: grid; justify-items: center; gap: 28px; margin: 0; padding: 0; list-style: none; }
.tech-route__step {
  position: relative; display: flex; align-items: center; gap: var(--jp-s-3); min-inline-size: min(100%, 22rem);
  padding: var(--jp-s-3) var(--jp-s-5) var(--jp-s-3) var(--jp-s-3); border-radius: var(--jp-r-pill);
  background: var(--jp-surface); box-shadow: inset 0 0 0 1px var(--jp-aqua-200), var(--jp-shadow-1);
}
.tech-route__step > span:last-child { display: grid; gap: 2px; }
.tech-route__step b { font-size: var(--jp-fs-body); font-weight: 600; color: var(--jp-text); }
.tech-route__step b + span { font-size: var(--jp-fs-xs); color: var(--jp-text-2); }
.tech-route__n { display: grid; place-items: center; flex: none; inline-size: 36px; block-size: 36px; border-radius: 50%; background: var(--jp-aqua-100); color: var(--jp-brand-text); font-size: var(--jp-fs-sm); font-weight: 600; }
.tech-route__step--key { background: var(--jp-deep); box-shadow: var(--jp-shadow-2); }
.tech-route__step--key b { color: #fff; }
.tech-route__step--key b + span { color: var(--jp-on-dark-2); }
.tech-route__step--key .tech-route__n { background: rgb(255 255 255 / 10%); color: var(--jp-turq-light); }
/* Łączniki: krok → krok, diagnoza → rozwidlenie */
.tech-route__step + .tech-route__step::before,
.tech-route__label::before { content: ""; position: absolute; inset-inline-start: 50%; inline-size: 2px; background: var(--tech-line); transform: translateX(-50%); }
.tech-route__step + .tech-route__step::before { inset-block-end: 100%; block-size: 28px; }
.tech-route__label {
  position: relative; margin: 28px 0 0; padding: 6px 14px; border-radius: var(--jp-r-pill);
  background: var(--jp-canvas); box-shadow: inset 0 0 0 1px var(--jp-hair);
  font-size: var(--jp-fs-xs); font-weight: 600; letter-spacing: .02em; color: var(--jp-text-2);
}
.tech-route__label::before { inset-block-end: 100%; block-size: 28px; }
.tech-route__outcomes {
  position: relative; display: grid; gap: var(--jp-gap); grid-template-columns: repeat(3, minmax(0, 1fr));
  inline-size: 100%; margin: 28px 0 0; padding: 0; list-style: none;
}
/* Poziome ramię rozwidlenia od środka pierwszej do środka ostatniej karty, z pionowymi odnogami */
.tech-route__outcomes::before { content: ""; position: absolute; inset-block-start: -14px; inset-inline: calc((100% - 2 * var(--jp-gap)) / 6); block-size: 2px; background: var(--tech-line); }
.tech-outcome {
  position: relative; display: flex; flex-direction: column; gap: var(--jp-s-3);
  padding: clamp(20px, 1rem + 1vw, 32px); border-radius: var(--jp-r-lg);
  background: var(--jp-frost); border: 1px solid rgb(255 255 255 / 80%);
  box-shadow: inset 0 1px 0 var(--jp-glass-edge), var(--jp-glass-outline), var(--jp-shadow-2);
}
.tech-outcome::before { content: ""; position: absolute; inset-block-end: 100%; inset-inline-start: 50%; inline-size: 2px; block-size: 14px; background: var(--tech-line); transform: translateX(-50%); }
.tech-outcome > * { margin: 0; }
.tech-outcome__icon { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: var(--jp-r-md); background: var(--jp-aqua-100); color: var(--jp-brand-icon); }
.tech-outcome__icon svg { inline-size: 22px; block-size: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tech-outcome__title { font-size: var(--jp-fs-h4); font-weight: 600; line-height: 1.3; letter-spacing: -.012em; }
.tech-outcome__desc { font-size: var(--jp-fs-sm); line-height: 1.55; color: var(--jp-text-1); }
.tech-outcome__links { display: grid; gap: 4px; margin: auto 0 0; padding: var(--jp-s-3) 0 0; border-block-start: 1px solid var(--jp-hair); list-style: none; }
.tech-outcome__links .jp-link-more { font-size: var(--jp-fs-sm); }
@media (max-width: 720px) {
  .tech-route { justify-items: stretch; }
  .tech-route__steps { justify-items: stretch; }
  .tech-route__step { min-inline-size: 0; }
  .tech-route__step + .tech-route__step::before, .tech-route__label::before { inset-inline-start: 30px; }
  .tech-route__label { justify-self: start; margin-inline-start: 0; }
  .tech-route__outcomes { grid-template-columns: 1fr; }
  .tech-route__outcomes::before, .tech-outcome::before { display: none; }
  .tech-route__outcomes { margin-block-start: var(--jp-s-4); }
}

/* ---------- Część 1: projekty dedykowane ---------- */
.tech-legend { margin: var(--jp-s-2) 0 0; }
.tech-legend > div { flex-wrap: wrap; }
.tech-legend dd { font-size: var(--jp-fs-sm); color: var(--jp-text-2); }

.tech-arch { margin-block-start: var(--jp-gap) !important; }
.tech-group + .tech-group { margin-block-start: clamp(64px, 4rem + 3vw, 128px); }
.tech-group__head { display: grid; gap: var(--jp-s-3); max-inline-size: 760px; margin-block-end: clamp(24px, 1.5rem + 1vw, 40px); }
.tech-group__head > * { margin: 0; }
.tech-group__head p { font-size: var(--jp-fs-body); color: var(--jp-text-2); max-inline-size: 64ch; }

/* Duża karta: produkt (pełny materiał) albo koncepcja (przerywany kontur, lżejsze tło) */
.tech-feature {
  display: grid; gap: clamp(28px, 2rem + 2vw, 64px); align-items: start;
  padding: clamp(24px, 1.2rem + 2vw, 56px); border-radius: var(--jp-r-xl);
  background: var(--jp-frost); border: 1px solid var(--jp-glass-edge);
  box-shadow: inset 0 1px 0 var(--jp-glass-edge), var(--jp-glass-outline), var(--jp-shadow-3);
}
@media (min-width: 1081px) { .tech-feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.tech-feature__copy { display: grid; gap: var(--jp-s-4); align-content: start; }
.tech-feature__copy > * { margin: 0; }
.tech-feature__copy > p:not([class]) { font-size: var(--jp-fs-body); color: var(--jp-text-1); max-inline-size: 64ch; }
.tech-feature__title { font-size: var(--jp-fs-h2); font-weight: 600; line-height: 1.1; letter-spacing: -.028em; }
.tech-feature__lead { font-size: var(--jp-fs-lead); line-height: 1.45; letter-spacing: -.006em; color: var(--jp-text); max-inline-size: 44ch; }
.tech-feature__flow { display: grid; gap: var(--jp-s-4); padding: clamp(20px, 1rem + 1vw, 32px); border-radius: var(--jp-r-lg); background: var(--jp-surface); box-shadow: inset 0 0 0 1px var(--jp-hair); }

/* Rzeczywiste ekrany produktu, każdy z podpisem (brief s. 7 i 11) */
.tech-feature__media { align-self: start; }
.tech-screen { margin: 0; }
.tech-screen img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--jp-r-lg); background: var(--jp-surface); box-shadow: inset 0 0 0 1px var(--jp-hair), var(--jp-shadow-2); }

.tech-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--jp-s-3) var(--jp-s-5);
  padding-block: var(--jp-s-4); border-block: 1px solid var(--jp-hair);
}
.tech-facts dt { font-size: var(--jp-fs-xs); font-weight: 500; color: var(--jp-text-2); }
.tech-facts dd { margin: 2px 0 0; font-size: var(--jp-fs-sm); font-weight: 600; color: var(--jp-text); }

/* Przebieg krok po kroku (numery z licznika CSS — treść kroków zostaje tekstem) */
.tech-flow { counter-reset: tech-step; position: relative; display: grid; gap: var(--jp-s-4); margin: 0; padding: 0; list-style: none; }
.tech-flow::before { content: ""; position: absolute; inset-inline-start: 15px; inset-block: 16px; inline-size: 2px; background: var(--jp-aqua-200); }
.tech-flow li { counter-increment: tech-step; position: relative; display: grid; gap: 2px; padding-inline-start: 48px; min-block-size: 32px; align-content: center; }
.tech-flow li::before {
  content: counter(tech-step); position: absolute; inset-inline-start: 0; inset-block-start: 0;
  display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 50%;
  background: var(--jp-deep); color: var(--jp-on-dark); font-size: var(--jp-fs-xs); font-weight: 600; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 4px var(--jp-surface);
}
.tech-flow strong { font-size: var(--jp-fs-sm); font-weight: 600; color: var(--jp-text); }
.tech-flow span { font-size: var(--jp-fs-sm); line-height: 1.5; color: var(--jp-text-2); }

/* Karty koncepcji: cztery równorzędne, układ status → problem → użytkownicy → przebieg → pierwszy etap → zależności → kontakt */
.tech-concepts { display: grid; gap: var(--jp-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); align-items: stretch; }
.tech-concept {
  display: flex; flex-direction: column; gap: var(--jp-s-3);
  padding: clamp(20px, 1rem + 1vw, 32px); border-radius: var(--jp-r-lg);
  background: linear-gradient(160deg, rgb(255 255 255 / 76%), rgb(255 255 255 / 56%));
  border: 1.5px dashed var(--jp-plan-line);
}
.tech-concept > * { margin: 0; }
/* Ilustracja koncepcji 3:2 — ta sama rodzina i proporcja co obszary na /advisory/ (.adv-area__media) */
.tech-concept__media { margin: 0 0 var(--jp-s-2); }
.tech-concept__media img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; border-radius: var(--jp-r-md); background: var(--jp-aqua-50); box-shadow: inset 0 0 0 1px var(--jp-hair); }
.tech-concept__head { display: flex; align-items: center; justify-content: space-between; gap: var(--jp-s-3); flex-wrap: wrap; margin-block-end: var(--jp-s-2); }
.tech-concept__title { font-size: var(--jp-fs-h4); font-weight: 600; line-height: 1.3; letter-spacing: -.012em; }
.tech-concept__lead { font-size: var(--jp-fs-sm); color: var(--jp-text-1); }
.tech-concept__facts { display: grid; gap: var(--jp-s-4); margin-block-start: var(--jp-s-2); padding-block-start: var(--jp-s-4); border-block-start: 1px solid var(--jp-hair); }
.tech-concept__facts > div { display: grid; gap: 4px; }
.tech-concept__facts dt { font-size: var(--jp-fs-xs); font-weight: 600; color: var(--jp-text-2); }
.tech-concept__facts dd { margin: 0; font-size: var(--jp-fs-sm); line-height: 1.55; color: var(--jp-text-1); }
.tech-concept__facts dd .jp-link-more { display: flex; margin-block-start: var(--jp-s-2); }
.tech-concept__steps { counter-reset: tech-step; display: grid; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.tech-concept__steps li { counter-increment: tech-step; position: relative; padding-inline-start: 30px; min-block-size: 22px; }
.tech-concept__steps li::before {
  content: counter(tech-step); position: absolute; inset-inline-start: 0; inset-block-start: 1px;
  display: grid; place-items: center; inline-size: 20px; block-size: 20px; border-radius: 50%;
  background: var(--jp-surface); color: var(--jp-plan); box-shadow: inset 0 0 0 1.5px var(--jp-plan-line);
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.tech-concept__cta { margin-block-start: auto; padding-block-start: var(--jp-s-3); }

/* ---------- Jak pracujemy 01–04 ---------- */
.tech-process { --tech-progress: 1; }
.tech-process.is-process-ready { --tech-progress: 0; }
.tech-process__track { position: relative; }
.tech-process__line { position: absolute; inset-block-start: 22px; inset-inline: calc(100% / 12); block-size: 2px; background: var(--jp-aqua-100);
  overflow: clip; overflow-clip-margin: 16px; } /* biegnący punkt nie poszerza strony */
.tech-process__line::after {
  content: ""; position: absolute; inset: 0; transform-origin: left center; transform: scaleX(var(--tech-progress));
  background: linear-gradient(90deg, var(--jp-turq-light), var(--jp-turq) 80%, var(--jp-accent));
}
.tech-process__runner { position: absolute; inset: 0; transform: translateX(calc(var(--tech-progress) * 100%)); }
.tech-process__runner::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 50%; inline-size: 8px; block-size: 8px; border-radius: 50%;
  background: var(--jp-accent); box-shadow: var(--jp-glow-accent); transform: translate(-50%, -50%); opacity: 0;
  transition: opacity var(--jp-dur-2) var(--jp-ease);
}
.tech-process.is-process-ready:not(.is-process-complete) .tech-process__runner::before { opacity: 1; }
.tech-process__list { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.tech-process__list li { display: grid; justify-items: center; align-content: start; gap: var(--jp-s-2); padding: 0 var(--jp-s-4); text-align: center;
  transition: opacity 360ms var(--jp-ease-out), transform 500ms var(--jp-ease-out); }
.tech-process__num {
  display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%; margin-block-end: var(--jp-s-4);
  background: var(--jp-surface); color: var(--jp-brand-text); box-shadow: inset 0 0 0 1px var(--jp-aqua-200), 0 0 0 7px var(--jp-surface);
  font-size: var(--jp-fs-xs); font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background-color 280ms var(--jp-ease), color 280ms var(--jp-ease), box-shadow 280ms var(--jp-ease), transform 280ms var(--jp-ease);
}
.tech-process__title { font-size: var(--jp-fs-h4); font-weight: 600; line-height: 1.3; letter-spacing: -.012em; }
.tech-process__list p { margin: 0; max-inline-size: 28ch; font-size: var(--jp-fs-sm); color: var(--jp-text-2); }
.tech-process__list li.is-complete .tech-process__num,
.tech-process:not(.is-process-ready) .tech-process__num { background: var(--jp-deep); color: var(--jp-on-dark); box-shadow: 0 0 0 7px var(--jp-surface), var(--jp-shadow-1); }
.tech-process__list li.is-current .tech-process__num { background: var(--jp-accent); color: var(--jp-on-accent); box-shadow: 0 0 0 7px var(--jp-surface), var(--jp-glow-accent); transform: scale(1.08); }
.tech-process.is-process-ready .tech-process__list li:not(.is-complete) { opacity: .42; transform: translateY(9px); }

@media (max-width: 1080px) {
  .tech-process__track { max-inline-size: 640px; }
  .tech-process__line { inset-inline: 21px auto; inset-block: 22px 48px; inline-size: 2px; block-size: auto; }
  .tech-process__line::after { transform-origin: center top; transform: scaleY(var(--tech-progress)); }
  .tech-process__runner { transform: translateY(calc(var(--tech-progress) * 100%)); }
  .tech-process__runner::before { inset-inline-start: 50%; inset-block-start: 0; }
  .tech-process__list { grid-template-columns: 1fr; gap: var(--jp-s-6); }
  .tech-process__list li { position: relative; justify-items: start; padding: 0 0 0 64px; text-align: start; min-block-size: 44px; }
  .tech-process__num { position: absolute; inset-inline-start: 0; inset-block-start: 0; margin: 0; }
  .tech-process__title { padding-block-start: 9px; }
  .tech-process__list p { max-inline-size: 52ch; }
}
@media (min-width: 721px) and (max-width: 1080px) { .tech-process .jp-section-head--center { margin-inline: 0; text-align: start; justify-items: start; } }

/* ---------- Część 2: usługi technologiczne ---------- */
.tech-index { display: grid; gap: var(--jp-s-3); margin-block-end: clamp(48px, 3rem + 2vw, 96px); }
.tech-index ul { display: flex; flex-wrap: wrap; gap: var(--jp-s-2); margin: 0; padding: 0; list-style: none; }
.tech-index a {
  display: inline-flex; align-items: center; min-block-size: 36px; padding: 0 14px; border-radius: var(--jp-r-pill);
  background: var(--jp-surface); box-shadow: inset 0 0 0 1px var(--jp-line); color: var(--jp-text-1);
  font-size: var(--jp-fs-sm); font-weight: 600; text-decoration: none;
  transition: box-shadow var(--jp-dur-1) var(--jp-ease), color var(--jp-dur-1) var(--jp-ease);
}
.tech-index a:hover { color: var(--jp-text); box-shadow: inset 0 0 0 1px var(--jp-turq); }
@media (pointer: coarse) { .tech-index a { min-block-size: 44px; } }

.tech-services { display: grid; gap: var(--jp-gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); align-items: start; }
.tech-service__icon { margin-block-end: var(--jp-s-4); }
.tech-caption { margin-block-start: var(--jp-s-2); font-size: var(--jp-fs-xs); line-height: 1.4; color: var(--jp-text-2); }
.tech-service__actions { display: flex; flex-wrap: wrap; gap: var(--jp-s-2) var(--jp-s-5); margin: var(--jp-s-4) 0 0; }
.tech-service__kicker { margin: var(--jp-s-2) 0 0; font-size: var(--jp-fs-sm); font-weight: 600; line-height: 1.4; color: var(--jp-text); }
.tech-scope { font-size: var(--jp-fs-sm); color: var(--jp-text-1); }
.tech-scope li::marker { color: var(--jp-turq); }

/* Usługi bez dużych ilustracji (brief s. 10: zakresy bez dominujących bloków); „Projektujemy i budujemy” w siatce 2×2 */
@media (min-width: 721px) { .tech-services--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1081px) {
  .tech-service--wide { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--jp-s-5); align-items: start; }
  .tech-service--wide .tech-service__icon { margin: 0; }
}

/* ---------- Strona usługi (/technology/<usługa>/) ---------- */
.tech-page__grid { display: grid; gap: clamp(32px, 4vw, 72px); align-items: start; }
@media (min-width: 1081px) { .tech-page__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.tech-page__body { display: grid; gap: var(--jp-s-4); font-size: var(--jp-fs-body); color: var(--jp-text-1); }
.tech-page__body p { margin: 0; max-inline-size: 62ch; }
.tech-page__label { margin: var(--jp-s-4) 0 0; font-size: var(--jp-fs-h4); font-weight: 600; letter-spacing: -.012em; color: var(--jp-text); }
.tech-page__body .tech-scope { display: grid; gap: var(--jp-s-2); margin: 0; padding-inline-start: 1.1em; font-size: var(--jp-fs-body); }
.tech-page__related { display: grid; gap: var(--jp-s-3); padding: var(--jp-s-5); border-radius: var(--jp-r-lg); background: var(--jp-surface); box-shadow: var(--jp-shadow-1); }
.tech-page__related .jp-service__label { margin: 0; }
.tech-page__related ul { display: grid; gap: var(--jp-s-2); margin: 0; padding: 0; list-style: none; }
.tech-page__related a { display: block; padding-block: 6px; font-weight: 600; color: var(--jp-text); text-decoration: none; }
.tech-page__related a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Strona produktu JAPRIVIO Fresh (/technology/fresh/) ---------- */
.tech-hero .jp-kind { margin-block-end: var(--jp-s-3); }
.tech-freshpage__intro, .tech-freshpage__flow { align-items: start; }
.tech-freshpage__intro .jp-body { margin: 0; max-inline-size: 60ch; color: var(--jp-text-1); }
.tech-freshpage__flow .jp-stack > * { margin: 0; }
.tech-freshpage__closeups { display: grid; gap: var(--jp-gap); margin-block-start: clamp(40px, 2.5rem + 2vw, 80px); }
@media (min-width: 721px) { .tech-freshpage__closeups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Telefon i tablet ---------- */
@media (max-width: 720px) {
  .tech-feature__title { font-size: var(--jp-fs-h3); }
}

@media (forced-colors: active) {
  .tech-route__step, .tech-route__label, .tech-outcome, .tech-use, .tech-uses, .tech-feature, .tech-concept, .tech-index a, .tech-process__num { border: 1px solid CanvasText; }
}

/* Strona Fresh: ekran produktu w otwarciu */
.tech-hero__shot { inline-size: 100%; }
.tech-hero__shot .tech-caption { margin-block-start: var(--jp-s-2); }
.tech-freshpage__intro { display: grid; gap: var(--jp-gap); max-inline-size: 760px; }
/* Koncepcje: rozwijane szczegóły */
.tech-concept__more { margin-block-start: var(--jp-s-2); border-block-start: 1px solid var(--jp-hair); }
.tech-concept__more > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--jp-s-3); min-block-size: 44px; cursor: pointer; list-style: none; font-size: var(--jp-fs-sm); font-weight: 600; color: var(--jp-brand-text); }
.tech-concept__more > summary::-webkit-details-marker { display: none; }
.tech-concept__more[open] > summary .jp-chevron { transform: rotate(180deg); }
.tech-concept__more .tech-concept__facts { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }