/* ============================================================
 * OMNIRA - LAYOUT I KOMPONENTY
 * ============================================================ */

/* ---------- Siatka ---------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section);
  position: relative;
}

.section--tight { padding-block: var(--section-sm); }

/* Kreska między sekcjami zamiast ciężkiego separatora. */
.section--ruled { border-top: 1px solid var(--hairline); }

/* Nagłówek sekcji: indeks po lewej, treść po prawej.
   Palantir czyta się jako system m.in. dlatego, że każda sekcja
   ma swój adres. */
.shead {
  border-top: 1px solid var(--border);
  padding-top: 26px;
  margin-bottom: 76px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.shead__title { max-width: 19ch; }
.shead__label { margin-bottom: 18px; }

/* Naglowek i lead ida pionowo, jeden pod drugim. Uklad "duzy naglowek
   po lewej, maly akapit dryfujacy po prawej" wyglada jak szablon. */
.shead__title { margin-bottom: 4px; }
.shead .lead { max-width: 58ch; }

/* ---------- Przyciski ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: background-color 200ms var(--ease), color 200ms var(--ease),
              border-color 200ms var(--ease), transform 200ms var(--ease);
  white-space: nowrap;
}

.btn__arrow { transition: transform 260ms var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn--primary:hover { transform: translateY(-1px); opacity: 0.9; }

.btn--ghost {
  border-color: var(--border-strong);
  color: var(--text);
}
.btn--ghost:hover { border-color: var(--text); }

.btn--sm { padding: 9px 16px; font-size: 13px; }

/* Link tekstowy z podkreśleniem rysowanym od zera. */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 320ms var(--ease);
}
.tlink:hover { background-size: 100% 1px; }

/* ---------- Chip / status ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--surface);
}

.chip--live { border-color: var(--border-strong); color: var(--text); }
.chip--soon { border-style: dashed; color: var(--text-faint); }


/* Placeholder contentowy - ma zachować hierarchię, ale być jednoznaczny. */
.tbd {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  padding: 3px 8px;
  display: inline-block;
}

/* ---------- Reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ============================================================
 * 01 HEADER
 * ============================================================ */

.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease);
  border-bottom: 1px solid transparent;
}

/* Nad hero pasek wygasa w obraz zamiast kończyć się linią. */
.hdr::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgb(18 18 20 / 0.72) 0%,
    rgb(18 18 20 / 0.42) 55%,
    transparent 100%);
  transition: opacity 300ms var(--ease);
  pointer-events: none;
}

/* Po scrollu pasek ma byc skonczonym obiektem, nie przezroczysta kalka:
   pelne krycie, wlasny cien zamiast samej kreski i o 10 px nizszy rytm. */
.hdr.is-stuck {
  background: rgb(250 250 251 / 0.94);
  backdrop-filter: blur(20px) saturate(1.6);
  border-bottom-color: var(--hairline);
  box-shadow: 0 1px 0 rgb(14 14 16 / 0.02), 0 10px 30px -22px rgb(14 14 16 / 0.5);
}
.hdr.is-stuck::before { opacity: 0; }

.hdr__in {
  display: flex;
  align-items: center;
  gap: 44px;
  height: 76px;
  position: relative;
  transition: height 300ms var(--ease);
}
.hdr.is-stuck .hdr__in { height: 64px; }

/* Znak stoi sam, bez wypisanego "OMNIRA" - wordmark juz czyta sie "om". */
.hdr__brand {
  display: flex;
  align-items: center;
  color: #f5f5f6;
  transition: color 300ms var(--ease), opacity 200ms var(--ease);
  padding: 6px 2px;
  margin-right: -32px;
}
.hdr__brand:hover { opacity: 0.7; }
.hdr.is-stuck .hdr__brand { color: var(--text); }
/* Znak jest wordmarkiem 3:1, nie ikona w kwadracie. */
.mark { height: 15px; width: auto; display: block; flex: none; }
.hdr__brand .mark { height: 19px; transition: height 300ms var(--ease); }
.hdr.is-stuck .hdr__brand .mark { height: 17px; }

.hdr__nav { display: flex; align-items: center; gap: 4px; margin-left: 12px; }

.hdr__link {
  padding: 9px 14px;
  border-radius: var(--r-sm);
  font-size: 14px;
  color: rgb(245 245 246 / 0.78);
  transition: color 220ms var(--ease), background-color 220ms var(--ease);
  display: inline-flex; align-items: center; gap: 7px;
}
.hdr__link:hover { color: #fff; background: rgb(255 255 255 / 0.08); }
.hdr.is-stuck .hdr__link { color: var(--text-dim); }
.hdr.is-stuck .hdr__link:hover { color: var(--text); background: var(--surface-2); }

.hdr__caret { transition: transform 260ms var(--ease); opacity: 0.6; }
.hdr__item[aria-expanded="true"] .hdr__caret { transform: rotate(180deg); }

.hdr__cta { margin-left: auto; }

.hdr__cta .btn--primary { background: #f5f5f6; color: #121214; }
.hdr.is-stuck .hdr__cta .btn--primary { background: var(--text); color: #fff; }

/* Dropdown produktów: lewa kolumna to spis, prawa to jeden realny
   ekran, ktory zmienia sie pod kursorem. Menu ma cos pokazywac,
   nie tylko wymieniac nazwy. */
.mega {
  position: absolute;
  top: calc(100% + 4px);
  left: -14px;
  width: min(1000px, calc(100vw - 64px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: 0 2px 6px rgb(14 14 16 / 0.04), 0 40px 90px -34px rgb(14 14 16 / 0.42);
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.985);
  transform-origin: 120px top;
  transition: opacity 240ms var(--ease), transform 320ms var(--ease), visibility 320ms;
}
.mega.is-open { opacity: 1; visibility: visible; transform: none; }

.mega__list { display: flex; flex-direction: column; }

.mega__i {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 11px 14px;
  border-radius: var(--r-md);
  transition: background-color 200ms var(--ease);
}
.mega__i + .mega__i::before {
  content: "";
  position: absolute;
  inset: 0 14px auto 52px;
  height: 1px;
  background: var(--hairline);
  transition: opacity 200ms var(--ease);
}
.mega__i.is-cur { background: var(--surface-2); }
.mega__i:hover, .mega__i:focus-visible { background: var(--surface-2); outline: none; }
/* Kreska po lewej wiaze wiersz z podgladem po prawej. */
.mega__i::after {
  content: "";
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 2px;
  border-radius: 2px;
  background: var(--text);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 260ms var(--ease);
}
.mega__i.is-cur::after { transform: scaleY(1); }
.mega__i:hover::before, .mega__i:hover + .mega__i::before,
.mega__i:focus-visible::before, .mega__i:focus-visible + .mega__i::before { opacity: 0; }

.mega__num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  padding-top: 3px;
  font-variant-numeric: tabular-nums;
}
.mega__txt { display: block; min-width: 0; }
.mega__top { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.mega__name { font-family: var(--font-display); font-size: 14.5px; font-weight: 600; letter-spacing: -0.012em; }
.mega__desc { display: block; font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.mega__i[data-soon="1"] .mega__name,
.mega__i[data-soon="1"] .mega__desc { opacity: 0.62; }

.mega__all {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 200ms var(--ease), gap 220ms var(--ease);
}
.mega__all:hover { color: var(--text); gap: 13px; }

/* Podglad */
.mega__pv {
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.mega__pv-frame {
  position: relative;
  flex: 1;
  min-height: 220px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgb(14 14 16 / 0.04), 0 18px 36px -24px rgb(14 14 16 / 0.4);
}
.mega__pv-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 0 0;
  opacity: 0;
  transform: scale(1.012);
  transition: opacity 300ms var(--ease), transform 600ms var(--ease);
}
.mega__pv-frame img.is-on { opacity: 1; transform: none; }

.mega__pv-cap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 3px 2px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  min-height: 15px;
}
.mega__pv-k {
  color: var(--text-faint);
  padding-right: 10px;
  border-right: 1px solid var(--border);
  flex: none;
}

@media (max-width: 1080px) {
  .mega { grid-template-columns: 1fr; width: min(520px, calc(100vw - 64px)); }
  .mega__pv { display: none; }
}

/* Burger (mobile) */
.hdr__burger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: var(--r-sm); }
.hdr__burger span { display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; color: #f5f5f6; }
.hdr__burger span::before, .hdr__burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: currentColor;
  transition: transform 240ms var(--ease);
}
.hdr__burger span::before { top: -6px; }
.hdr__burger span::after { top: 6px; }
.hdr.is-stuck .hdr__burger span { color: var(--text); }

/* ============================================================
 * 02 HERO
 * ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--panel);
  isolation: isolate;
}

.hero__shot {
  position: absolute;
  inset: -7% 0 -7% 0;
  z-index: 0;
}

/* Parallax bez ani jednej linii JS. animation-timeline: scroll()
   trzyma animacje poza glownym watkiem, wiec nie ma czego janknac. */
@supports (animation-timeline: scroll(root block)) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__shot {
      animation: heroDrift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
      will-change: transform;
    }
  }
}
@keyframes heroDrift {
  from { transform: translate3d(0, 0, 0) scale(1.02); }
  to   { transform: translate3d(0, 52px, 0) scale(1.06); }
}
/* Nagranie zostaje w kolorze - zielone i czerwone wartosci w produkcie
   sa nosnikiem informacji, a odbarwiony UI czytalby sie jak archiwum.
   Przyciemnienie robi scrim wyzej, nie filtr. */
.hero__shot video,
.hero__shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  filter: saturate(0.86) contrast(0.96) brightness(0.86);
  display: block;
}

