/* ════════════════════════════════════════════════════════════════
   SEMFLEX - system bazowy
   Jezyk wizualny: KRESLARNIA 01 (papier techniczny, tusz, czerwien
   kontrolna). Rzemioslo: dyscyplina z landmark-site.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ── Papier i tusz (paleta Kreslarni) ── */
  --paper-50:  #E8E9E4;
  --paper-100: #D7D8D2;
  --paper-200: #C9CAC3;
  --ink-900:   #090A09;
  --ink-700:   #262825;
  --graphite:  #41433F;
  --guide:     #92958E;
  --control:   #D9342B;   /* czerwien kontrolna - max 2% powierzchni */

  /* ── Typografia ── */
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Rytm ── */
  --pad-x: clamp(20px, 5vw, 88px);
  --maxw: 1240px;
  --sec-y: clamp(72px, 11vh, 152px);

  /* ── Ruch: POMIAR → KRESLENIE → DOCISK ── */
  --ease-mech: cubic-bezier(.76, 0, .24, 1);
  --ease-stamp: cubic-bezier(.2, 1, .4, 1);
  --t-fast: 120ms;
  --t-base: 240ms;
  --t-slow: 480ms;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink-900);
  background: var(--paper-100);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Wlokna papieru - subtelne, nie moga przeszkadzac czytelnosci */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ── Kontener: ZAWSZE wysrodkowany ── */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  position: relative;
  z-index: 1;
}

/* ── Typografia ── */
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.02em; line-height: 1.04; text-wrap: balance; }
h1 { font-size: clamp(38px, 6.4vw, 84px); }
h2 { font-size: clamp(28px, 4vw, 50px); }
h3 { font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -.01em; line-height: 1.28; }
p  { margin: 0 0 1.1em; }
.lead { font-size: clamp(17px, 1.5vw, 21px); color: var(--ink-700); max-width: 62ch; }

/* Etykieta techniczna - sygnatura marki */
.tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--graphite);
  display: flex;
  align-items: center;
  gap: 12px;
}
.tag::before {
  content: '';
  width: 30px;
  height: 1px;
  background: currentColor;
  opacity: .55;
  flex: none;
}
.tag--red { color: var(--control); }

/* ── Sekcje ── */
.sec { padding-block: var(--sec-y); position: relative; z-index: 1; }
.sec--line { border-top: 1px solid rgba(9,10,9,.13); }
.sec-head { margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head .tag { margin-bottom: 18px; }

/* ── Przyciski ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 17px 30px;
  border: 1.5px solid var(--ink-900);
  background: var(--ink-900);
  color: var(--paper-50);
  transition: background var(--t-base) var(--ease-mech), color var(--t-base) var(--ease-mech), transform var(--t-fast) var(--ease-stamp);
}
.btn:hover { background: transparent; color: var(--ink-900); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--ink-900); }
.btn--ghost:hover { background: var(--ink-900); color: var(--paper-50); }
.btn__arrow { transition: transform var(--t-base) var(--ease-mech); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ── Nawigacja ── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  background: rgba(215,216,210,.9);
  backdrop-filter: blur(11px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base) var(--ease-mech);
}
.nav.is-stuck { border-bottom-color: rgba(9,10,9,.14); }
.nav__in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 15px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* Logo wlasne SemFlex (oryginalny plik, czern #231F20 + czerwien #EC1C24) */
.nav__logo { display: block; line-height: 0; text-decoration: none; }
.nav__logo img { width: 148px; height: auto; display: block; transition: opacity var(--t-fast) var(--ease-mech); }
.nav__logo:hover img { opacity: .72; }
@media (max-width: 420px) { .nav__logo img { width: 124px; } }
.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__links a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--graphite);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease-mech), border-color var(--t-fast) var(--ease-mech);
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink-900); border-bottom-color: var(--control); }
/* Specyficznosc: `.nav__links a` (0,1,1) bije samo `.nav__cta` (0,1,0)
   i zjada padding przycisku. Dlatego kotwiczymy w kontenerze. */
