/* ════════════════════════════════════════════════════════════════
   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; }
}