/* Jeden pełnokadrowy scrim: miękka elipsa chroni pole copy,
   prawa strona zostaje czytelnym dowodem produktu. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgb(18 18 20 / 0.62) 0%,
      rgb(18 18 20 / 0.34) 24%,
      rgb(18 18 20 / 0.52) 60%,
      rgb(18 18 20 / 0.94) 100%),
    radial-gradient(ellipse 76% 74% at 20% 60%,
      rgb(18 18 20 / 0.94) 0%,
      rgb(18 18 20 / 0.90) 42%,
      rgb(18 18 20 / 0.70) 72%,
      rgb(18 18 20 / 0.46) 100%);
}

.hero__in {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: 88px;
  padding-top: 180px;
  color: var(--text-invert);
}

.hero__label { color: rgb(245 245 246 / 0.62); margin-bottom: 26px; }
.hero__label::before { color: rgb(245 245 246 / 0.42); }

.hero__h1 { max-width: 15ch; margin-bottom: 30px; }

.hero__lead {
  color: rgb(245 245 246 / 0.76);
  max-width: 56ch;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.6;
  margin-bottom: 40px;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero__cta .btn--primary { background: #f5f5f6; color: #121214; }
.hero__cta .btn--ghost { border-color: rgb(245 245 246 / 0.34); color: #f5f5f6; }
.hero__cta .btn--ghost:hover { border-color: #f5f5f6; }

/* Listwa modułów na dole hero - dowód, że to ekosystem, nie dashboard. */
.hero__rail {
  margin-top: 60px;
  padding-top: 20px;
  border-top: 1px solid rgb(245 245 246 / 0.16);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  align-items: center;
}
.hero__rail-lbl { color: rgb(245 245 246 / 0.42); margin-right: 8px; }
.hero__rail-i {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgb(245 245 246 / 0.8);
}
.hero__rail-i[data-soon="1"] { color: rgb(245 245 246 / 0.38); }

/* Na waskim ekranie nagranie jest kadrowane mocno w pionie, wiec
   interfejs w tle robi sie duzy i halasliwy. Scisza go filtr, nie
   kolejna warstwa scrimu - tekst i tak siedzi na gradiencie. */
@media (max-width: 768px) {
  .hero__shot video { filter: saturate(0.62) contrast(0.92) brightness(0.7); }
}


/* ============================================================
 * WEJŚCIE HERO
 *
 * Jeden zorkiestrowany moment na starcie zamiast czterech osobnych
 * efektów rozsypanych po stronie. Kolejność wejścia jest kolejnością
 * czytania: etykieta, nagłówek, zdanie, akcja, ekosystem. Kadr w tle
 * schodzi ze skali 1.08 do 1.02, przez co obraz "siada" zamiast
 * pojawić się gotowy.
 * ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .hero__label,
  .hero__h1,
  .hero__lead,
  .hero__cta,
  .hero__rail {
    opacity: 0;
    transform: translateY(18px);
    animation: heroIn 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .hero__label { animation-delay: 120ms; }
  .hero__h1    { animation-delay: 200ms; }
  .hero__lead  { animation-delay: 340ms; }
  .hero__cta   { animation-delay: 440ms; }
  .hero__rail  { animation-delay: 560ms; }

  .hero__shot img { animation: heroSettle 1600ms cubic-bezier(0.16, 1, 0.3, 1) both; }

  /* Włos pod listwą ekosystemu rysuje się od lewej - domyka sekwencję. */
  .hero__rail { border-top-color: transparent; position: relative; }
  .hero__rail::before {
    content: "";
    position: absolute; inset: 0 auto auto 0;
    height: 1px; width: 0;
    background: rgb(245 245 246 / 0.18);
    animation: railDraw 1000ms cubic-bezier(0.16, 1, 0.3, 1) 640ms forwards;
  }
}

@keyframes heroIn   { to { opacity: 1; transform: none; } }
@keyframes railDraw { to { width: 100%; } }
@keyframes heroSettle {
  from { transform: scale(1.08); opacity: 0.4; }
  to   { transform: scale(1.02); opacity: 1; }
}

/* ============================================================
 * 03 QUALIFICATION FLOW
 * Nie formularz kontaktowy - mini-produkt przed demo.
 * ============================================================ */

.qual { background: var(--surface); border-top: 1px solid var(--hairline); }

.qual__grid {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

/* Lewa kolumna: kadr + wyjasnienie.
   Zdjecie idzie do samej krawedzi kolumny - gorna, lewa i prawa.
   Marginesy wokol kadru robily z niego ilustracje przyklejona do
   panelu; bez nich kolumna czyta sie jak jeden material. */
.qual__aside {
  background: var(--panel);
  color: var(--text-invert);
  padding: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 560px;
}

/* Kazde pytanie ma wlasne zdjecie. Zmiana kadru razem z pytaniem daje
   poczucie, ze rozmowa idzie dalej, a nie ze formularz przeskakuje. */
.qual__portrait {
  position: relative;
  height: 100%;
  min-height: 260px;
  overflow: hidden;
  background: var(--panel-2);
  margin: 0;
}
/* Dol kadru schodzi w panel, zeby tekst nie siedzial na twardej krawedzi. */
.qual__portrait::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 40%;
  background: linear-gradient(to top, var(--panel) 0%, rgb(18 18 20 / 0.55) 46%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.qual__portrait img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 620ms var(--ease), transform 1400ms var(--ease);
}
.qual__portrait img.is-active { opacity: 1; transform: none; }

.qual__aside-title {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.5vw, 23px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 500;
}
.qual__aside-txt { padding: 30px 40px 40px; }
.qual__aside-copy { font-size: 14px; line-height: 1.6; color: rgb(245 245 246 / 0.66); margin-top: 14px; }

.qual__steps { display: flex; gap: 6px; margin-top: 22px; }
.qual__step-dot { flex: 1; height: 2px; background: rgb(245 245 246 / 0.16); border-radius: 2px; overflow: hidden; }
.qual__step-dot.is-done { background: rgb(245 245 246 / 0.82); }
.qual__step-dot.is-now { background: rgb(245 245 246 / 0.48); }

/* Prawa kolumna: jedno pytanie na ekran */
.qual__panel {
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  min-height: 520px;
}

.qual__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--hairline);
}
.qual__count { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--text-faint); }
.qual__progress { flex: 1; height: 2px; background: var(--surface-2); border-radius: 2px; overflow: hidden; max-width: 240px; }
.qual__progress i { display: block; height: 100%; width: 0%; background: var(--text); transition: width 420ms var(--ease); }

.qual__stage { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: 36px; }

.qual__q {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
  display: none;
}
.qual__q.is-active { display: block; opacity: 1; transform: none; }

.qual__q-label { margin-bottom: 16px; }
.qual__q-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.22;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin-bottom: 28px;
  max-width: 22ch;
}

.qual__opts { display: grid; gap: 8px; }
.qual__opts--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.qual__opt {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  text-align: left;
  padding: 15px 17px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 14.5px;
  transition: border-color 180ms var(--ease), background-color 180ms var(--ease);
}
.qual__opt:hover { border-color: var(--border-strong); background: var(--surface-2); }
.qual__opt[aria-pressed="true"] { border-color: var(--text); background: var(--surface-2); }
.qual__opt-key {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--text-faint); border: 1px solid var(--border); border-radius: 5px;
  width: 22px; height: 22px; display: grid; place-items: center; flex: none;
}
.qual__opt[aria-pressed="true"] .qual__opt-key { border-color: var(--text); color: var(--text); }