.nav__links a.nav__cta {
  padding: 12px 22px;
  font-size: 11px;
  color: var(--paper-50);
  border: 1.5px solid var(--ink-900);
  border-bottom-color: var(--ink-900);
}
.nav__links a.nav__cta:hover { color: var(--ink-900); border-bottom-color: var(--ink-900); }
.nav__burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav__burger span { display: block; width: 22px; height: 1.5px; background: var(--ink-900); margin: 5px 0; transition: transform var(--t-base) var(--ease-mech), opacity var(--t-fast); }
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav__burger { display: block; }
  .nav__links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--paper-100);
    border-bottom: 1px solid rgba(9,10,9,.14);
    padding: 0 var(--pad-x);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-slow) var(--ease-mech), padding var(--t-slow) var(--ease-mech);
  }
  .nav.is-open .nav__links { max-height: 70vh; padding: 12px var(--pad-x) 26px; }
  .nav__links a { padding: 13px 0; width: 100%; font-size: 13px; }
  .nav__cta { margin-top: 10px; }
}

/* ── Stopka ── */
.foot { background: var(--ink-900); color: var(--paper-200); padding-block: clamp(52px, 7vw, 84px) 30px; position: relative; z-index: 1; }
.foot a { color: var(--paper-50); text-decoration: none; border-bottom: 1px solid rgba(232,233,228,.28); transition: border-color var(--t-fast); }
.foot a:hover { border-bottom-color: var(--control); }
.foot__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 44px; margin-bottom: 54px; }
.foot__col h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--guide); margin: 0 0 16px; font-weight: 500; }
.foot__col ul { list-style: none; margin: 0; padding: 0; }
.foot__col li { margin-bottom: 9px; font-size: 15px; }
/* To samo logo na ciemnym tle: odwracamy do bieli, czerwien wraca obrotem barwy */
.foot__logo { line-height: 0; margin-bottom: 18px; }
.foot__logo img { width: 160px; height: auto; filter: invert(1) hue-rotate(180deg); }
.foot__legal { font-family: var(--mono); font-size: 11.5px; line-height: 1.9; color: var(--guide); border-top: 1px solid rgba(232,233,228,.14); padding-top: 26px; display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: space-between; }
@media (max-width: 760px) { .foot__grid { grid-template-columns: 1fr; gap: 34px; } }

/* ── Wejscia (POMIAR → KRESLENIE) ── */
.rise { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow) var(--ease-mech), transform var(--t-slow) var(--ease-mech); }
.rise.is-in { opacity: 1; transform: none; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink-900); color: var(--paper-50);
  padding: 12px 20px; z-index: 100;
  font-family: var(--mono); font-size: 12px;
}
.skip:focus { left: 12px; top: 12px; }
:focus-visible { outline: 2px solid var(--control); outline-offset: 3px; }

/* ── Przelacznik jezyka ── */
.nav__links a.lang {
  font-size: 11px;
  letter-spacing: .14em;
  border: 1px solid rgba(9,10,9,.28);
  padding: 8px 11px;
  color: var(--graphite);
}
.nav__links a.lang:hover { color: var(--ink-900); border-color: var(--ink-900); }
.nav__links a.lang.is-hidden { display: none; }