.qual__field {
  display: grid; gap: 8px; margin-bottom: 10px;
}
.qual__input {
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 14.5px;
  transition: border-color 180ms var(--ease);
  background: var(--surface);
}
.qual__input:focus { border-color: var(--text); outline: none; }
.qual__input::placeholder { color: var(--text-faint); }

.qual__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 20px; border-top: 1px solid var(--hairline);
}
.qual__hint { font-size: 12px; color: var(--text-faint); font-family: var(--font-mono); letter-spacing: 0.04em; }
.qual__back { font-size: 13px; color: var(--text-dim); padding: 8px 0; }
.qual__back:hover { color: var(--text); }
.qual__back[hidden] { visibility: hidden; display: block; }

/* Ekran wyniku - zamiast "Dziękujemy" */
.qual__result { display: none; }
.qual__result.is-active { display: block; }
.qual__result-h {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.22; letter-spacing: -0.02em; font-weight: 500;
  margin-bottom: 28px; max-width: 24ch;
}
.qual__rec { display: grid; gap: 8px; margin-bottom: 30px; }
.qual__rec-i {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 16px; align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.qual__rec-n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--text-faint); }
.qual__rec-name { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.qual__rec-why { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; }

/* ============================================================
 * 04 DEMO
 * ============================================================ */

.demo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 56px;
  align-items: start;
}

.demo__frame {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.demo__bar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-2);
}
.demo__bar .chip { margin-left: auto; }
.demo__frame img { width: 100%; height: auto; display: block; }

/* Pionowy rail narracji - to historia decyzji, nie tour po buttonach. */
.demo__rail { border-left: 1px solid var(--border); padding-left: 0; }
.demo__rail-i {
  position: relative;
  padding: 0 0 26px 26px;
  margin-left: -1px;
  border-left: 1px solid transparent;
}
.demo__rail-i::before {
  content: "";
  position: absolute; left: -3.5px; top: 6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--border-strong);
  transition: background-color 300ms var(--ease), transform 300ms var(--ease);
}
.demo__rail-i.is-in::before { background: var(--text); transform: scale(1.25); }
.demo__rail-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--text-faint); text-transform: uppercase; }
.demo__rail-t { font-size: 14px; font-weight: 500; margin-top: 4px; letter-spacing: -0.01em; }
.demo__rail-d { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; line-height: 1.45; }
.demo__rail-i:last-child { padding-bottom: 0; }

/* ============================================================
 * 05 CO DAJEMY - sticky stacked cards
 * ============================================================ */

.stack { position: relative; }
.stack__list { display: grid; gap: 0; }

.stack__card {
  position: sticky;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  margin-bottom: 24px;
}
/* Pas zdjecia domykajacy karte. Karta bez niego konczyla sie
   w polowie wysokosci i zostawal pusty dol. */
/* Kadr pod karta. Bez podpisu - nazwa warstwy stoi juz w naglowku,
   a pasek na zdjeciu tylko powtarzal to samo innymi slowami. */
.stack__shot {
  position: relative;
  margin: 0;
  height: 300px;
  overflow: hidden;
  border-top: 1px solid var(--hairline);
}
.stack__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.stack__card:nth-child(1) { top: 104px; }
.stack__card:nth-child(2) { top: 128px; }
.stack__card:nth-child(3) { top: 152px; }
.stack__card:nth-child(4) { top: 176px; }

.stack__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 48px;
  padding: 46px 48px 40px;
  min-height: 268px;
}

.stack__n {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  color: var(--text-faint);
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 14px;
}
.stack__n b { font-weight: 500; color: var(--text); }
.stack__n s { flex: 1; height: 1px; background: var(--border); text-decoration: none; max-width: 90px; }

.stack__t {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.18; letter-spacing: -0.022em; font-weight: 500;
  margin-bottom: 18px; max-width: 20ch;
}
.stack__d { font-size: 16px; line-height: 1.6; color: var(--text-dim); max-width: 52ch; margin-bottom: 26px; }

.stack__scope { display: flex; flex-wrap: wrap; gap: 6px; }
.stack__scope li {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  padding: 5px 10px; border: 1px solid var(--hairline); border-radius: var(--r-sm);
  color: var(--text-dim); background: var(--surface-2);
}

/* Mikrosekcja // OUTPUT */
.stack__out {
  border-left: 1px solid var(--border);
  padding-left: 28px;
}
.stack__out-l { margin-bottom: 16px; }
.stack__out li {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center; gap: 10px;
}
.stack__out li::before { content: "→"; color: var(--text-faint); font-size: 11px; }
.stack__out li:last-child { border-bottom: 0; }

/* ============================================================
 * 06 CZYM JEST EKOSYSTEM - pas negatywowy #1 (reset typograficzny)
 * ============================================================ */

/* Manifest. Jedyne miejsce na stronie, gdzie tekst jest wysrodkowany -
   bo tu sam komunikat jest kompozycja. Naglowek idzie w skali h1,
   a nie h2, zeby reset po ciezkiej sekcji byl faktycznie odczuwalny. */
/* Manifest dostaje zdjecie w tle. Kadr z lotu ptaka na teren
   operacyjny: duzo spokojnych plaszczyzn, wiec tekst ma gdzie usiasc. */
.reset-sec {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 168px;
  background: var(--panel);
  color: var(--text-invert);
}
.reset-sec__bg { position: absolute; inset: 0; z-index: 0; }
.reset-sec__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.reset-sec__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 62% at 50% 46%,
      rgb(14 14 16 / 0.82) 0%, rgb(14 14 16 / 0.6) 52%, rgb(14 14 16 / 0.18) 100%),
    linear-gradient(to bottom, rgb(14 14 16 / 0.5), rgb(14 14 16 / 0.14) 42%, rgb(14 14 16 / 0.58));
}
.reset { position: relative; z-index: 2; text-align: center; }
.reset__label { margin-bottom: 40px; color: rgb(245 245 246 / 0.5); }
.reset__h { max-width: 23ch; margin-inline: auto; margin-bottom: 34px; }
.reset__p {
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.55;
  color: rgb(245 245 246 / 0.72);
  max-width: 52ch;
  margin-inline: auto;
}
@media (max-width: 720px) { .reset-sec { padding-block: 116px; } }

/* ============================================================
 * 07 SZEŚĆ PRODUKTÓW - ledger typograficzny
 *
 * Bylo: siatka 3x2 rownych kart. To najczestszy uklad w internecie
 * i sekcja przez to nie miala zadnego ciezaru - szesc produktow
 * wygladalo jak szesc pol formularza.
 *
 * Jest: pelnej szerokosci wiersze na wlosie, nazwa produktu w skali
 * naglowka. Nazwa jest jedynym elementem, ktory czytelnik ma zapamietac,
 * wiec dostaje cala dostepna skale. Reszta schodzi do roli podpisu.
 * Rozwiniecie wiersza pokazuje realny fragment UI - i to jest ta czesc,
 * ktorej zaden reference nie ma, bo my mamy dzialajacy produkt.
 * ============================================================ */

.ledger { border-top: 1px solid var(--border-strong); }

.led {
  border-bottom: 1px solid var(--border);
  display: block;
  text-align: left;
  position: relative;
  isolation: isolate;
}
.led::before {
  content: "";
  position: absolute;
  inset: 0 -28px;
  z-index: -1;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(14 14 16 / 0.03), 0 16px 40px -20px rgb(14 14 16 / 0.16);
  opacity: 0;
  transition: opacity 420ms var(--ease);
}
.led:hover::before, .led:focus-within::before { opacity: 1; }
.led[data-state="soon"]:hover::before { opacity: 0; }

/* Nazwa i opis stoja razem w jednej kolumnie. Rozdzielone na dwie
   zostawialy w srodku wiersza pustke szeroka na pol ekranu, ktora
   czytala sie jak brak tresci, a nie jak oddech. */
/* Miniatura realnego UI w kazdym wierszu. Prawa polowa wiersza byla
   pusta, a caly ledger w spoczynku szary - jeden kolorowy kadr
   rozwiazuje oba problemy naraz. */
.led__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 40px;
  align-items: start;
  padding: 34px 0 30px;
}

.led__mini {
  margin: 0;
  width: 276px;
  aspect-ratio: 16 / 6;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface);
  align-self: center;
  transition: transform 520ms var(--ease), opacity 420ms var(--ease);
  opacity: 0.9;
}
.led__mini img { width: 190%; max-width: none; height: auto; display: block; }
.led:hover .led__mini, .led:focus-within .led__mini { opacity: 0; transform: translateY(-8px); }