/* ══════ ARSENAŁ: rysunki techniczne przy blokach uslug ══════ */
.block--fig { display: grid; grid-template-columns: 156px 1fr; gap: clamp(24px, 3.5vw, 54px); align-items: start; }
.block--fig .block__body > * { max-width: 74ch; }
.fig { color: var(--graphite); position: sticky; top: 118px; }
.fig svg { width: 100%; height: auto; overflow: visible; }
/* kreska rysuje sie dopiero, gdy blok wejdzie w kadr */
.fig svg :is(path, circle, rect, line) {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  transition: stroke-dashoffset 1100ms var(--ease-mech);
}
.is-in .fig svg :is(path, circle, rect, line) { stroke-dashoffset: 0; }
.is-in .fig svg > *:nth-child(2) { transition-delay: 140ms; }
.is-in .fig svg > *:nth-child(3) { transition-delay: 260ms; }
.is-in .fig svg > *:nth-child(4) { transition-delay: 360ms; }
.is-in .fig svg > *:nth-child(5) { transition-delay: 450ms; }
/* czerwien kontrolna na module, nad ktorym stoi kursor */
.block--fig:hover .fig { color: var(--control); transition: color var(--t-base) var(--ease-mech); }
@media (max-width: 820px) {
  .block--fig { grid-template-columns: 84px 1fr; gap: 20px; }
  .fig { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .fig svg :is(path, circle, rect, line) { stroke-dashoffset: 0; }
}

/* ══════════════════════════════════════════════════════════════
   RUCH: przejscia miedzy stronami, linia postepu, odliczanie
   ══════════════════════════════════════════════════════════════ */

/* ── Przejscia miedzy podstronami (View Transitions) ──
   Arkusz nie znika i nie pojawia sie skokowo, tylko przesuwa sie
   w podajniku, tak jak papier w maszynie kreslarskiej. */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: papier-out 260ms var(--ease-mech) both;
}
::view-transition-new(root) {
  animation: papier-in 380ms var(--ease-mech) both;
}
@keyframes papier-out {
  to { opacity: 0; transform: translateY(-14px); }
}
@keyframes papier-in {
  from { opacity: 0; transform: translateY(20px); }
}
/* logo i nawigacja zostaja nieruchome przy zmianie strony */
.nav { view-transition-name: pasek-gorny; }
.foot { view-transition-name: pasek-dolny; }

/* ── Linia postepu: kreska tuszem rysowana wzdluz gory ── */
.progres {
  position: fixed;
  inset: 0 auto auto 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--control);
  z-index: 70;
  pointer-events: none;
}
/* nowoczesne przegladarki: bez JavaScriptu, prosto ze scrolla */
@supports (animation-timeline: scroll()) {
  .progres {
    animation: rysuj-linie linear;
    animation-timeline: scroll();
  }
}
@keyframes rysuj-linie { to { transform: scaleX(1); } }

/* ── Odliczanie liczb w pasku zaufania ── */
.trust__num b { font-variant-numeric: tabular-nums; }