.led__main { max-width: 62ch; }

.led__name {
  font-family: var(--font-display);
  font-size: var(--t-ledger);
  line-height: 0.94;
  letter-spacing: -0.028em;
  font-weight: 600;
  transition: transform 520ms var(--ease);
  transform-origin: left center;
}
.led:hover .led__name, .led:focus-within .led__name { transform: translateX(14px); }

.led__desc {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-dim);
  margin-top: 12px;
  max-width: 54ch;
}
.led__desc b { font-weight: 500; color: var(--text); }
.led__desc b::after { content: "."; }

.led__st {
  justify-self: end;
  padding-top: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.led__st b { font-weight: 500; color: var(--text-dim); }

/* Rozwiniecie. grid-template-rows 0fr -> 1fr animuje wysokosc bez
   znajomosci docelowego rozmiaru, wiec dziala przy dowolnej tresci. */
.led__more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 560ms var(--ease);
}
.led:hover .led__more, .led:focus-within .led__more { grid-template-rows: 1fr; }
.led__more > div { overflow: hidden; }

.led__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 56px;
  align-items: start;
  padding: 4px 0 42px;
}

.led__caps { margin-bottom: 4px; }
.led__caps li {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  padding: 11px 0;
  border-top: 1px solid var(--hairline);
  display: flex;
  gap: 12px;
}

.led__shot {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
  box-shadow: var(--shadow-card);
}
/* Realne UI produktu idzie w pelnym kolorze wszedzie. Odbarwione
   wygladalo jak zrzut archiwalny, a to jedyne miejsce na stronie,
   w ktorym produkt moze pokazac, ze zyje. */
.led__shot img {
  width: 190%; max-width: none; height: auto; display: block;
}

.led__go {
  margin-top: 22px;
  font-size: 13.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}

/* W budowie: wiersz nie reaguje na kursor, bo nie ma dokad kliknac. */
.led[data-state="soon"] { opacity: 0.5; }
.led[data-state="soon"]:hover { background: transparent; }
.led[data-state="soon"]:hover .led__name { transform: none; }
.led[data-state="soon"] .led__more { grid-template-rows: 0fr; }

/* ============================================================
 * 08 TRZY PROBLEM-SOLVING - switcher
 * ============================================================ */

.sw__tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 56px;
}

.sw__tab {
  flex: 1;
  text-align: left;
  padding: 0 0 22px;
  position: relative;
  color: var(--text-faint);
  transition: color 240ms var(--ease);
  max-width: 300px;
}
/* Pasek postepu: pokazuje, ile zostalo do przeskoku na kolejna os.
   Bez niego automatyczna zmiana zakladki wyglada jak przypadek. */
.sw__tab::after {
  content: "";
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--text);
  border-radius: 2px;
}
.sw__tab[aria-selected="true"] { color: var(--text); }
.sw__tab[aria-selected="true"]::after { width: 100%; transition: width 420ms var(--ease); }
.sw__tab[aria-selected="true"][data-run="1"]::after {
  width: 0;
  animation: swProgress var(--sw-dur, 7s) linear forwards;
}
@keyframes swProgress { from { width: 0; } to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .sw__tab[aria-selected="true"][data-run="1"]::after { animation: none; width: 100%; }
}
.sw__tab:hover { color: var(--text-dim); }

.sw__tab-n { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; display: block; margin-bottom: 10px; opacity: 0.7; }
.sw__tab-t {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: 0.06em; font-weight: 600; text-transform: uppercase;
  display: block; margin-bottom: 8px;
}
.sw__tab-s { font-size: 13px; line-height: 1.45; display: block; }

.sw__panel {
  display: none;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  gap: 64px;
  align-items: center;
}
.sw__panel.is-active { display: grid; animation: swIn 380ms var(--ease); }

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

.sw__h {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.2; letter-spacing: -0.022em; font-weight: 500;
  margin-bottom: 20px; max-width: 18ch;
}
.sw__p { font-size: 15px; line-height: 1.65; color: var(--text-dim); max-width: 48ch; margin-bottom: 32px; }

.sw__metric { border-top: 1px solid var(--border); padding-top: 22px; display: flex; align-items: baseline; gap: 18px; }
.sw__note {
  border-top: 1px solid var(--border); padding-top: 22px;
  font-size: 14px; line-height: 1.55; color: var(--text-dim); max-width: 44ch;
}
.sw__metric-v { font-family: var(--font-display); font-size: clamp(30px, 3.2vw, 46px); font-weight: 500; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.sw__metric-l { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--text-dim); max-width: 24ch; line-height: 1.4; }

.sw__shot {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
/* Zrodlowe screeny maja 2400 px. W kolumnie switchera to zjazd do ~36%
   skali logicznej i interfejs przestaje byc czytelny - a to on jest
   dowodem. Kadrujemy wiec fragment zamiast zmniejszac calosc. */
.shotcrop { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.shotcrop img { width: 165%; max-width: none; height: auto; display: block; }

/* Im wezsza kolumna, tym mocniejszy kadr - inaczej na telefonie
   interfejs znowu robi sie nieczytelny. */
@media (max-width: 1000px) { .shotcrop img { width: 235%; } }
@media (max-width: 720px)  { .shotcrop img { width: 300%; } }
.sw__shot-cap {
  border-top: 1px solid var(--hairline);
  padding: 11px 16px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em;
  color: var(--text-faint); text-transform: uppercase;
  display: flex; justify-content: space-between; gap: 12px;
}

/* ============================================================
 * 09 BRANŻE I OBSZARY - kafle fotograficzne
 *
 * Bylo: cztery identyczne szare prostokaty z rysunkiem wektorowym.
 * Rysunki byly zbyt ciche, zeby cokolwiek znaczyc, i zbyt podobne,
 * zeby rozroznic obszary.
 *
 * Jest: czarno-biala fotografia dokumentalna realnego srodowiska
 * operacyjnego danego obszaru. Zdjecia sa ziarniste i kontrastowe,
 * wiec siedza w tej samej skali szarosci co reszta strony, a
 * jednoczesnie daja to, czego interfejsowi brakowalo - materialnosc.
 * ============================================================ */

.inds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border-block: 1px solid var(--border);
}

.ind {
  background: var(--bg);
  padding: 0 0 34px;
  display: flex;
  flex-direction: column;
}

.ind__vis {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin-bottom: 30px;
  background: var(--panel);
}
.ind__vis img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease);
  filter: contrast(1.06);
}

/* Zdjecia sa celowo jasne, wiec bialy panel z liczbami gubil na nich
   krawedz. Delikatne przyciemnienie dolu daje mu na czym usiasc.
   Podpisow obszaru nie ma - zdjecie i naglowek kafla mowia to samo,
   a pasek wchodzil pod panel z liczbami. */
.ind__vis::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(to top,
    rgb(18 18 20 / 0.30) 0%,
    rgb(18 18 20 / 0.10) 36%,
    transparent 64%);
}
.ind__stats { z-index: 1; }
.ind:hover .ind__vis img { transform: scale(1.035); }

/* Panel z liczbami wjezdza na zdjecie. Liczba na fotografii dziala
   inaczej niz liczba pod nia: czyta sie jako opis tego, co widac,
   a nie jako osobny blok danych. */
.ind__stats {
  position: absolute;
  left: 26px; right: auto; bottom: 26px;
  width: min(74%, 420px);
  background: rgb(255 255 255 / 0.94);
  backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid rgb(255 255 255 / 0.7);
  border-radius: var(--r-md);
  box-shadow: 0 2px 8px rgb(14 14 16 / 0.1), 0 24px 52px -20px rgb(14 14 16 / 0.42);
  overflow: hidden;
  transition: transform 620ms var(--ease);
}
.ind:hover .ind__stats { transform: translateY(-4px); }

.ind__stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 18px;
}
.ind__stat + .ind__stat { border-top: 1px solid var(--hairline); }
.ind__stat b {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.028em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ind__stat b i { font-style: normal; font-size: 0.62em; letter-spacing: 0; margin-left: 2px; }
.ind__stat span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: right;
}