/* ── Nagłówki: litery wjezdzaja spod linii, jak docisk glowicy ── */
.page-head h1 span, .hero h1 span.wers {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.page-head h1 span i, .hero h1 span.wers i {
  display: inline-block;
  font-style: normal;
  transform: translateY(102%);
  animation: docisk 620ms var(--ease-mech) forwards;
}
@keyframes docisk { to { transform: translateY(0); } }

/* ── Podnoszenie kart uslug ── */
.svc__item { transition: background var(--t-base) var(--ease-mech), transform var(--t-base) var(--ease-mech); }
.svc__item:hover { transform: translateY(-3px); }

/* LINIA NAPEDOWA USUNIETA 12.08 (decyzja Lukasza). Probowana w dwoch
   wariantach: srodkiem marginesu z odbiciami i na krawedzi tresci.
   Oba czytaly sie jak artefakt. Nie wracac bez nowego pomyslu,
   sam koncept "kreska przez cala strone" zostal odrzucony w praktyce. */

/* ── Rysunki techniczne: delikatny obrot przy najechaniu ── */
.block--fig:hover .fig svg { transform: rotate(-2deg) scale(1.03); }
.fig svg { transition: transform var(--t-slow) var(--ease-mech); }

@media (prefers-reduced-motion: reduce) {
  .progres { display: none; }
  .page-head h1 span i, .hero h1 span.wers i { transform: none; animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}


/* ══════════════════════════════════════════════════════════════
   STRONA GLOWNA (hero, pasek zaufania, karty uslug, kontakt)
   Przeniesione z dist/index.html 12.08, zeby wersja PL i EN
   korzystaly z JEDNEGO zrodla stylow zamiast dwoch kopii.
   ══════════════════════════════════════════════════════════════ */
/* ════════ STRONA GŁÓWNA ════════ */

/* ── HERO: pełnoekranowy slajd, arkusz w maszynie ── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 88px;
  overflow: hidden;
}
/* siatka kreślarska */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(146,149,142,.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(146,149,142,.22) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 78% 68% at 30% 45%, #000 12%, transparent 76%);
  pointer-events: none;
}
.hero__in { position: relative; z-index: 2; width: 100%; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: end; }
.hero__tag { margin-bottom: 26px; }
.hero h1 { margin-bottom: 30px; }
.hero h1 em { font-style: normal; position: relative; white-space: nowrap; }
/* podkreślenie rysowane jak linia plotera */
.hero h1 em::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: .06em;
  height: 3px;
  background: var(--control);
  transform: scaleX(0);
  transform-origin: left;
  animation: draw 900ms var(--ease-mech) 620ms forwards;
}
@keyframes draw { to { transform: scaleX(1); } }
.hero__lead { margin-bottom: 38px; }
/* kategoria uslugowa: mowi CZYM sie zajmujemy, bo haslo mowi tylko JAK */
.hero__kicker {
  font-family: var(--mono);
  font-size: clamp(11px, 1.05vw, 13px);
  letter-spacing: .07em;
  color: var(--graphite);
  margin: 0 0 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(9,10,9,.18);
  max-width: 66ch;
  line-height: 1.9;
}
.hero__acts { display: flex; flex-wrap: wrap; gap: 14px; }

/* panel parametrów, jak odczyt z maszyny */
.gauge {
  border: 1px solid rgba(9,10,9,.2);
  background: rgba(232,233,228,.5);
  padding: 22px 24px;
  font-family: var(--mono);
  font-size: 12px;
}
.gauge__row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed rgba(9,10,9,.16); }
.gauge__row:last-child { border-bottom: 0; }
.gauge__k { color: var(--graphite); letter-spacing: .08em; text-transform: uppercase; font-size: 10.5px; }
.gauge__v { font-weight: 600; }
.gauge__v--red { color: var(--control); }
.hero__scroll { position: absolute; left: var(--pad-x); bottom: 30px; z-index: 2; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }
.hero__scroll b { color: var(--ink-900); font-weight: 600; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .hero { min-height: 92svh; }
}

/* ── PASEK ZAUFANIA ── */
.trust { background: var(--ink-900); color: var(--paper-100); padding-block: clamp(30px, 4vw, 44px); position: relative; z-index: 1; }
.trust__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 44px; }
.trust__badge { display: flex; align-items: center; gap: 15px; }
.trust__mark { width: 42px; height: 42px; flex: none; border-radius: 50%; border: 1.5px solid rgba(232,233,228,.4); display: grid; place-items: center; font-family: var(--mono); font-size: 15px; font-weight: 600; }
.trust__t { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--guide); margin-bottom: 3px; }
.trust__s { font-size: 15px; font-weight: 600; }
.trust__nums { display: flex; flex-wrap: wrap; gap: 26px 46px; }
.trust__num b { display: block; font-size: clamp(24px, 2.6vw, 33px); font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.trust__num span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--guide); }
.trust__note { font-size: 13.5px; color: var(--guide); margin: 7px 0 0; max-width: 46ch; line-height: 1.55; }

/* Oficjalna odznaka Google Partner (zestaw 2026, plik oryginalny).
   Logo Google NIE moze byc przerysowywane ani modyfikowane,
   tylko biale tlo pod nia, bo odznaka jest projektowana na jasne. */