@media (prefers-reduced-transparency: reduce) {
  .ind__stats { background: #fff; backdrop-filter: none; }
}

.ind__body { padding-inline: 34px; display: flex; flex-direction: column; flex: 1; }

.ind__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.ind__t {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: -0.028em; font-weight: 500; line-height: 1.08;
}
.ind__d { font-size: 15.5px; line-height: 1.6; color: var(--text-dim); max-width: 44ch; margin-bottom: 30px; }

.ind__d { margin-bottom: auto; }
.ind__go { margin-top: 26px; }

/* ============================================================
 * PAS PEŁNEJ SZEROKOŚCI
 * Jedyne miejsce, gdzie fotografia zajmuje caly kadr. Dziala jako
 * oddech przed najciezsza sekcja strony (architektura).
 * ============================================================ */

/* Pas koncowy prowadzony tak samo jak manifest wyzej: kadr jasny,
   scrim promienisty zamiast bocznego, tresc na osi. Poprzedni uklad
   kladl na zdjeciu gradient do 0.95 z jednej strony, przez co lewa
   polowa fotografii znikala, a prawa byla przycieta w przypadkowym
   miejscu. */
.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--panel);
  color: var(--text-invert);
  padding-block: 168px;
}

.band__bg { position: absolute; inset: 0; z-index: 0; }
.band__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
  opacity: 0.85;
}

.band__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 60% at 50% 44%,
      rgb(14 14 16 / 0.74) 0%, rgb(14 14 16 / 0.54) 52%, rgb(14 14 16 / 0.2) 100%),
    linear-gradient(to bottom, rgb(14 14 16 / 0.42), rgb(14 14 16 / 0.12) 42%, rgb(14 14 16 / 0.62));
}

.band__in { position: relative; z-index: 2; text-align: center; }
.band__h { margin-bottom: 30px; max-width: 21ch; margin-inline: auto; }
.band__p {
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.55;
  color: rgb(245 245 246 / 0.72);
  max-width: 50ch;
  margin: 0 auto 42px;
}
.band__btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.band__btns .btn--primary { background: #f5f5f6; color: #121214; }
.band__btns .btn--ghost { border-color: rgb(245 245 246 / 0.36); color: #f5f5f6; }
.band__btns .btn--ghost:hover { border-color: #f5f5f6; }
@media (max-width: 720px) { .band { padding-block: 116px; } }

/* ============================================================
 * 10 PROOF - duże liczby
 * ============================================================ */

.proof__frame {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 44px;
  background: var(--surface);
}
.proof__frame b { font-weight: 500; font-size: 13px; }
.proof__frame span { font-size: 12.5px; color: var(--text-dim); }

.proof__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border-block: 1px solid var(--border);
}
.proof__i { background: var(--bg); padding: 40px 32px 36px; }
.proof__v { margin-bottom: 20px; }
.proof__v sup { font-size: 0.42em; vertical-align: super; letter-spacing: 0; margin-left: 2px; font-weight: 400; }
.proof__l {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text); margin-bottom: 14px;
}
.proof__d { font-size: 14.5px; line-height: 1.55; color: var(--text-dim); }

.proof__note { margin-top: 26px; font-size: 12px; color: var(--text-faint); font-family: var(--font-mono); letter-spacing: 0.03em; }

/* ============================================================
 * 11 MID CTA
 * ============================================================ */


/* ============================================================
 * 12 ARCHITEKTURA - pas negatywowy #2
 * ============================================================ */

/* ============================================================
 * 13 REAL DASHBOARD - taby
 * ============================================================ */

.dash__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 34px; }
.dash__tab {
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-dim);
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease);
}
.dash__tab:hover { border-color: var(--border-strong); }
.dash__tab[aria-selected="true"] { background: var(--text); border-color: var(--text); color: var(--on-accent); }

.dash__stage {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.dash__bar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-2);
}
.dash__dots { display: flex; gap: 6px; }
.dash__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.dash__path { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); letter-spacing: 0.06em; }
.dash__live { margin-left: auto; }

.dash__view { display: none; }
.dash__view.is-active { display: block; animation: swIn 320ms var(--ease); }
.dash__view img { width: 100%; display: block; }
.dash__view--tall { max-height: 620px; overflow: hidden; }
.dash__view--tall img { object-fit: cover; object-position: 50% 0; }

.dash__cap {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start;
  border-top: 1px solid var(--hairline); padding: 20px 22px;
}
.dash__cap-t { font-size: 14px; font-weight: 500; margin-bottom: 5px; letter-spacing: -0.01em; }
.dash__cap-d { font-size: 14.5px; color: var(--text-dim); max-width: 60ch; line-height: 1.55; }

/* Sekwencja operacyjna - to odróżnia produkt operacyjny od BI. */
.dash__seq { display: flex; flex-wrap: wrap; gap: 8px 6px; align-items: center; margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--border); }
.dash__seq-i { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); padding: 6px 11px; border: 1px solid var(--hairline); border-radius: var(--r-sm); }
.dash__seq-a { color: var(--text-faint); font-size: 11px; }

/* ============================================================
 * 14 FEATURE MATRIX
 * ============================================================ */

.matrix__lbl { margin: 76px 0 22px; }

.matrix {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.mx {
  background: var(--bg);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 104px;
  transition: background-color 200ms var(--ease);
}
.mx:hover { background: var(--surface); }
.mx__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--text-faint); }
.mx__n { font-size: 16px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.35; }
.mx__s { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--text-faint); margin-top: auto; text-transform: uppercase; }

/* ============================================================
 * 15 CASE STUDIES - wiersze redakcyjne
 *
 * Bylo: dwie karty w ramkach, a w srodku same placeholdery. Ramka
 * wokol pustki podkresla pustke.
 * Jest: ten sam jezyk co ledger produktow - wlos, duza metryka jako
 * kotwica, tresc obok. Dopoki nie ma zatwierdzonych case'ow, sekcja
 * uczciwie wyglada na przygotowane miejsce, a nie na gotowa tresc.
 * ============================================================ */

.cases { border-top: 1px solid var(--border-strong); }

.case {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 64px;
  padding: 44px 0 48px;
  border-bottom: 1px solid var(--border);
  align-items: start;
}

.case__anchor { position: sticky; top: 108px; }
.case__sector { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.case__metric { line-height: 1; margin-bottom: 12px; }
.case__metric-l {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--text-dim); text-transform: uppercase; max-width: 22ch; line-height: 1.5;
}

.case__body { display: grid; gap: 26px; }
.case__block-h {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  color: var(--text-faint); text-transform: uppercase; margin-bottom: 9px;
}
.case__block-d { font-size: 16px; line-height: 1.6; color: var(--text-dim); max-width: 62ch; }
/* Tekst przykladowy, nie zatwierdzony. Odroznia sie kryciem, zeby nie
   trzeba bylo obwodzic kazdego akapitu ramka placeholdera. */
.case__block-d--sample { color: var(--text-faint); }

.case__quote {
  padding-top: 26px; border-top: 1px solid var(--hairline);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 24px); line-height: 1.35; letter-spacing: -0.018em;
  color: var(--text); max-width: 40ch;
}

/* ============================================================
 * 16 FINAL CTA + FOOTER
 * ============================================================ */

.final { text-align: center; padding-block: 190px 170px; }
.final__h { max-width: 16ch; margin-inline: auto; margin-bottom: 30px; }
.final__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.final__micro { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; color: var(--text-faint); }

.ftr { border-top: 1px solid var(--border); padding-block: 72px 40px; }
.ftr__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 48px; margin-bottom: 64px; }
/* Sam znak, bez wypisanej nazwy - tak samo jak w naglowku. */
.ftr__brand { display: flex; align-items: center; margin-bottom: 20px; }
.ftr__brand .mark { height: 21px; }

.ftr__tag { font-size: 13px; color: var(--text-dim); max-width: 34ch; line-height: 1.55; }
.ftr__ch { margin-bottom: 18px; }
.ftr__col li { margin-bottom: 10px; }
.ftr__col a { font-size: 13.5px; color: var(--text-dim); transition: color 180ms var(--ease); }
.ftr__col a:hover { color: var(--text); }
.ftr__col a[data-soon="1"] { opacity: 0.5; }

.ftr__bot { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid var(--hairline); }
.ftr__status { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--text-dim); text-transform: uppercase; }
.ftr__status i { width: 6px; height: 6px; border-radius: 50%; background: var(--text); }
.ftr__cp { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-faint); }

/* ============================================================
 * RESPONSIVE
 * Mobile nie jest ściśniętym desktopem - każda sekcja dostaje
 * własny układ, a nie ten sam w węższej kolumnie.
 * ============================================================ */