.badge { flex: none; display: block; background: #fff; padding: 9px; border-radius: 3px; line-height: 0; transition: transform var(--t-base) var(--ease-stamp); }
.badge:hover { transform: translateY(-2px); }
.badge img { width: 100px; height: auto; }

/* Korzysc partnerska - konkret dla klienta, nie sama odznaka */
.perk { border: 1px solid rgba(9,10,9,.16); background: var(--paper-50); padding: clamp(24px, 3vw, 34px); display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center; }
.perk__ic { width: 46px; height: 46px; border: 1.5px solid var(--control); color: var(--control); display: grid; place-items: center; font-family: var(--mono); font-size: 19px; font-weight: 600; flex: none; }
.perk h3 { margin-bottom: 6px; }
.perk p { margin: 0; font-size: 15px; color: var(--ink-700); max-width: 68ch; }
.perk small { display: block; margin-top: 9px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--graphite); }
@media (max-width: 780px) { .perk { grid-template-columns: 1fr; gap: 16px; } }

/* ── USŁUGI ── */
/* 4 karty: rowny rzad albo rowne 2x2. auto-fit zostawial pusta komorke. */
.svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(9,10,9,.14); border: 1px solid rgba(9,10,9,.14); }
@media (max-width: 1060px) { .svc { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .svc { grid-template-columns: 1fr; } }
.svc__item { background: var(--paper-100); padding: clamp(28px, 3.2vw, 40px); transition: background var(--t-base) var(--ease-mech); }
.svc__item:hover { background: var(--paper-50); }
.svc__no { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--control); margin-bottom: 18px; }
.svc__item h3 { margin-bottom: 12px; }
.svc__item p { font-size: 15.5px; color: var(--ink-700); margin-bottom: 16px; }
.svc__list { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--graphite); }
.svc__list li { padding: 5px 0 5px 16px; position: relative; }
.svc__list li::before { content: ''; position: absolute; left: 0; top: 13px; width: 7px; height: 1px; background: var(--guide); }

/* ── PROCES ── */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 34px; }
.step { position: relative; padding-top: 26px; border-top: 2px solid var(--ink-900); }
.step__no { position: absolute; top: -13px; right: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; background: var(--paper-100); padding-left: 10px; color: var(--graphite); }
.step h3 { margin-bottom: 10px; }
.step p { font-size: 15px; color: var(--ink-700); margin: 0; }

/* ── NARZĘDZIA (wyróżnik) ── */
.tools { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 76px); align-items: center; }
.tools__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(9,10,9,.16); }
.tools__list li { display: grid; grid-template-columns: 128px 1fr; gap: 18px; padding: 17px 0; border-bottom: 1px solid rgba(9,10,9,.16); align-items: baseline; }
.tools__list b { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.tools__list span { font-size: 15px; color: var(--ink-700); }
@media (max-width: 820px) {
  .tools { grid-template-columns: 1fr; }
  .tools__list li { grid-template-columns: 1fr; gap: 4px; }
}

/* ── KONTAKT ── */
.cta { background: var(--ink-900); color: var(--paper-100); }
.cta h2 { color: var(--paper-50); margin-bottom: 22px; }
.cta .lead { color: var(--paper-200); }
.cta .tag { color: var(--guide); }
.cta__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.cta .btn { background: var(--control); border-color: var(--control); color: #fff; }
.cta .btn:hover { background: transparent; color: var(--control); }
.card {
  border: 1px solid rgba(232,233,228,.24);
  padding: clamp(26px, 3vw, 36px);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 2;
}
.card h4 { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--guide); margin: 0 0 16px; font-weight: 500; }
.card dl { margin: 0; display: grid; grid-template-columns: 78px 1fr; gap: 4px 14px; }
.card dt { color: var(--guide); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.card dd { margin: 0; }
@media (max-width: 820px) { .cta__grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════
   MASZYNOWNIA: trzy jednostki pracujace rownolegle
   Ilustruje teze "ludzka kreatywnosc, wydajnosc maszyn": czlowiek
   stawia pytanie, maszyny miela rownolegle. Rysunek techniczny,
   nie efekt: ramka, podzialka, przebieg i odczyt, wszystko 1 px.
   Nazwy silnikow celowo NIE wystepuja (stack = know-how).
   ══════════════════════════════════════════════════════════════ */
.maszyny { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(9,10,9,.14); border: 1px solid rgba(9,10,9,.14); }
@media (max-width: 780px) { .maszyny { grid-template-columns: 1fr; } }

.masz { background: var(--paper-100); padding: clamp(22px, 2.6vw, 32px); position: relative; }
.masz__no { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--graphite); margin-bottom: 4px; }
.masz__rola { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--guide); margin-bottom: 18px; }

/* przebieg: kreska rysowana w petli, jak glowica plotera */
.masz__rys { width: 100%; height: 62px; overflow: visible; color: var(--ink-900); }
.masz__rys .tor { stroke: currentColor; stroke-width: 1; fill: none; opacity: .18; }
.masz__rys .slad {
  stroke: currentColor; stroke-width: 1.2; fill: none;
  stroke-dasharray: 260; stroke-dashoffset: 260;
  animation: masz-kresli 2.8s var(--ease-mech) infinite;
}
.masz__rys .glowa { fill: var(--control); opacity: 0; animation: masz-glowa 2.8s linear infinite; }
.masz:nth-child(2) .slad, .masz:nth-child(2) .glowa { animation-delay: .45s; }
.masz:nth-child(3) .slad, .masz:nth-child(3) .glowa { animation-delay: .9s; }

@keyframes masz-kresli {
  0%   { stroke-dashoffset: 260; }
  62%  { stroke-dashoffset: 0; }
  88%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes masz-glowa {
  0%, 100% { opacity: 0; }
  6%, 60%  { opacity: 1; }
}

/* odczyt stanu: pasek wartosci przesuwany skokowo, jak licznik mechaniczny */
.masz__odczyt { margin-top: 18px; height: 20px; overflow: hidden; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--ink-700); }
.masz__odczyt ul { list-style: none; margin: 0; padding: 0; animation: masz-odczyt 8.4s steps(4) infinite; }
.masz__odczyt li { height: 20px; line-height: 20px; }
.masz:nth-child(2) .masz__odczyt ul { animation-delay: -2.8s; }
.masz:nth-child(3) .masz__odczyt ul { animation-delay: -5.6s; }
@keyframes masz-odczyt { to { transform: translateY(-80px); } }

/* podzialka postepu pod odczytem */
.masz__skala { margin-top: 14px; height: 3px; background: rgba(9,10,9,.12); position: relative; overflow: hidden; }
.masz__skala::after {
  content: ''; position: absolute; inset: 0; background: var(--ink-900);
  transform-origin: left; transform: scaleX(0);
  animation: masz-skala 2.8s var(--ease-mech) infinite;
}
.masz:nth-child(2) .masz__skala::after { animation-delay: .45s; }
.masz:nth-child(3) .masz__skala::after { animation-delay: .9s; }
@keyframes masz-skala { 0% { transform: scaleX(0); } 62%,88% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }

/* stopka sekcji: czlowiek na wejsciu i na wyjsciu */
.maszyny-stopka { display: flex; flex-wrap: wrap; gap: 14px 40px; justify-content: space-between; align-items: baseline; margin-top: 26px; font-family: var(--mono); font-size: 11.5px; color: var(--graphite); }
.maszyny-stopka b { color: var(--ink-900); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .masz__rys .slad { stroke-dashoffset: 0; animation: none; }
  .masz__rys .glowa { opacity: 0; animation: none; }
  .masz__odczyt ul { animation: none; }
  .masz__skala::after { transform: scaleX(1); animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   KONSOLA W HERO: maszyna przy pracy, widoczna wprost
   Ciemna plyta z tekstem w kolorze papieru. Czerwien TYLKO na
   linii STOP, bo to jest sedno przekazu: bramka odmawia wykonania.
   Bez JS - wiersze wchodza opoznieniem animacji, calosc w petli.
   ══════════════════════════════════════════════════════════════ */
.konsola {
  background: var(--ink-900);
  color: var(--paper-200);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.85;
  padding: 18px 20px 20px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.konsola__pasek { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(232,233,228,.16); }
.konsola__kropka { width: 7px; height: 7px; border-radius: 50%; background: rgba(232,233,228,.28); flex: none; }
.konsola__tytul { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--guide); }

.konsola ol { list-style: none; margin: 0; padding: 0; min-height: 172px; }
.konsola li { opacity: 0; animation: kons-wiersz 13s linear infinite; white-space: nowrap; }
.konsola li i { font-style: normal; color: var(--guide); }
.konsola li b { font-weight: 400; color: var(--paper-50); }
.konsola li.stop b { color: var(--control); font-weight: 600; }
.konsola li.ok b { color: var(--paper-50); }

/* kazdy wiersz wchodzi o 0,55 s pozniej i gasnie razem z calym cyklem */
.konsola li:nth-child(1) { animation-delay: .2s; }
.konsola li:nth-child(2) { animation-delay: .75s; }
.konsola li:nth-child(3) { animation-delay: 1.3s; }
.konsola li:nth-child(4) { animation-delay: 1.85s; }
.konsola li:nth-child(5) { animation-delay: 2.4s; }
.konsola li:nth-child(6) { animation-delay: 3.4s; }
.konsola li:nth-child(7) { animation-delay: 4.1s; }
.konsola li:nth-child(8) { animation-delay: 4.8s; }
@keyframes kons-wiersz {
  0%, 2%    { opacity: 0; transform: translateY(3px); }
  6%, 88%   { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: none; }
}

.konsola__kursor {
  display: inline-block; width: 7px; height: 13px;
  background: var(--control); vertical-align: -2px; margin-left: 4px;
  animation: kons-kursor 1.05s steps(2) infinite;
}
@keyframes kons-kursor { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }

@media (max-width: 900px) { .konsola { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .konsola li { opacity: 1; animation: none; transform: none; }
  .konsola__kursor { animation: none; }
}

/* Prawa kolumna hero: konsola nad panelem parametrow.
   Bez tego opakowania siatka dostawala TRZECIE dziecko i panel
   parametrow spadal pod hero na pelna szerokosc (zlapane 12.08). */
.hero__prawa { display: flex; flex-direction: column; }
@media (max-width: 900px) { .hero__prawa { gap: 0; } }
.masz__opis { margin: 16px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-700); }

/* Podpis pod naglowkiem hero: druga teza, mniejsza od H1 ale nadal
   naglowkowa. Czerwona kreska wedruje TU z H1, bo akcent ma padac
   na slowo "czlowiek", a nie na "AI". */
.hero__podpis {
  font-size: clamp(21px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.15;
  margin: -14px 0 30px;
  color: var(--ink-900);
  text-wrap: balance;
}
.hero__podpis em { font-style: normal; position: relative; white-space: nowrap; }
.hero__podpis em::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: .04em;
  height: 2px;
  background: var(--control);
  transform: scaleX(0);
  transform-origin: left;
  animation: draw 900ms var(--ease-mech) 760ms forwards;
}
@media (prefers-reduced-motion: reduce) { .hero__podpis em::after { transform: scaleX(1); animation: none; } }

/* Deszcz znakow pod tekstem konsoli + ramka w stylu HUD.
   Tekst musi zostac czytelny, wiec deszcz jest wygaszony i lezy nizej. */
.konsola { isolation: isolate; }
.konsola__deszcz { position: absolute; inset: 0; z-index: 0; opacity: .5; pointer-events: none; }
.konsola__pasek, .konsola ol { position: relative; z-index: 1; }
/* naroza jak w celowniku: dwie kreski w kolorze kontrolnym */
.konsola::before, .konsola::after {
  content: ''; position: absolute; width: 14px; height: 14px; z-index: 2; pointer-events: none;
  border-color: var(--control); border-style: solid; opacity: .85;
}
.konsola::before { top: 7px; left: 7px; border-width: 1px 0 0 1px; }
.konsola::after { bottom: 7px; right: 7px; border-width: 0 1px 1px 0; }