@media (max-width: 1180px) {
  :root { --section: 120px; --section-sm: 72px; --gutter: 32px; }

  .shead { margin-bottom: 56px; }
  .demo__grid { grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; }
  .stack__in { grid-template-columns: minmax(0, 1fr) 240px; gap: 36px; padding: 44px 36px; }
  .sw__panel { gap: 44px; }
  .layer, .arch__arrow { grid-template-columns: 170px minmax(0, 1fr); gap: 32px; }
  .ftr__grid { grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
  .matrix { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .hdr__nav { display: none; }
  .hdr__burger { display: flex; }
  .hdr__cta .btn { display: none; }

  .led__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 32px; }
  .led__mini { width: 200px; }
  .proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .case__anchor { position: static; }
  .inds { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ind { min-height: 0; padding: 32px; }

  /* Qualification: portret pierwszy, potem pytanie (§9) */
  .qual__grid { grid-template-columns: minmax(0, 1fr); }
  .qual__aside { min-height: 0; }
  .qual__aside-txt { padding: 28px 28px 32px; }
  .qual__portrait { aspect-ratio: 16 / 9; }
  .qual__panel { min-height: 480px; padding: 32px 28px; }

  /* Demo: rail pod ramką, poziomo */
  .demo__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .demo__rail { border-left: 0; border-top: 1px solid var(--border); padding-top: 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 28px; }
  .demo__rail-i { padding: 0 0 0 20px; border-left: 1px solid var(--hairline); margin-left: 0; }
  .demo__rail-i::before { left: -3.5px; top: 5px; }
  .demo__rail-i:last-child { padding-bottom: 0; }

  .stack__in { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .stack__out { border-left: 0; border-top: 1px solid var(--border); padding-left: 0; padding-top: 24px; }

  /* Switcher → pionowy stack zamiast wymuszonych tabsów */
  .sw__tabs { flex-direction: column; gap: 0; border-bottom: 0; margin-bottom: 0; }
  .sw__tab { max-width: none; padding: 22px 0; border-top: 1px solid var(--border); }
  .sw__tab::after { display: none; }
  .sw__tab[aria-selected="true"] .sw__tab-t { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
  .sw__panel { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 8px 34px; }
  .sw__panels { border-bottom: 1px solid var(--border); }

  /* Architektura → uproszczony pionowy pipeline */
  .layer, .arch__arrow { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .layer--core { margin-inline: -18px; padding-inline: 18px; }
  .arch__arrow span { grid-column: 1; padding: 6px 0; }
  .layer__s { max-width: none; }

  .dash__cap { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

@media (max-width: 720px) {
  .ind__stats { left: 14px; bottom: 14px; width: calc(100% - 28px); }
  .ind__stat { padding: 9px 14px; }
  .ind__stat b { font-size: 18px; }
  .ind__stat span { font-size: 10.5px; letter-spacing: 0.1em; }
  .ind__head .tbd { font-size: 11px; padding: 3px 6px; }
  :root { --section: 92px; --section-sm: 60px; --gutter: 20px; --t-num: clamp(40px, 13vw, 60px); }

  .shead { margin-bottom: 40px; padding-top: 20px; }
  .shead__label { margin-bottom: 12px; }
  .shead__title { max-width: none; }

  .hero { min-height: 92svh; }
  .hero__in { padding-top: 132px; padding-bottom: 52px; }
  .hero__h1 { max-width: 12ch; }
  .hero__lead { font-size: 15px; margin-bottom: 30px; }
  .hero__cta { gap: 10px; }
  .hero__cta .btn { flex: 1; justify-content: center; min-width: 150px; }
  .hero__rail { margin-top: 42px; gap: 10px 18px; }
  .hero__shot img { object-position: 62% 22%; }

  .proof__grid { grid-template-columns: minmax(0, 1fr); }
  .proof__i { padding: 30px 0; }
  .proof__frame { margin-bottom: 32px; }

  .matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mx { min-height: 92px; padding: 16px; }

  /* Status zostaje w prawym gornym rogu wiersza - zsuniety pod opis
     ladowal miedzy trescia a lista capabilities i gubil znaczenie. */
  .led::before { inset: 0 -16px; }
  .led__row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; padding: 26px 0 22px; }
  .led__mini { display: none; }
  .led__st { padding-top: 10px; }
  .led__more { grid-template-rows: 1fr; }
  .led__panel { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .led:hover .led__name, .led:focus-within .led__name { transform: none; }
  .led[data-state="soon"] { opacity: 0.66; }

  .stack__card { position: static; margin-bottom: 16px; box-shadow: var(--shadow-card); }
  .stack__in { padding: 32px 26px 28px; min-height: 0; }
  .stack__shot { height: 210px; }

  .qual__opts--two { grid-template-columns: minmax(0, 1fr); }
  .qual__panel { padding: 28px 22px; min-height: 440px; }
  .qual__aside-txt { padding: 24px 22px 28px; }

  .demo__rail { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  
  .case { padding: 32px 0 36px; }

  .final { padding-block: 110px 96px; }
  .final__btns .btn { flex: 1; justify-content: center; min-width: 160px; }

  .ftr__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; margin-bottom: 44px; }
  .ftr__brandcol { grid-column: 1 / -1; }
  .ftr__bot { flex-direction: column; align-items: flex-start; gap: 14px; }

  .dash__tabs { gap: 5px; }
  .dash__tab { padding: 8px 12px; font-size: 10px; }
  .dash__view--tall { max-height: 400px; }
  .dash__seq { gap: 6px 4px; }
  .dash__seq-i { font-size: 10px; padding: 5px 8px; }
}

/* Mobile menu (poza breakpointami - stan sterowany z JS) */
.mnav {
  position: fixed; inset: 0; z-index: 99;
  background: var(--panel);
  color: var(--text-invert);
  padding: 92px var(--gutter) 40px;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity 260ms var(--ease), visibility 260ms;
  overflow-y: auto;
}
.mnav.is-open { opacity: 1; visibility: visible; }
.mnav__i {
  font-family: var(--font-display);
  font-size: 26px; letter-spacing: -0.02em; font-weight: 500;
  padding: 18px 0; border-bottom: 1px solid rgb(245 245 246 / 0.12);
  display: flex; align-items: center; justify-content: space-between;
}
.mnav__sub { padding: 18px 0 4px; }
.mnav__sub-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: rgb(245 245 246 / 0.4); text-transform: uppercase; margin-bottom: 14px; }
.mnav__sub a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 15px; color: rgb(245 245 246 / 0.78); }
.mnav__sub a[data-soon="1"] { color: rgb(245 245 246 / 0.4); }
.mnav__cta { margin-top: auto; padding-top: 32px; }
.mnav__cta .btn { width: 100%; justify-content: center; background: #f5f5f6; color: #121214; }
body.is-locked { overflow: hidden; }


/* ============================================================
 * PLACEHOLDERY W SLOTACH LICZBOWYCH
 * Spec 12: placeholder ma zachować długość i hierarchię designu.
 * Chip 11 px w slocie na 88-pikselową liczbę zostawiał dziurę,
 * więc w kontekście .num rośnie do skali tej liczby.
 * ============================================================ */

.num > .tbd,
.sw__metric-v > .tbd {
  font-size: clamp(17px, 1.9vw, 26px);
  letter-spacing: 0.03em;
  padding: 12px 18px;
  border-radius: var(--r-md);
  line-height: 1;
  vertical-align: middle;
}

.ind__m-v > .tbd { font-size: 11px; padding: 4px 7px; }

.case__metric { line-height: 1; margin-bottom: 14px; }


/* ============================================================
 * TRYB QA (?qa=1)
 * Hero ma 100svh. Przy full-page screenshocie viewport rosnie do
 * wysokosci calej strony, wiec hero rosnie razem z nim i zrzut
 * sie duplikuje. W QA przybijamy go do stalej wysokosci.
 * ============================================================ */
html[data-qa] { scroll-behavior: auto; }
[data-qa] .hero { min-height: 900px; }
@media (max-width: 720px) { [data-qa] .hero { min-height: 720px; } }

/* ============================================================
 * SYGNATURA: SCHEMAT INSTALACJI
 *
 * Sekcja architektury byla najslabszym momentem strony - piec rzedow
 * szarych chipow. Zastapiona rysunkiem, ktory pokazuje to samo, ale
 * jako system: przeplyw z lewa na prawo, zawory w punktach decyzyjnych,
 * granica systemu i petla zapisu zwrotnego narysowana jawnie.
 *
 * Rejestr formalny to rysunek instalacyjny, nie render 3D. W monochromie
 * kreska i tekstura sa jedynym dostepnym jezykiem, wiec caly rysunek
 * jest z nich zbudowany.
 * ============================================================ */

.arch__figure { margin-top: 8px; }

.arch__plate {
  width: 100%;
  height: auto;
  display: block;
  color: var(--text-invert);
  overflow: visible;
}

.arch__plate text { fill: currentColor; }
.arch__plate path, .arch__plate rect, .arch__plate circle, .arch__plate line { vector-effect: non-scaling-stroke; }

/* Oprawa */
.arch__plate .plate  { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.14; }
.arch__plate .corner { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.5; }
.arch__plate .hair   { stroke: currentColor; stroke-width: 1; opacity: 0.14; fill: none; }

/* Etykiety */
.arch__plate .plate-lbl,
.arch__plate .boundlbl,
.arch__plate .leglbl,
.arch__plate .wblbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; opacity: 0.44; }
.arch__plate .num       { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; opacity: 0.4; }
.arch__plate .colname   { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; opacity: 0.82; }
.arch__plate .blbl      { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; opacity: 0.88; }
.arch__plate .corelbl   { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; opacity: 0.94; }
.arch__plate .vlbl      { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; opacity: 0.8; }
.arch__plate .vkind,
.arch__plate .soonlbl,
.arch__plate .actlbl    { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; opacity: 0.42; }
.arch__plate .actlbl    { opacity: 0.6; }

/* Bloki i przewody */
.arch__plate .blk    { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.34; }
.arch__plate .blk--soon { stroke-dasharray: 3 3; opacity: 0.22; }
.arch__plate .hatch  { fill: url(#omHatch); stroke: none; opacity: 0.5; }
.arch__plate .ln     { stroke: currentColor; stroke-width: 1; opacity: 0.3; fill: none; }
.arch__plate .bus    { stroke: currentColor; stroke-width: 1; opacity: 0.2; fill: none; }
.arch__plate .flow   { stroke: currentColor; stroke-width: 1.2; opacity: 0.42; fill: none; }
.arch__plate .arw    { fill: currentColor; opacity: 0.5; stroke: none; }
.arch__plate .node   { fill: currentColor; opacity: 0.45; stroke: none; }
.arch__plate .vlv    { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.62; }

/* Rdzen jest jedynym elementem z wypelnieniem - dlatego czyta sie
   jako cialo stale, a wszystko wokol jako instalacja. */
.arch__plate .core   { fill: rgb(245 245 246 / 0.05); stroke: currentColor; stroke-width: 1.2; opacity: 0.9; }
.arch__plate .bound  { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.24; stroke-dasharray: 6 5; }

/* ---------- Wejscie ----------
 * Rysunek sklada sie w kolejnosci przeplywu: najpierw oprawa, potem
 * zrodla, laczność, rdzen, produkty, na koncu akcje i petla zwrotna.
 * To ta sama kolejnosc, w ktorej czyta sie schemat. */

@media (prefers-reduced-motion: no-preference) {
  .arch__plate .plate, .arch__plate .corner, .arch__plate .hair,
  .arch__plate .plate-lbl, .arch__plate .leglbl { opacity: 0; transition: opacity 700ms var(--ease); }
  .arch__plate .blk, .arch__plate .blbl, .arch__plate .num, .arch__plate .colname,
  .arch__plate .ln, .arch__plate .bus, .arch__plate .arw, .arch__plate .node,
  .arch__plate .vlv, .arch__plate .vlbl, .arch__plate .vkind,
  .arch__plate .core, .arch__plate .corelbl, .arch__plate .bound, .arch__plate .boundlbl,
  .arch__plate .hatch, .arch__plate .soonlbl, .arch__plate .flow,
  .arch__plate .actlbl, .arch__plate .wblbl {
    opacity: 0;
    transition: opacity 620ms var(--ease);
  }

  .arch__figure.is-in .arch__plate .plate      { opacity: 0.14; transition-delay: 0ms; }
  .arch__figure.is-in .arch__plate .corner     { opacity: 0.5;  transition-delay: 60ms; }
  .arch__figure.is-in .arch__plate .hair       { opacity: 0.14; transition-delay: 120ms; }
  .arch__figure.is-in .arch__plate .plate-lbl  { opacity: 0.44; transition-delay: 160ms; }

  .arch__figure.is-in .arch__plate .num        { opacity: 0.4;  transition-delay: 240ms; }
  .arch__figure.is-in .arch__plate .colname    { opacity: 0.82; transition-delay: 240ms; }
  .arch__figure.is-in .arch__plate .blk        { opacity: 0.34; transition-delay: 320ms; }
  .arch__figure.is-in .arch__plate .blk--soon  { opacity: 0.22; transition-delay: 620ms; }
  .arch__figure.is-in .arch__plate .blbl       { opacity: 0.88; transition-delay: 360ms; }
  .arch__figure.is-in .arch__plate .bus        { opacity: 0.2;  transition-delay: 400ms; }
  .arch__figure.is-in .arch__plate .ln         { opacity: 0.3;  transition-delay: 420ms; }
  .arch__figure.is-in .arch__plate .node       { opacity: 0.45; transition-delay: 440ms; }
  .arch__figure.is-in .arch__plate .arw        { opacity: 0.5;  transition-delay: 460ms; }

  .arch__figure.is-in .arch__plate .vlv        { opacity: 0.62; transition-delay: 520ms; }
  .arch__figure.is-in .arch__plate .vlbl       { opacity: 0.8;  transition-delay: 520ms; }
  .arch__figure.is-in .arch__plate .vkind      { opacity: 0.42; transition-delay: 560ms; }

  .arch__figure.is-in .arch__plate .core       { opacity: 0.9;  transition-delay: 640ms; }
  .arch__figure.is-in .arch__plate .corelbl    { opacity: 0.94; transition-delay: 700ms; }
  .arch__figure.is-in .arch__plate .hatch      { opacity: 0.5;  transition-delay: 680ms; }
  .arch__figure.is-in .arch__plate .soonlbl    { opacity: 0.42; transition-delay: 700ms; }

  .arch__figure.is-in .arch__plate .bound      { opacity: 0.24; transition-delay: 800ms; }
  .arch__figure.is-in .arch__plate .boundlbl   { opacity: 0.44; transition-delay: 840ms; }

  .arch__figure.is-in .arch__plate .flow       { opacity: 0.42; transition-delay: 920ms; }
  .arch__figure.is-in .arch__plate .actlbl     { opacity: 0.6;  transition-delay: 980ms; }
  .arch__figure.is-in .arch__plate .wblbl      { opacity: 0.44; transition-delay: 1040ms; }
  .arch__figure.is-in .arch__plate .leglbl     { opacity: 0.44; transition-delay: 1100ms; }
}

/* ---------- Podpisy warstw pod rysunkiem ---------- */

.arch__legend {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 44px;
}
.arch__lg { background: var(--panel); padding: 22px 20px 24px; }
.arch__lg-n { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--text-faint); margin-bottom: 12px; }
.arch__lg-t { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 8px; }
.arch__lg-d { font-size: 14.5px; line-height: 1.5; color: var(--text-dim); }

/* ---------- Mobile: rysunek przewija sie w poziomie ----------
 * Schemat instalacji nie da sie sensownie zlozyc do 390 px bez
 * zniszczenia sekwencji. Zamiast tego dostaje wlasny obszar przewijania,
 * z jawna informacja, ze mozna nim przesunac. */

@media (max-width: 1000px) {
  .arch__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.arch__hint {
  display: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  text-transform: uppercase;
  margin-top: 12px;
}

@media (max-width: 860px) {
  .arch__figure { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .arch__plate { min-width: 940px; }
  .arch__hint { display: block; }
}

@media (max-width: 720px) {
  .arch__legend { grid-template-columns: minmax(0, 1fr); }
  .arch__lg { padding: 18px 16px 20px; }
}

/* ============================================================
 * PAS INTEGRACJI
 *
 * Pierwsze pytanie, jakie zadaje sobie kupujacy, brzmi "czy to
 * zadziala z tym, co juz mam". Odpowiedz stoi zaraz pod hero,
 * zanim zacznie sie jakakolwiek narracja.
 *
 * Marquee jest na tej stronie dokladnie jeden. Dwa rzedy jada w
 * przeciwne strony, bo jeden rzad w jedna strone czyta sie jak
 * tasma reklamowa, a dwa przeciwbiezne jak ruch systemu.
 * ============================================================ */

.integr {
  padding-block: 96px 88px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
  overflow: hidden;
}

.integr__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 52px;
}
.integr__t {
  font-family: var(--font-display);
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.2; letter-spacing: -0.025em; font-weight: 500;
  max-width: 22ch;
}
.integr__d { font-size: 14.5px; line-height: 1.6; color: var(--text-dim); max-width: 46ch; }

/* Maska wygaszajaca krawedzie. Bez niej logotypy ucinaja sie
   twardo i pas wyglada jak przyciety, a nie jak przewijajacy sie. */
.integr__rails {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.integr__rail { display: flex; width: max-content; }
.integr__rail + .integr__rail { margin-top: 14px; }

.integr__track {
  display: flex;
  align-items: center;
  gap: 0;
  animation: railL 64s linear infinite;
}
.integr__rail--b .integr__track { animation: railR 78s linear infinite; }

@keyframes railL { from { transform: translate3d(0,0,0); }      to { transform: translate3d(-50%,0,0); } }
@keyframes railR { from { transform: translate3d(-50%,0,0); }   to { transform: translate3d(0,0,0); } }

/* Sam znak w 26 px jest nieczytelny dla polowy tych marek (SAP,
   Snowflake, Databricks). Lockup znak + nazwa czyta sie od razu
   i tak wlasnie wygladaja realne sciany integracji. */
.integr__i {
  flex: none;
  height: 92px;
  padding-inline: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-right: 1px solid var(--hairline);
  color: var(--text);
  opacity: 0.55;
  transition: opacity 260ms var(--ease);
  white-space: nowrap;
}
.integr__i:hover { opacity: 1; }
.integr__i svg { width: 22px; height: 22px; fill: currentColor; display: block; flex: none; }
.integr__i span {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.012em;
}

/* Metody podlaczenia. Logotypy mowia "z czym", ten wiersz mowi "jak". */
.integr__how {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 52px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
}
.integr__how b {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 500;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.integr__how span { font-size: 13.5px; color: var(--text-faint); align-self: center; margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  .integr__track { animation: none; }
  .integr__rail { width: 100%; overflow-x: auto; }
}

@media (max-width: 720px) {
  .integr { padding-block: 64px 60px; }
  .integr__head { margin-bottom: 34px; gap: 18px; }
  .integr__i { height: 72px; padding-inline: 20px; gap: 10px; }
  .integr__i svg { width: 19px; height: 19px; }
  .integr__i span { font-size: 13px; }
  .integr__how { margin-top: 34px; }
  .integr__how span { margin-left: 0; width: 100%; }
}

/* ============================================================
 * CASE STUDIES - ciemny split z karuzelą
 *
 * Bylo: dwa wiersze zlozone z samych placeholderow. Sekcja, ktora
 * ma byc dowodem, byla najbardziej pusta na calej stronie.
 *
 * Jest: ciemny panel z jedna duza liczba, cytatem i zdjeciem obok.
 * Liczba jest kotwica, cytat jest gloscem, zdjecie daje skale.
 * Drugi i ostatni ciemny rozdzial strony.
 * ============================================================ */

/* Panel byl na --panel (#121214) i przy czarno-bialym zdjeciu cala
   sekcja robila sie glucha. Jasniejszy grafit plus kolorowy kadr
   podnosza ja, nie tracac charakteru. */
.cases2 {
  background: #1e1e23;
  color: var(--text-invert);
  overflow: hidden;
}
.cases2[data-invert] { --panel: #1e1e23; --surface: #1e1e23; --surface-2: #2a2a30; }

.cases2__grid {
  display: grid;
  grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  min-height: 660px;
}

.cases2__panel {
  padding: 84px clamp(40px, 5vw, 88px) 80px;
  display: flex;
  flex-direction: column;
}

.cases2__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 46px;
}
.cases2__h {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.9vw, 40px);
  line-height: 1.14;
  letter-spacing: -0.028em;
  font-weight: 500;
  max-width: 20ch;
}

.cases2__nav { display: flex; gap: 8px; flex: none; }
.cases2__nav button {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgb(245 245 246 / 0.28);
  color: var(--text-invert);
  display: grid; place-items: center;
  transition: background-color 220ms var(--ease), border-color 220ms var(--ease);
}
.cases2__nav button:hover { background: rgb(245 245 246 / 0.12); border-color: rgb(245 245 246 / 0.6); }

/* Pasek klientów. Aktywny dostaje pelna krycie i kreske pod spodem. */
.cases2__tabs {
  display: flex;
  gap: 0;
  border-top: 1px solid rgb(245 245 246 / 0.16);
  margin-bottom: 52px;
}
.cases2__tab {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 26px 18px 0;
  margin-right: 26px;
  position: relative;
  opacity: 0.42;
  transition: opacity 260ms var(--ease);
  color: var(--text-invert);
  white-space: nowrap;
}
.cases2__tab::after {
  content: "";
  position: absolute; left: 0; top: -1px; height: 1px; width: 0;
  background: var(--text-invert);
  transition: width 460ms var(--ease);
}
.cases2__tab[aria-selected="true"] { opacity: 1; }
.cases2__tab[aria-selected="true"]::after { width: calc(100% - 26px); }
.cases2__tab:hover { opacity: 0.72; }
.cases2__tab svg { width: 20px; height: 20px; flex: none; }
.cases2__tab b { font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; }

.cases2__slides { flex: 1; display: grid; }
.c2 {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 460ms var(--ease), transform 460ms var(--ease), visibility 460ms;
}
.c2.is-active { opacity: 1; visibility: visible; transform: none; }

.c2__metric {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 68px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  margin-bottom: 14px;
}
.c2__metric i { font-style: normal; font-size: 0.5em; letter-spacing: -0.01em; margin-left: 4px; }
.c2__metric-l { font-size: 15.5px; color: rgb(245 245 246 / 0.7); margin-bottom: 26px; max-width: 44ch; }

.c2__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.c2__pills span {
  font-size: 12.5px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgb(245 245 246 / 0.2);
  color: rgb(245 245 246 / 0.78);
}

.c2__quote {
  border-left: 1px solid rgb(245 245 246 / 0.28);
  padding-left: 22px;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.5;
  letter-spacing: -0.012em;
  max-width: 46ch;
  margin-bottom: 22px;
}
.c2__by {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(245 245 246 / 0.56);
}

.cases2__media { position: relative; overflow: hidden; background: #2a2a30; }
.cases2__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 640ms var(--ease), transform 900ms var(--ease);
}
.cases2__media img.is-active { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .cases2__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .cases2__media { height: 320px; order: -1; }
  .cases2__panel { padding: 56px 32px 60px; }
  .cases2__tabs { overflow-x: auto; margin-bottom: 38px; }
}

@media (max-width: 720px) {
  .cases2__panel { padding: 44px 20px 48px; }
  .cases2__top { flex-direction: column; gap: 22px; margin-bottom: 30px; }
  .cases2__media { height: 240px; }
  .c2__quote { padding-left: 16px; }
}

/* ============================================================
 * ODTWARZACZ NAGRANIA
 * Realna sesja w produkcie zamiast zrzutu. Poster i preload="none",
 * wiec 5 MB schodzi dopiero na klikniecie. Wlasny przycisk zamiast
 * natywnego, zeby stan spoczynku byl czescia kompozycji; po starcie
 * oddajemy sterowanie natywnym kontrolkom.
 * ============================================================ */

.demo__player { position: relative; background: var(--panel); }
.demo__player video { width: 100%; height: auto; display: block; }

.demo__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 18px;
  justify-items: center;
  background: linear-gradient(to bottom, rgb(18 18 20 / 0.3), rgb(18 18 20 / 0.62));
  color: #f5f5f6;
  transition: opacity 380ms var(--ease), visibility 380ms;
}
.demo__play[hidden] { display: grid; opacity: 0; visibility: hidden; pointer-events: none; }

.demo__play-ico {
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 1px solid rgb(245 245 246 / 0.5);
  background: rgb(18 18 20 / 0.34);
  backdrop-filter: blur(10px);
  display: grid; place-items: center;
  padding-left: 5px;
  transition: transform 300ms var(--ease), background-color 300ms var(--ease);
}
.demo__play:hover .demo__play-ico { transform: scale(1.06); background: rgb(18 18 20 / 0.56); }

.demo__play-txt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgb(18 18 20 / 0.62);
  backdrop-filter: blur(8px);
}
.demo__play-txt b { font-weight: 500; opacity: 0.66; margin-left: 6px; }

@media (max-width: 720px) {
  .demo__play-ico { width: 58px; height: 58px; }
  .demo__play-txt { font-size: 10px; }
}