/* ==========================================================================
   FONTY HOSTOWANE LOKALNIE
   Podzbiór latin + latin-ext (PL/DE), woff2. Bez zapytań do Google Fonts —
   szybciej i bez przekazywania adresów IP odwiedzających do zewnętrznego
   serwisu, co ma znaczenie przy wersji niemieckiej.
   ========================================================================== */
@font-face{font-family:'Chakra Petch';src:url('../fonts/chakra-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url('../fonts/chakra-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('../fonts/plexsans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('../fonts/plexsans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/plexmono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/plexmono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/plexmono-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ==========================================================================
   ZP TECH — Design System
   Język wizualny wyprowadzony z geometrii logotypu:
   · trasa instalacji o stałej szerokości ze ścięciami 45°  → ścięty narożnik
   · pierścienie węzłowe z odnośnikami                      → punktory i callouty
   · rysunek techniczny (wymiary, znaczniki przekroju)      → linie wymiarowe
   ========================================================================== */

/* --- 1. TOKENY ----------------------------------------------------------- */
:root{
  /* Kolor — motyw jasny. Nazwy tokenów zostają, zmieniają się wartości,
     dzięki czemu cała warstwa `.dark` działa dalej, tyle że na biało. */
  --ink:        #FFFFFF;   /* tło sekcji „ciemnych" — teraz biel */
  --navy:       #0B1622;   /* tekst główny, granat marki */
  --navy-2:     #16283C;
  --blue:       #1652AB;   /* niebieski marki */
  --blue-d:     #103F84;
  --signal:     #1568C8;   /* akcent — przyciemniony pod biel */

  --paper:      #FFFFFF;
  --surface:    #FFFFFF;
  --surface-2:  #F2F4F6;   /* delikatny akcent szary */
  --mist:       #F6F9FD;   /* błękitna biel — stopka, sekcje wyróżnione */
  --graphite:   #55616F;
  --steel:      #8A97A5;

  --bd:         #E2E6EA;
  --bd-2:       #CFD5DB;
  --bd-dark:    rgba(11,22,34,.16);
  --bd-dark-2:  rgba(11,22,34,.09);

  --on-dark:    #55616F;
  --on-dark-2:  #8A97A5;

  /* Typografia */
  --fd: 'Chakra Petch', 'IBM Plex Sans', sans-serif;   /* nagłówki */
  --fs: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --fm: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  /* Geometria — ścięcie 45° z ukośnika „Z” w logotypie */
  --ch: 16px;
  --ch-sm: 10px;

  /* Rytm */
  --gutter: 28px;
  --wrap: 1920px;
  --sec-y: clamp(64px, 7vw, 104px);

  --chrome-h: 88px;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-t: cubic-bezier(.65,0,.35,1);
}

/* --- 2. RESET / BAZA ----------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--navy);
  font-family:var(--fs); font-size:18px; line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--fd); font-weight:500; letter-spacing:-.004em; line-height:1.14; }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--blue); color:#fff; }

:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--blue); color:#fff; padding:12px 20px;
  font-family:var(--fm); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
}
.skip:focus{ left:0; }

/* --- 3. UKŁAD ------------------------------------------------------------ */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.sec{ padding-block:var(--sec-y); position:relative; }
/* Jeden rytm dla wszystkich sekcji — odstęp między nimi to zawsze 2 × --sec-y */
.sec--tight{ padding-block:var(--sec-y); }

/* Sekcje ciemne */
.dark{ background:var(--ink); color:var(--navy); }
.dark h1,.dark h2,.dark h3{ color:var(--navy); }
.dark p{ color:var(--on-dark); }

/* Siatka kreślarska — tło techniczne */
.blueprint{ position:relative; isolation:isolate; }
.blueprint::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(11,22,34,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,22,34,.06) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  mask-image:radial-gradient(120% 90% at 60% 0%, #000 35%, transparent 100%);
}

/* --- 4. ŚCIĘTY NAROŻNIK (sygnatura geometryczna) ------------------------- */
.cut{
  clip-path:polygon(0 0, calc(100% - var(--ch)) 0, 100% var(--ch), 100% 100%, 0 100%);
}
.cut--sm{ --ch:var(--ch-sm); }

/* Ramka z włosową krawędzią — warstwa zewnętrzna = linia, wewnętrzna = tło */
.frame{ background:var(--bd); padding:1px; }
.frame__i{ background:var(--surface); height:100%; }
.dark .frame{ background:var(--bd); }
.dark .frame__i{ background:var(--surface); }

/* --- 5. TYPOGRAFIA ------------------------------------------------------- */
.mono{
  font-family:var(--fm); font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
}
.eyebrow{
  font-family:var(--fm); font-size:11.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--blue);
  display:flex; align-items:center; gap:12px; margin-bottom:22px;
}
.eyebrow::before{
  content:''; width:8px; height:8px; flex:none;
  border:1.5px solid currentColor; border-radius:50%;
}
.dark .eyebrow{ color:var(--blue); }

.h-xl{ font-family:var(--fd); font-weight:500; font-size:clamp(3rem, 6.5vw, 5rem); line-height:1.12; letter-spacing:-.014em; }
.h-lg{ font-family:var(--fd); font-size:clamp(2.5rem, 4.4vw, 3.5rem); line-height:1.18; letter-spacing:-.01em; }
.h-md{ font-family:var(--fd); font-size:clamp(1.8rem, 3vw, 2.5rem); line-height:1.26; letter-spacing:-.006em; }
.h-sm{ font-family:var(--fd); font-size:1.7rem; line-height:1.36; letter-spacing:0; }

.lead{ font-size:clamp(1.1rem,1.6vw,1.3rem); line-height:1.6; color:var(--graphite); max-width:60ch; }
.dark .lead{ color:var(--graphite); }
.muted{ color:var(--graphite); }
.dark .muted{ color:var(--on-dark-2); }

/* Nagłówek sekcji z indeksem — indeks odpowiada numeracji arkusza */
.sec-head{ display:grid; grid-template-columns:1fr; gap:20px; margin-bottom:clamp(40px,5vw,64px); }
.sec-head__t{ max-width:24ch; }
.sec-head--split{ grid-template-columns:minmax(0,1fr) minmax(0,.85fr); align-items:end; gap:48px; }
.sec-head--split .lead{ padding-bottom:6px; }

/* Linia wymiarowa — sygnatura: liczba opisana jak wymiar na rysunku */
.dim{ display:inline-flex; flex-direction:column; gap:10px; }
.dim__v{
  font-family:var(--fd); font-size:clamp(2rem,3.2vw,2.8rem); font-weight:600; line-height:1;
  letter-spacing:-.01em; font-feature-settings:'tnum' 1;
}
.dim__line{ position:relative; height:9px; }
.dim__line::before{
  content:''; position:absolute; top:4px; left:0; right:0; height:1px; background:var(--bd-2);
}
.dim__line::after{
  content:''; position:absolute; top:0; left:0; right:0; height:9px;
  border-left:1px solid var(--bd-2); border-right:1px solid var(--bd-2);
}
.dark .dim__line::before,.dark .dim__line::after{ background:var(--bd-dark); border-color:var(--bd-dark); }
.dark .dim__line::before{ background:var(--bd-dark); }
.dim__l{ font-family:var(--fm); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--graphite); }
.dark .dim__l{ color:var(--on-dark-2); }

/* --- 6. PRZYCISKI -------------------------------------------------------- */
.btn{
  --ch:12px;
  display:inline-flex; align-items:center; gap:12px;
  padding:16px 26px; font-family:var(--fm); font-size:16px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; cursor:pointer;
  border:0; background:var(--blue); color:#fff;
  clip-path:polygon(0 0, calc(100% - var(--ch)) 0, 100% var(--ch), 100% 100%, 0 100%);
  transition:background .28s var(--ease), transform .28s var(--ease);
}
.btn:hover{ background:var(--blue-d); }
.btn:active{ transform:translateY(1px); }
.btn svg{ flex:none; transition:transform .32s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }

.btn--ghost{ background:transparent; color:var(--navy); box-shadow:inset 0 0 0 1px var(--bd-2); }
.btn--ghost:hover{ background:var(--surface); box-shadow:inset 0 0 0 1px var(--navy); }
.dark .btn--ghost{ color:var(--navy); box-shadow:inset 0 0 0 1px var(--bd-2); }
.dark .btn--ghost:hover{ background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--navy); }

.btn--lg{ padding:19px 32px; font-size:12.5px; }

/* Link tekstowy z odnośnikiem */
.tlink{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--fm); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue); padding-bottom:4px; border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), gap .3s var(--ease);
}
.tlink:hover{ border-color:currentColor; gap:16px; }
.dark .tlink{ color:var(--blue); }

/* --- 7. NAWIGACJA -------------------------------------------------------- */
.topbar{
  background:var(--surface-2); color:var(--graphite);
  border-bottom:1px solid var(--bd);
  max-height:40px; overflow:hidden;
  transition:max-height .5s var(--ease), opacity .35s var(--ease), border-color .5s var(--ease);
  font-family:var(--fm); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
}
.topbar__in{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:40px; }
.chrome.is-stuck .topbar{ max-height:0; opacity:0; border-color:transparent; }
.topbar a{ color:var(--graphite); transition:color .25s; }
.topbar a:hover{ color:var(--navy); }
.topbar__l{ display:flex; align-items:center; gap:10px; }
.pulse{
  width:6px; height:6px; background:var(--blue); border-radius:50%;
  box-shadow:0 0 0 0 rgba(2,128,232,.6); animation:pulse 2.6s infinite;
}
@keyframes pulse{ 70%{ box-shadow:0 0 0 8px rgba(2,128,232,0);} 100%{ box-shadow:0 0 0 0 rgba(2,128,232,0);} }

.chrome{
  position:fixed; top:0; left:0; right:0; z-index:90;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), backdrop-filter .5s var(--ease);
}
.chrome.is-stuck.on-dark{
  background:rgba(255,255,255,.93);
  backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
  box-shadow:0 1px 0 var(--bd), 0 10px 34px rgba(11,22,34,.06);
}
.chrome.is-stuck{
  background:rgba(255,255,255,.93);
  backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
  box-shadow:0 1px 0 var(--bd), 0 10px 34px rgba(9,30,52,.06);
}

.hdr{ position:static; background:transparent; border:0; }
.hdr__in{ display:flex; align-items:center; justify-content:space-between; gap:28px; height:88px; }
.logo{ display:block; flex:none; }
.logo img{
  height:52px; width:auto;
}


.nav{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.nav a{
  position:relative; padding:10px 14px; font-size:15.5px; font-weight:500;
  color:var(--navy); transition:color .3s var(--ease);
}
.nav a::after{
  content:''; position:absolute; left:14px; right:14px; bottom:2px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .34s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--blue); }

.hdr__side{ display:flex; align-items:center; gap:18px; }

/* Przełącznik języka */
.lang{ display:flex; align-items:center; gap:2px; font-family:var(--fm); font-size:11px; letter-spacing:.1em; }
.lang a{ padding:6px 8px; color:var(--steel); transition:color .3s var(--ease); }
.lang a:hover{ color:var(--navy); }
.lang a[aria-current="true"]{ color:var(--navy); font-weight:500; }
.lang span{ color:var(--bd-2); }



.mnav .lang a{ color:var(--steel); }
.mnav .lang a[aria-current="true"]{ color:var(--navy); }

.burger{
  display:none; width:44px; height:44px; background:none; border:0; cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.burger i{ display:block; width:20px; height:1.5px; background:var(--navy); transition:transform .35s var(--ease), opacity .2s; }

.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.mnav{
  position:fixed; inset:0; z-index:80; background:var(--surface); color:var(--navy);
  padding:calc(var(--chrome-h) + 24px) var(--gutter) 48px; display:none; flex-direction:column; gap:2px;
  overflow-y:auto;
}
.mnav.is-open{ display:flex; }
.mnav a{
  display:flex; align-items:baseline; gap:16px; padding:18px 0;
  border-bottom:1px solid var(--bd); font-size:1.5rem; font-weight:500; letter-spacing:-.02em;
}
.mnav a b{ font-family:var(--fm); font-size:11px; font-weight:500; color:var(--blue); letter-spacing:.1em; }
.mnav__cta{ margin-top:28px; }

/* --- 8. HERO ------------------------------------------------------------- */
.hero{
  background:var(--ink); color:var(--navy); position:relative; overflow:hidden;
  height:100vh; height:100svh; display:flex; align-items:stretch;
}
.hero__in{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(32px,4vw,72px); align-items:stretch;
  width:100%;
  padding-block:calc(var(--chrome-h) + clamp(26px,3vh,52px)) clamp(28px,3.5vh,56px);
}
/* W hero typografia skaluje się także wysokością okna — sekcja ma 100vh,
   więc nagłówek nie może wypchnąć liczb poza ekran na niskich monitorach. */
.hero h1{ margin:0 0 22px; font-size:clamp(2.6rem, min(6.5vw, 7.4vh), 5rem); }
.hero h1 em{ font-style:normal; color:var(--blue); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(26px,3.4vh,38px); }
.hero__dims{
  display:flex; flex-wrap:wrap; gap:clamp(28px,4vw,56px);
  margin-top:clamp(26px,4vh,52px);
}

/* Schemat instalacji — rysunek wiodący */
.schema{ position:relative; }
.schema svg{ width:100%; height:auto; overflow:visible; }
.schema__cap{
  display:flex; justify-content:space-between; gap:16px; margin-top:16px;
  font-family:var(--fm); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-dark-2); border-top:1px solid var(--bd-dark-2); padding-top:12px;
}
.draw{ stroke-dasharray:1400; stroke-dashoffset:1400; animation:draw 9s var(--ease-t) .25s infinite; }
.draw--2{ animation-delay:.7s; }
.draw--3{ animation-delay:1s; }
.draw--4{ animation-delay:1.3s; }
@keyframes draw{
  0%{ stroke-dashoffset:1400; opacity:1; }
  30%{ stroke-dashoffset:0; opacity:1; }
  82%{ stroke-dashoffset:0; opacity:1; }
  94%{ stroke-dashoffset:0; opacity:0; }
  95%{ stroke-dashoffset:1400; opacity:0; }
  100%{ stroke-dashoffset:1400; opacity:1; }
}
/* Impuls świetlny biegnący trasą główną — ten sam mechanizm co w schematach usług */
.hero-pulse{
  fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round;
  stroke-dasharray:26 520; filter:drop-shadow(0 0 7px rgba(2,128,232,.75));
  animation:heroFlow 5.4s linear infinite;
}
@keyframes heroFlow{ from{ stroke-dashoffset:26; } to{ stroke-dashoffset:-520; } }

.fade-node{ opacity:0; animation:fadeNode 9s var(--ease) infinite; }
@keyframes fadeNode{
  0%,4%{ opacity:0; }
  12%,82%{ opacity:1; }
  92%,100%{ opacity:0; }
}

/* --- 9. PASEK PARAMETRÓW ------------------------------------------------- */
.strip{ border-block:1px solid var(--bd); background:var(--surface); }
.strip__in{ display:grid; grid-template-columns:repeat(4,1fr); }
.strip__i{ padding:30px 28px; border-left:1px solid var(--bd); }
.strip__i:first-child{ border-left:0; padding-left:0; }
.strip__i b{ display:block; font-family:var(--fm); font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin-bottom:10px; }
.strip__i span{ display:block; font-size:16px; color:var(--graphite); line-height:1.5; }

/* --- 10. KARTY USŁUG ----------------------------------------------------- */
.grid{ display:grid; gap:1px; background:var(--bd); border:1px solid var(--bd); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }

.svc{
  background:var(--surface); padding:36px 32px 34px; position:relative;
  transition:background .35s var(--ease);
}
.svc:hover{ background:var(--mist); }
.svc__n{
  font-family:var(--fm); font-size:11px; font-weight:600; letter-spacing:.14em;
  color:var(--steel); display:block; margin-bottom:26px;
}
.svc h3{ font-size:1.7rem; margin-bottom:14px; letter-spacing:-.006em; line-height:1.28; }
.svc p{ font-size:16px; line-height:1.6; color:var(--graphite); margin:0; }
.svc__ico{ margin-bottom:22px; color:var(--blue); }
.svc::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.svc:hover::after{ transform:scaleX(1); }

/* --- 11. LISTA WĘZŁOWA (pierścień + odnośnik z logotypu) ----------------- */
.nodes li{
  position:relative; padding-left:34px; margin-bottom:15px;
  font-size:16.5px; line-height:1.55;
}
.nodes li::before{
  content:''; position:absolute; left:0; top:.62em; width:9px; height:9px;
  border:1.5px solid var(--blue); border-radius:50%;
}
.nodes li::after{
  content:''; position:absolute; left:11px; top:calc(.62em + 4px); width:13px; height:1.5px;
  background:var(--blue); opacity:.42;
}
.dark .nodes li::before{ border-color:var(--blue); }
.dark .nodes li::after{ background:var(--blue); }
.nodes--2{ columns:2; column-gap:48px; }
.nodes--2 li{ break-inside:avoid; }

/* --- 12. PROCES (oś wymiarowa) ------------------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative;
  margin-top:clamp(28px,4.5vw,72px); }
.step{ padding:0 48px 0 0; position:relative; }
.step__bar{ position:relative; height:36px; margin-top:26px; margin-bottom:52px; }
.step__bar::before{ content:''; position:absolute; left:0; right:0; top:17px; height:1px; background:var(--bd-2); }
.step__bar::after{ content:''; position:absolute; left:0; top:11px; width:1px; height:13px; background:var(--navy); }
.step:last-child .step__bar::before{ background:linear-gradient(90deg,var(--bd-2) 60%,transparent); }
.step__n{ font-family:var(--fm); font-size:11px; font-weight:600; letter-spacing:.16em; color:var(--blue); position:absolute; top:-18px; left:0; z-index:1; }
.step h3{ font-size:1.5rem; margin-bottom:12px; line-height:1.3; }
.step p{ font-size:15.5px; color:var(--graphite); margin:0; line-height:1.58; }

/* --- 13. GALERIA --------------------------------------------------------- */
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:36px; }
.filters button{
  --ch:8px; padding:11px 18px; background:transparent; cursor:pointer; border:0;
  box-shadow:inset 0 0 0 1px var(--bd-2); color:var(--graphite);
  font-family:var(--fm); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  clip-path:polygon(0 0, calc(100% - var(--ch)) 0, 100% var(--ch), 100% 100%, 0 100%);
  transition:background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.filters button:hover{ color:var(--navy); box-shadow:inset 0 0 0 1px var(--navy); }
.filters button[aria-pressed="true"]{ background:var(--navy); color:#fff; box-shadow:none; }

.gal{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--bd); border:1px solid var(--bd); }
.gal__i{
  position:relative; background:var(--surface); overflow:hidden; cursor:zoom-in;
  aspect-ratio:4/3; display:block; width:100%; border:0; padding:0; text-align:left;
}
.gal__i img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease), filter .5s var(--ease); }
.gal__i:hover img{ transform:scale(1.045); }
.gal__i figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:44px 20px 18px;
  background:linear-gradient(transparent, rgba(5,13,24,.88));
  color:#fff; font-size:14px; font-weight:500; line-height:1.35;
  transform:translateY(6px); opacity:0; transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.gal__i:hover figcaption,.gal__i:focus-visible figcaption{ opacity:1; transform:none; }
.gal__i b{
  position:absolute; top:0; left:0; z-index:2; padding:8px 12px; background:var(--navy); color:#fff;
  font-family:var(--fm); font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  opacity:0; transition:opacity .3s var(--ease);
}
.gal__i:hover b{ opacity:1; }
.gal__i[hidden]{ display:none; }

/* Podgląd */
.lb{
  position:fixed; inset:0; z-index:120; background:rgba(246,249,253,.97);
  display:none; align-items:center; justify-content:center; padding:5vh 5vw;
}
.lb.is-open{ display:flex; }
.lb img{ max-width:100%; max-height:78vh; object-fit:contain; }
.lb__cap{
  position:absolute; left:0; right:0; bottom:0; padding:22px var(--gutter);
  color:var(--navy); font-family:var(--fm); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--bd);
}
.lb__x,.lb__p,.lb__n{
  position:absolute; background:none; border:0; color:var(--navy); cursor:pointer;
  width:56px; height:56px; display:flex; align-items:center; justify-content:center;
  opacity:.65; transition:opacity .25s;
}
.lb__x:hover,.lb__p:hover,.lb__n:hover{ opacity:1; }
.lb__x{ top:12px; right:12px; }
.lb__p{ left:6px; top:50%; transform:translateY(-50%); }
.lb__n{ right:6px; top:50%; transform:translateY(-50%); }

/* --- 14. AKORDEON -------------------------------------------------------- */
.acc{ border-top:1px solid var(--bd); }
.acc__i{ border-bottom:1px solid var(--bd); }
.acc__b{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  padding:26px 44px 26px 0; position:relative;
  font-size:1.15rem; font-weight:500; letter-spacing:-.012em; color:var(--navy);
}
.acc__b::before,.acc__b::after{
  content:''; position:absolute; right:8px; top:50%; background:var(--blue);
  transition:transform .4s var(--ease), opacity .3s;
}
.acc__b::before{ width:14px; height:1.5px; margin-top:-.75px; }
.acc__b::after{ width:1.5px; height:14px; margin-top:-7px; margin-right:6.25px; }
.acc__b[aria-expanded="true"]::after{ transform:rotate(90deg); opacity:0; }
.acc__p{ display:none; padding:0 60px 30px 0; }
.acc__p p{ color:var(--graphite); font-size:16.5px; margin:0; }
.acc__i.is-open .acc__p{ display:block; }

/* --- 15. FORMULARZ ------------------------------------------------------- */
.form{ display:grid; gap:22px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.field label{
  display:block; font-family:var(--fm); font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--graphite); margin-bottom:9px;
}
.field label span{ color:var(--blue); }
.field input,.field textarea,.field select{
  width:100%; padding:16px 16px; background:var(--surface);
  border:1px solid var(--bd-2); border-radius:0; font-size:16.5px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0; border-color:var(--blue); box-shadow:0 0 0 3px rgba(22,82,171,.1);
}
.field.has-error input,.field.has-error textarea{ border-color:#C0392B; }
.field__err{ display:none; margin-top:7px; font-family:var(--fm); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#C0392B; }
.field.has-error .field__err{ display:block; }
.check{ display:flex; gap:12px; align-items:flex-start; font-size:13px; line-height:1.5; color:var(--graphite); }
.check input{ width:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--blue); }
.form__ok{
  display:none; padding:20px 22px; background:rgba(22,82,171,.07);
  border-left:2px solid var(--blue); font-size:15px;
}
.form__ok.is-on{ display:block; }

/* --- 16. STOPKA ---------------------------------------------------------- */
.ftr{ background:var(--mist); color:var(--graphite); padding-top:clamp(56px,6vw,84px); }
.ftr__top{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:44px; padding-bottom:56px; }
.ftr h4{ font-family:var(--fm); font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--navy); margin-bottom:20px; }
.ftr a{ color:var(--graphite); transition:color .25s; }
.ftr a:hover{ color:var(--blue); }
.ftr li{ margin-bottom:11px; font-size:15.5px; }
.ftr__logo img{ height:52px; margin-bottom:22px; }
.ftr__bot{
  border-top:1px solid var(--bd); padding-block:22px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px;
  font-family:var(--fm); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-2);
}
.soc{ display:flex; gap:10px; }
.soc a{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1px var(--bd-dark); transition:background .25s, box-shadow .25s;
}
.soc a:hover{ background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.34); }

/* --- 17. STRONA / BANER PODSTRONY ---------------------------------------- */
.phead{
  background:var(--ink); color:var(--navy); position:relative; isolation:isolate; overflow:hidden;
  padding-block:calc(var(--chrome-h) + clamp(40px,4.4vw,72px)) clamp(48px,5.5vw,80px);
}
.phead::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(11,22,34,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,22,34,.075) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  -webkit-mask-image:radial-gradient(72% 130% at 50% 0%, #000 0%, rgba(0,0,0,.45) 46%, transparent 80%);
  mask-image:radial-gradient(72% 130% at 50% 0%, #000 0%, rgba(0,0,0,.45) 46%, transparent 80%);
}
.crumbs{ font-family:var(--fm); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); margin-bottom:24px; }
.crumbs a{ color:var(--steel); }
.crumbs a:hover{ color:var(--navy); }
.phead .lead{ color:var(--graphite); margin-top:20px; }

/* --- 18. RÓŻNE ----------------------------------------------------------- */
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(36px,5vw,72px); align-items:start; }
.split--55{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
.stack{ display:grid; gap:clamp(18px,2vw,26px); }

.spec{ border-top:1px solid var(--bd); }
.spec div{ display:grid; grid-template-columns:minmax(120px,34%) 1fr; gap:24px; padding:17px 0; border-bottom:1px solid var(--bd); font-size:16px; }
.spec dt{ font-family:var(--fm); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--graphite); padding-top:3px; }
.spec dd{ margin:0; }
.dark .spec,.dark .spec div{ border-color:var(--bd); }
.dark .spec dt{ color:var(--steel); }

.pill{
  display:inline-block; padding:7px 13px; background:rgba(22,82,171,.08); color:var(--blue);
  font-family:var(--fm); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
}
.dark .pill{ background:rgba(22,82,171,.07); color:var(--blue); }

.callout{ --ch:20px; background:var(--navy); color:#fff; padding:clamp(32px,4vw,48px); }
.callout p{ color:rgba(255,255,255,.72); }

.empty{ text-align:center; padding:clamp(56px,8vw,110px) 0; }
.empty .mono{ color:var(--steel); display:block; margin-bottom:20px; }

/* --- 19. UJAWNIANIE PRZY PRZEWIJANIU ------------------------------------- */
.rv{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.is-in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.08s; } .rv-d2{ transition-delay:.16s; } .rv-d3{ transition-delay:.24s; }

/* --- 20. RESPONSYWNOŚĆ --------------------------------------------------- */
@media (max-width:1080px){
  .hero__in{ grid-template-columns:1fr; }
  .schema{ order:2; max-width:620px; }
  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); row-gap:44px; }
  .ftr__top{ grid-template-columns:1fr 1fr; gap:36px; }
  .gal{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .nav,.hdr__side .lang{ display:none; }
  .burger{ display:flex; }
  .sec-head--split{ grid-template-columns:1fr; gap:22px; align-items:start; }
  .split,.split--55{ grid-template-columns:1fr; }
  .strip__in{ grid-template-columns:1fr 1fr; }
  .strip__i{ padding:24px 20px; border-top:1px solid var(--bd); }
  .strip__i:nth-child(odd){ border-left:0; padding-left:0; }
  .strip__i:nth-child(-n+2){ border-top:0; }
  .nodes--2{ columns:1; }
  .spec div{ grid-template-columns:1fr; gap:6px; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  :root{ --gutter:20px; }
  .grid--3,.grid--2{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; row-gap:36px; }
  .step{ padding-right:0; }
  .gal{ grid-template-columns:1fr 1fr; }
  .form__row{ grid-template-columns:1fr; }
  .ftr__top{ grid-template-columns:1fr; }
  .hero__cta .btn{ width:100%; justify-content:space-between; }
  .topbar__l span.hide-s{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .rv{ opacity:1; transform:none; }
  .draw{ stroke-dashoffset:0; }
  .fade-node{ opacity:1; }
  html{ scroll-behavior:auto; }
}

@media print{
  .hdr,.topbar,.mnav,.lb,.btn{ display:none !important; }
  body{ background:#fff; }
}

/* --- 21. LISTA USŁUG (podstrona) ---------------------------------------- */
.svc-list{ display:grid; gap:8px; }
.svc-row{
  display:flex; flex-direction:column;
  padding:42px 36px 40px; background:var(--surface);
  transition:background .35s var(--ease);
}
.svc-row:hover{ background:var(--mist); }
.svc-row__n{ display:block; color:var(--steel); margin-bottom:40px; }
.svc-row .svc__anim{ margin:0 0 40px; }
.svc-row h3{ font-size:1.7rem; line-height:1.28; letter-spacing:-.006em; margin-bottom:16px; }
.svc-row p{ color:var(--graphite); margin-bottom:28px; max-width:56ch; }
.svc-row .btn{ align-self:flex-start; margin-top:auto; }
.tags{ display:flex; flex-wrap:wrap; gap:7px; }

/* --- 22. SLOTY ZESPOŁU (stan pusty) ------------------------------------- */
.team-slot{ background:var(--surface); }
.team-slot__ph{
  aspect-ratio:4/5; margin-bottom:26px; background:var(--surface-2);
  border:1px dashed var(--bd-2); position:relative; overflow:hidden;
}

.team-slot h3{ color:var(--steel); }
.team-slot p{ color:var(--bd-2); }



/* --- 23. KOREKTY MOBILNE ------------------------------------------------ */
@media (max-width:720px){
  .topbar__in{ justify-content:center; height:36px; }
  .topbar__l:first-child{ display:none; }
  .hide-s{ display:none !important; }
}
@media (max-width:640px){
  .logo img{ height:42px; }
  .hdr__in{ height:74px; gap:12px; }
  .hdr__side{ gap:8px; }
  .hdr__side .btn{ padding:13px 16px; font-size:11px; }
  .hdr__side .btn svg{ display:none; }
  .schema__cap{ font-size:9.5px; }
  .filters button{ padding:9px 13px; font-size:10px; }
}

/* --- 24. MARGINESY BOCZNE / SIATKA DESKTOP ------------------------------ */
@media (min-width:1024px){ :root{ --gutter:64px; } }
@media (min-width:1200px){ :root{ --gutter:120px; } }

/* --- 25. GÓRNA BELKA — STANY RESPONSYWNE -------------------------------- */
@media (max-width:720px){
  :root{ --chrome-h:74px; }
}
@media (max-width:640px){
  :root{ --chrome-h:74px; }
}

/* ==========================================================================
   26. PASMO CIEMNE: CECHY + ZAKRES USŁUG
   Ten sam grunt co hero — hero, pasek cech i siatka usług czytają się
   jako jeden arkusz, rozdzielony wyłącznie włosowymi liniami.
   ========================================================================== */
.strip--dark{ background:var(--ink); border-block:1px solid var(--bd-dark-2); }
.strip--dark .strip__i{ border-left:1px solid var(--bd-dark-2); }
.strip--dark .strip__i:first-child{ border-left:0; }
@media (max-width:860px){
  .strip--dark .strip__i{ border-top:1px solid var(--bd-dark-2); }
  .strip--dark .strip__i:nth-child(odd){ border-left:0; }
  .strip--dark .strip__i:nth-child(-n+2){ border-top:0; }
}
.strip--dark .strip__i b{ color:var(--blue); }


.dark .grid{ background:var(--bd); border-color:var(--bd); }
.dark .svc{ background:var(--ink); }
.dark .svc:hover{ background:var(--mist); }
.dark .svc h3{ color:var(--navy); }
.dark .svc p{ color:var(--graphite); }
.dark .svc__n{ color:var(--steel); }

/* ==========================================================================
   27. KARTA USŁUGI — NUMERACJA, ODSTĘPY, SCHEMAT
   ========================================================================== */
.svc{ padding:42px 36px 40px; }
.svc__n{ margin-bottom:38px; letter-spacing:.16em; }
.svc__ico{ margin-bottom:32px; }
.svc h3{ margin-bottom:16px; }

.svc__anim{ margin-bottom:36px; }
.svc__anim svg{ width:100%; max-width:236px; height:auto; overflow:visible; }

/* Wspólny język kreski — ten sam co w schemacie hero */
.sa-line{ fill:none; stroke:rgba(11,22,34,.26); stroke-width:4.2; stroke-linecap:square; }
.sa-acc{ fill:none; stroke:#1652AB; stroke-width:6; stroke-linecap:square; stroke-linejoin:miter; }
.sa-pulse{ fill:none; stroke:var(--navy); stroke-width:7.2; stroke-linecap:round; }
.sa-dot{ fill:var(--navy); }
.sa-node{ fill:var(--ink); stroke:var(--blue); stroke-width:6; }

/* 01 — wirnik: obrót podziałki, biały znacznik na obwodzie */
.sa-spin{ animation:saSpin 9s linear infinite; }
@keyframes saSpin{ to{ transform:rotate(360deg); } }

/* 02 — impuls wędrujący trasą instalacji */
.sa-flow{ stroke-dasharray:16 400; animation:saFlow 3.4s linear infinite; }
@keyframes saFlow{ from{ stroke-dashoffset:16; } to{ stroke-dashoffset:-260; } }

/* 03 — przebieg pomiarowy omiatany białą linią */
.sa-scan{ animation:saScan 3.6s var(--ease-t) infinite; }
@keyframes saScan{
  0%{ transform:translateX(0); opacity:0; }
  8%{ opacity:1; }
  88%{ opacity:1; }
  100%{ transform:translateX(196px); opacity:0; }
}
.sa-fault{ animation:saFault 3.6s steps(1) infinite; }
@keyframes saFault{ 0%,46%{ opacity:0; } 50%,86%{ opacity:1; } 90%,100%{ opacity:0; } }

/* 04 — znacznik przeskakujący po podziałce przeglądów */
.sa-step{ animation:saStep 5s steps(5,end) infinite; }
@keyframes saStep{ from{ transform:translateX(0); } to{ transform:translateX(200px); } }

/* 05 — zespół przenoszony z pozycji A do B */
.sa-move{ animation:saMove 4.6s var(--ease) infinite; }
@keyframes saMove{
  0%,12%{ transform:translateX(0); opacity:1; }
  52%,72%{ transform:translateX(148px); opacity:1; }
  84%,88%{ transform:translateX(148px); opacity:0; }
  89%,96%{ transform:translateX(0); opacity:0; }
  100%{ transform:translateX(0); opacity:1; }
}

/* 06 — detal kreślony od zera, biały punkt prowadzący */
.sa-draw{ stroke-dasharray:170; stroke-dashoffset:170; animation:saDraw 5s var(--ease-t) infinite; }
@keyframes saDraw{
  0%{ stroke-dashoffset:170; opacity:1; }
  46%{ stroke-dashoffset:0; opacity:1; }
  86%{ stroke-dashoffset:0; opacity:1; }
  95%{ stroke-dashoffset:0; opacity:0; }
  96%,100%{ stroke-dashoffset:170; opacity:0; }
}
.sa-trace{ stroke-dasharray:5 165; animation:saTrace 5s var(--ease-t) infinite; }
@keyframes saTrace{
  0%{ stroke-dashoffset:0; opacity:1; }
  46%{ stroke-dashoffset:-170; opacity:1; }
  50%,100%{ stroke-dashoffset:-170; opacity:0; }
}

@media (max-width:640px){
  .svc{ padding:36px 26px 34px; }
  .svc__n{ margin-bottom:30px; }
  .svc__anim{ margin-bottom:30px; }
}

/* ==========================================================================
   28. PASEK CECH — kompaktowy wiersz z węzłami z logotypu
   Zamiast czterech kafli: jeden pas z markerami węzłowymi i podpisami.
   ========================================================================== */
.strip--dark{ background:var(--ink); border:0; padding-block:var(--sec-y); }
.strip--dark .strip__in{ gap:0; border-top:1px solid var(--bd); }
.strip--dark .strip__i{
  position:relative; border:0; border-left:1px solid var(--bd);
  padding:30px 32px 0; box-shadow:none; background-image:none;
}
.strip--dark .strip__i:first-child{ border-left:0; padding-left:0; }
.strip--dark .strip__i::after{ content:none; }
.strip--dark .strip__i b{
  display:flex; align-items:center; gap:12px; color:var(--blue); margin-bottom:14px;
}
.strip--dark .strip__i b::before,
.strip--dark .strip__i b::after{ content:none; }
.strip--dark .strip__i span{
  font-family:var(--fs); font-weight:400; color:var(--graphite);
  font-size:16px; line-height:1.5; letter-spacing:0;
}
@media (max-width:860px){
  .strip--dark .strip__i{ border-left:0; border-top:1px solid var(--bd); padding:26px 0 0; }
  .strip--dark .strip__i:first-child{ border-top:0; }
}

/* ==========================================================================
   29. ZAKRES USŁUG — ODSTĘPY W KARCIE, MIĘKKIE WEJŚCIE SIATKI
   ========================================================================== */
/* Karta w proporcji 3:4 — odstępy rozkłada schemat rozpychający kartę w pionie */
@media (min-width:861px){
  .svc{ display:flex; flex-direction:column; }
  .svc__n{ margin-bottom:40px; }
  .svc__anim{ margin:0 0 40px; display:flex; align-items:center; justify-content:center; }
}
.svc__n{ margin-bottom:64px; }
.svc__anim{ margin-bottom:64px; display:flex; justify-content:center; }

.sec-head--split .lead{ margin-bottom:0; padding-bottom:0; }

/* Górna krawędź sekcji — siatka kreślarska wyłania się z tła */
.fade-top::after{
  content:''; position:absolute; inset:0 0 auto; height:clamp(120px,18vh,240px);
  background:linear-gradient(to bottom, var(--ink) 0%, rgba(255,255,255,.72) 45%, transparent 100%);
  z-index:-1; pointer-events:none;
}

.br-d{ display:none; }
@media (min-width:861px){ .br-d{ display:inline; } }

@media (max-width:640px){
  .svc__n{ margin-bottom:56px; }
  .svc__anim{ margin-bottom:56px; }
}

/* ==========================================================================
   30. SEKCJE CIEMNE — PRZEBIEG ZLECENIA, FAQ
   ========================================================================== */
.dark .statement,
.statement{
  font-family:var(--fd); font-weight:500;
  font-size:clamp(1.6rem,2.7vw,2.4rem); line-height:1.36; letter-spacing:-.01em;
  max-width:1016px; color:var(--navy); margin:0;
}

.dark .step__n{ background:transparent; color:var(--blue); }
.dark .step__bar::before{ background:var(--bd-2); }
.dark .step:last-child .step__bar::before{ background:linear-gradient(90deg,var(--bd-2) 60%,transparent); }
.dark .step__bar::after{ background:var(--navy); }
.dark .step h3{ color:var(--navy); }
.dark .step p{ color:var(--graphite); }

.dark .acc{ border-color:var(--bd); }
.dark .acc__i{ border-color:var(--bd); }
.dark .acc__b{ color:var(--navy); }
.dark .acc__p p{ color:var(--graphite); }

/* ==========================================================================
   31. FAQ — TYTUŁY W KROJU NAGŁÓWKOWYM, IKONA W OKRĄGŁYM KONTENERZE
   ========================================================================== */
.acc__b{
  font-family:var(--fd); font-weight:500;
  font-size:clamp(1.4rem,1.9vw,1.7rem); line-height:1.32; letter-spacing:-.004em;
  padding:30px 84px 30px 0;
}
.acc__b::before,.acc__b::after{ content:none; }

.acc__ico{
  position:absolute; right:0; top:50%; width:54px; height:54px; border-radius:999px;
  transform:translateY(-50%) rotate(0deg);
  box-shadow:inset 0 0 0 1px var(--bd-2); background:transparent;
  transition:transform .42s var(--ease), background .32s var(--ease), box-shadow .32s var(--ease);
}
.acc__ico::before,.acc__ico::after{
  content:''; position:absolute; left:50%; top:50%; background:var(--navy); border-radius:1px;
}
.acc__ico::before{ width:17px; height:1.6px; margin:-.8px 0 0 -8.5px; }
.acc__ico::after{ width:1.6px; height:17px; margin:-8.5px 0 0 -.8px; }

.acc__i.is-open .acc__ico{
  transform:translateY(-50%) rotate(45deg);
  background:var(--blue); box-shadow:none;
}
.acc__i.is-open .acc__ico::before,.acc__i.is-open .acc__ico::after{ background:#fff; }
.acc__b:hover .acc__ico{ box-shadow:inset 0 0 0 1px var(--navy); }
.acc__i.is-open .acc__b:hover .acc__ico{ background:var(--blue-d); box-shadow:none; }

@media (max-width:640px){
  .acc__b{ padding-right:64px; }
  .acc__ico{ width:44px; height:44px; }
  .acc__ico::before{ width:14px; margin-left:-7px; }
  .acc__ico::after{ height:14px; margin-top:-7px; }
}

/* ==========================================================================
   32. IMPULS ŚWIETLNY NA OSI KROKÓW
   Cztery segmenty z przesunięciem fazowym czytają się jako jeden impuls
   przebiegający przez całą oś procesu.
   ========================================================================== */
.step__pulse{
  position:absolute; top:16.2px; left:-64px; width:64px; height:1.6px;
  background:linear-gradient(90deg, transparent, rgba(22,82,171,.3) 30%, var(--blue) 55%, transparent);
  opacity:0; pointer-events:none;
  animation:stepPulse 5.4s linear infinite;
}
.steps .step:nth-child(1) .step__pulse{ animation-delay:0s; }
.steps .step:nth-child(2) .step__pulse{ animation-delay:.58s; }
.steps .step:nth-child(3) .step__pulse{ animation-delay:1.16s; }
.steps .step:nth-child(4) .step__pulse{ animation-delay:1.74s; }
@keyframes stepPulse{
  0%{ left:-64px; opacity:0; }
  4%{ opacity:1; }
  17%{ left:100%; opacity:1; }
  21%,100%{ left:100%; opacity:0; }
}

/* ==========================================================================
   33. SCHEMATY USŁUG — WARSTWA PANELOWA
   Zaokrąglone panele, delikatna poświata na akcencie, ruch jako jedyny
   element zwracający uwagę.
   ========================================================================== */
.sa-panel{ fill:rgba(255,255,255,.035); stroke:rgba(255,255,255,.12); stroke-width:1; }
.sa-slot{ fill:rgba(255,255,255,.05); stroke:rgba(255,255,255,.10); stroke-width:1; }
.sa-bar{ fill:rgba(255,255,255,.13); }
.sa-acc-fill{ fill:#1652AB; }
.sa-glow{ filter:none; }
.sa-dash{ fill:none; stroke:rgba(11,22,34,.24); stroke-width:3; stroke-dasharray:4 8; }

/* 01 — podświetlenie wędrujące po wierszach panelu stanu */
.sa-rows{ animation:saRows 6s var(--ease) infinite; }
@keyframes saRows{
  0%,22%{ transform:translateY(0); }
  30%,52%{ transform:translateY(38px); }
  60%,82%{ transform:translateY(76px); }
  90%,100%{ transform:translateY(0); }
}

/* 03 — lupa przesuwana nad zapisem pomiaru */
.sa-lens{ animation:saLens 5.4s var(--ease) infinite; }
@keyframes saLens{
  0%,6%{ transform:translateX(0); }
  46%,58%{ transform:translateX(104px); }
  96%,100%{ transform:translateX(0); }
}

/* 04 — słupek podświetlany kolejno w podziałce przeglądów */
.sa-col{ transition:none; }
.sa-col-1{ animation:saCol 6.4s steps(1) infinite; }
.sa-col-2{ animation:saCol 6.4s steps(1) infinite 1.6s; }
.sa-col-3{ animation:saCol 6.4s steps(1) infinite 3.2s; }
.sa-col-4{ animation:saCol 6.4s steps(1) infinite 4.8s; }
@keyframes saCol{ 0%,24%{ opacity:1; } 25%,100%{ opacity:0; } }

@media (max-width:560px){
  .strip--dark .strip__in{ grid-template-columns:1fr; }
}

/* ==========================================================================
   34. RAMKA KRESKOWANA JAKO WZORZEC WSPÓLNY
   Ten sam stroke 1 : 4 co w kaflach pod hero — dla siatki usług
   i dla panelu branż. Narożniki 45° zawsze na kontenerze zbiorczym.
   ========================================================================== */
.dashed-edge{ box-shadow:inset 0 0 0 1px var(--bd); }
.corner-marks{ position:relative; }
/* Motyw narożników 45° wycofany — ramki są teraz gładkie. */
.corner-marks::after{ content:none; }

/* Siatka usług — kreskowanie na kartach, narożniki na całym zbiorze */
.dark .grid--dash,
.grid--dash{ background:transparent; border:0; gap:8px; }
.grid--dash .svc{ box-shadow:inset 0 0 0 1px var(--bd); }

/* Panel branż */
.dashbox{ padding:clamp(28px,3.4vw,40px); }
.dashbox .mono{ color:var(--blue); display:block; margin:0 0 22px; }

/* Krótsza miara akapitów wiodących w sekcjach z dwiema kolumnami */
.lead--tight{ max-width:480px; }
/* Sekcja kontaktowa — szerzej, żeby nagłówek zmieścił się w dwóch wierszach */
.h-tight,
.lead--contact{ max-width:660px; }
/* Telefony i e-mail w tej samej skali co tytuły w FAQ */
.spec--contact dd{ font-family:var(--fd); font-weight:500;
  font-size:clamp(1.4rem,1.9vw,1.7rem); line-height:1.32; letter-spacing:-.004em; }
.spec--contact dt{ padding-top:8px; }
.spec--contact div{ padding:20px 0; }

/* Ścieżki o obrysie gradientowym — stroke podawany atrybutem `stroke="url(#…)"`,
   dlatego klasa nie może deklarować własnego stroke. */
.sa-grad{ fill:none; stroke-width:6; stroke-linecap:square; stroke-linejoin:miter; }

/* ==========================================================================
   35. IKONY SPOŁECZNOŚCIOWE — ten sam wzorzec co kafle
   ========================================================================== */
.soc{ display:none; }   /* ikony social media ukryte do czasu podania profili */
.soc a{
  width:58px; height:58px; position:relative;
  box-shadow:inset 0 0 0 1px var(--bd);
  transition:background-color .28s var(--ease);
}
.soc a{ color:#fff; }
.soc a:hover{ background-color:rgba(255,255,255,.07); box-shadow:none; }

/* ==========================================================================
   36. SZEW MIĘDZY SEKCJĄ KONTAKTOWĄ A STOPKĄ
   Kratka wygaszana gradientem radialnym i linia rozświetlona w centrum.
   ========================================================================== */
.seam{
  position:relative; height:clamp(150px,18vh,230px);
  margin-bottom:0;
  background:var(--blue); overflow:visible; pointer-events:none; z-index:1;
}
/* Kratka wychodzi ponad szew i lekko nachodzi na treść sekcji kontaktowej */
.seam::before{
  content:''; position:absolute; left:0; right:0; bottom:0;
  top:clamp(-190px,-18vh,-120px); z-index:1;
  background-image:
    linear-gradient(rgba(255,255,255,.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 240px 240px, 240px 240px, 48px 48px, 48px 48px;
  -webkit-mask-image:radial-gradient(64% 130% at 50% 100%, #000 0%, rgba(0,0,0,.5) 48%, transparent 80%);
  mask-image:radial-gradient(64% 130% at 50% 100%, #000 0%, rgba(0,0,0,.5) 48%, transparent 80%);
}
.seam::after{
  content:none; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:2;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(22,82,171,.22) 20%,
    rgba(22,82,171,.8) 40%,
    #1652AB 50%,
    rgba(22,82,171,.8) 60%,
    rgba(22,82,171,.22) 80%,
    transparent 100%);
}
.seam__glow{ display:none; }

/* Sekcja kontaktowa styka się ze szwem — mniejszy dół, żeby kratka podchodziła bliżej */
.sec--seam{ padding-bottom:64px; }
/* Kratka szwu ma iść pod treścią sekcji, nie po przyciskach */
.sec--seam .wrap{ position:relative; z-index:2; }

/* ==========================================================================
   37. WARIANT WYŚRODKOWANY NAGŁÓWKA PODSTRONY
   ========================================================================== */
.phead--center{ text-align:center; }
.phead--center .statement{ max-width:34ch; margin-inline:auto; }
.phead--center .crumbs{ justify-content:center; }

/* Lista usług w dwóch kolumnach */
@media (min-width:900px){
  .svc-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.svc-row h3{ margin-bottom:18px; }

/* ==========================================================================
   38. GALERIA — UKŁAD NIEREGULARNY
   ========================================================================== */
.gal{
  display:block; column-count:3; column-gap:20px;
  background:transparent; border:0;
}
.gal__i{
  break-inside:avoid; margin:0 0 20px; display:block; width:100%;
  aspect-ratio:4/3; background:transparent;
}
.gal__i[data-ratio="3/4"]{ aspect-ratio:3/4; }
.gal__i[data-ratio="1/1"]{ aspect-ratio:1/1; }
.dark .gal__i{ box-shadow:inset 0 0 0 1px var(--bd); }

@media (max-width:1024px){ .gal{ column-count:2; } }
@media (max-width:640px){ .gal{ column-count:2; column-gap:12px; } .gal__i{ margin-bottom:12px; } }

/* ==========================================================================
   39. FORMULARZ NA CIEMNYM TLE
   ========================================================================== */
.dark .field label{ color:var(--graphite); }
.dark .field input,.dark .field textarea,.dark .field select{
  background-color:var(--surface); border-color:var(--bd-2); color:var(--navy);
}
.dark .field input::placeholder,.dark .field textarea::placeholder{ color:var(--steel); }
.dark .field input:focus,.dark .field textarea:focus,.dark .field select:focus{
  border-color:var(--blue); box-shadow:0 0 0 3px rgba(22,82,171,.12);
}
.dark .check{ color:var(--graphite); }
.dark .form__ok{ background:rgba(22,82,171,.07); border-left-color:var(--blue); color:var(--navy); }
.dark .filters button{ color:var(--graphite); box-shadow:inset 0 0 0 1px var(--bd-2); }
.dark .filters button:hover{ color:var(--navy); box-shadow:inset 0 0 0 1px var(--navy); }
.dark .filters button[aria-pressed="true"]{ background:var(--navy); color:#fff; box-shadow:none; }

/* Sekcja tuż po nagłówku podstrony — mniejszy odstęp od otwarcia */
.sec--pull{ padding-top:clamp(24px,3vw,44px); }

/* Rozwijana lista w formularzu — miejsce na strzałkę przeglądarki */
.field select{ padding-right:48px; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A97A5' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 20px center; }

/* Panel kreskowany — wariant na stronie kontaktu */
.dashbox .spec{ border-top-color:var(--bd); }
.dashbox .spec div{ border-bottom-color:var(--bd); }
.dashbox .spec dt{ color:var(--steel); }

/* Kontakty klikalne — akcent na najechaniu */
.spec--contact dd a{ transition:color .25s var(--ease); }
.spec--contact dd a:hover{ color:var(--signal); }

/* Tekst otwierający podstronę — nieco większy, z większym oddechem po okruszkach */
.phead .statement{ font-size:clamp(1.6rem,2.7vw,2.4rem); }
.phead--center .crumbs{ margin-bottom:42px; }

/* Sloty zespołu w ciemnym wariancie design systemu */
.dark .team-slot{ background-color:transparent; }
.dark .team-slot__ph{ background:var(--surface-2); border:1px solid var(--bd); }
.dark .team-slot h3{ color:var(--steel); }
.dark .team-slot p{ color:var(--bd-2); }
.team-slot{ --cm:12px; padding:clamp(24px,2.4vw,32px); }
.team-grid{ display:grid; gap:8px; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px){ .team-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .team-grid{ grid-template-columns:1fr; } }

/* Fragment deklaracji zapisany słabszą bielą — hierarchia wewnątrz zdania */
.stmt-dim{ color:rgba(11,22,34,.38); }

/* ==========================================================================
   40. LICZBY — KAFLE W PROPORCJI 3:2, WARTOŚĆ PRZY DOLNEJ KRAWĘDZI
   ========================================================================== */
.stats-band{ position:relative; isolation:isolate; overflow:hidden; }
.stats-band::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(11,22,34,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,22,34,.06) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  -webkit-mask-image:radial-gradient(70% 90% at 50% 50%, #000 0%, rgba(0,0,0,.55) 45%, transparent 82%);
  mask-image:radial-gradient(70% 90% at 50% 50%, #000 0%, rgba(0,0,0,.55) 45%, transparent 82%);
}
.stats-band::after{
  content:''; position:absolute; left:50%; top:50%; z-index:-2; pointer-events:none;
  width:min(900px,80%); height:62%; transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,
    rgba(22,82,171,.16) 0%, rgba(21,104,200,.10) 38%, transparent 74%);
  filter:blur(30px);
}
.stats-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.stat{
  --cm:12px; padding:26px 24px;
  display:flex; flex-direction:column; justify-content:space-between;
}
@media (min-width:1024px){ .stat{ aspect-ratio:3/2; } }
.stat__l{
  font-family:var(--fm); font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue);
}
.stat__v{
  font-family:var(--fd); font-weight:500; line-height:.92; color:var(--navy);
  font-size:clamp(3.4rem,8vw,7.5rem); letter-spacing:-.03em;
  font-feature-settings:'tnum' 1;
}
@media (max-width:1023px){ .stats-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .stats-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   41. SEKCJE NAPRZEMIENNE ZE ZDJĘCIEM
   ========================================================================== */
.alt{ display:grid; grid-template-columns:minmax(0,680px) minmax(0,776px);
  gap:clamp(32px,3.4vw,72px); align-items:center; justify-content:space-between; }
.alt--rev{ grid-template-columns:minmax(0,776px) minmax(0,680px); }
.alt__txt{ max-width:680px; }
.alt--rev .alt__txt{ order:2; }
.alt__fig{ margin:0; position:relative; max-width:776px; width:100%; }
.alt__fig img{ width:100%; height:auto; object-fit:cover; aspect-ratio:776/760; display:block; }
.alt__cap{
  font-family:var(--fm); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--steel); margin-top:14px; display:block;
}
@media (max-width:860px){
  .alt,.alt--rev{ grid-template-columns:1fr; }
  .alt--rev .alt__txt{ order:0; }
  .alt__fig img{ aspect-ratio:4/3; }
}

/* Kontener tekstu w sekcji otwierającej O nas */
/* Nagłówek podstrony w tej samej skali co nagłówek hero */
.phead h1.h-lg{ font-size:clamp(3rem,6.5vw,5rem); line-height:1.12; letter-spacing:-.014em; }
.phead--640 h1,.phead--640 .lead{ max-width:640px; }

/* Akapit wiodący na pełną szerokość kolumny */
.lead--full{ max-width:none; }

/* ==========================================================================
   42. ZDJĘCIE W SEKCJI HERO
   ========================================================================== */
.hero__txt{ display:flex; flex-direction:column; justify-content:center; }
.hero__fig{ margin:0; position:relative; height:100%; min-height:0; }
.hero__fig img{
  width:100%; height:100%; display:block; object-fit:cover; object-position:12% 44%;
}

@media (max-width:1080px){
  .hero{ height:auto; min-height:100svh; }
  .hero__in{ grid-template-columns:1fr; }
  .hero__fig{ height:auto; min-height:300px; }
  .hero__fig img{ aspect-ratio:16/10; }
}

/* Sekcja wyróżników — spokojne błękitnoszare tło zamiast siatki */
.sec--mist{ background:var(--mist); }
.sec--mist .frame__i,.sec--mist .dashbox,.sec--mist .svc-row{ background:var(--surface); }

/* Zdjęcia w sekcjach naprzemiennych bez ramki */
.alt__fig{ padding:0; box-shadow:none; }

/* Większe logo w stopce */
.ftr__logo img{ height:72px; }

/* Karty usług bez obramowania — tło sekcji wystarczy za rozdzielnik */
.svc-list .svc-row{ box-shadow:none; }

/* Kontakty wyrównane do prawej krawędzi kontenera */
.spec--contact dd{ text-align:right; }
.spec--contact div{ grid-template-columns:minmax(90px,auto) 1fr; }

/* Panel danych kontaktowych na stronie Kontakt — bez obramowania */
.stack .dashbox{ padding:0; background:transparent; }


/* Logo w stopce */
.ftr__logo img{ height:80px; }

/* Nagłówek podstrony w wariancie samych okruszków */
.phead--slim{ padding-bottom:0; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Sekcje ze zdjęciem — ciaśniejszy rytm */
.sec--alt{ padding-block:clamp(36px,4vw,60px); }

/* Kółko przy nadtytule w panelu danych kontaktowych */
.dashbox .mono{ display:flex; align-items:center; gap:12px; }
.dashbox .mono::before{
  content:''; width:8px; height:8px; flex:none;
  border:1.5px solid currentColor; border-radius:50%;
}

/* Stopka z krawędzią — używana tam, gdzie nad nią nie ma szwu */
.ftr--rule{ border-top:1px solid var(--bd); }

/* ==========================================================================
   43. SCHEMATY POZOSTAŁYCH USŁUG
   ========================================================================== */
/* przeglądy — pasek postępu wypełniający podziałkę */
.sa-prog{ stroke-dasharray:190; stroke-dashoffset:190; animation:saProg 5s var(--ease-t) infinite; }
@keyframes saProg{ 0%{ stroke-dashoffset:190; } 52%{ stroke-dashoffset:0; } 86%{ stroke-dashoffset:0; } 95%,100%{ stroke-dashoffset:190; } }

/* doradztwo — wachlarz odnośników rysowany kolejno */
.sa-fan{ stroke-dasharray:130; stroke-dashoffset:130; animation:saFan 5.2s var(--ease-t) infinite; }
.sa-fan--2{ animation-delay:.28s; }
.sa-fan--3{ animation-delay:.56s; }
@keyframes saFan{ 0%{ stroke-dashoffset:130; } 38%{ stroke-dashoffset:0; } 84%{ stroke-dashoffset:0; } 94%,100%{ stroke-dashoffset:130; } }

/* instalacje elektryczne — impuls schodzący kolejnymi odejściami */
.sa-drop{ stroke-dasharray:14 300; animation:saDrop 4.2s linear infinite; }
.sa-drop--2{ animation-delay:.5s; }
.sa-drop--3{ animation-delay:1s; }
@keyframes saDrop{ from{ stroke-dashoffset:14; } to{ stroke-dashoffset:-170; } }

/* pomiary — wskazówka omiatająca skalę */
.sa-needle{ animation:saNeedle 4.6s var(--ease) infinite; }
@keyframes saNeedle{ 0%,8%{ transform:rotate(-54deg); } 46%,58%{ transform:rotate(48deg); } 92%,100%{ transform:rotate(-54deg); } }

/* izolacje — warstwa narastająca wokół przekroju */
.sa-layer{ stroke-dasharray:160; stroke-dashoffset:160; animation:saLayer 4.8s var(--ease-t) infinite; }
@keyframes saLayer{ 0%{ stroke-dashoffset:160; } 44%{ stroke-dashoffset:0; } 86%{ stroke-dashoffset:0; } 95%,100%{ stroke-dashoffset:160; } }

/* demontaż — element odsuwany ze stosu */
.sa-lift{ animation:saLift 4.6s var(--ease) infinite; }
@keyframes saLift{
  0%,14%{ transform:translate(0,0); opacity:1; }
  52%,68%{ transform:translate(72px,-30px); opacity:1; }
  78%{ opacity:0; }
  80%,92%{ transform:translate(0,0); opacity:0; }
  100%{ transform:translate(0,0); opacity:1; }
}

/* modernizacje — wymiana modułu */
.sa-old{ animation:saOld 5s var(--ease) infinite; }
@keyframes saOld{ 0%,28%{ opacity:1; } 46%,92%{ opacity:.14; } 100%{ opacity:1; } }
.sa-new{ animation:saNew 5s var(--ease) infinite; }
@keyframes saNew{ 0%,34%{ opacity:0; } 52%,90%{ opacity:1; } 100%{ opacity:0; } }

/* Kafel usługi na pełną szerokość listy */
/* Kafel na pełną szerokość — tekst w jednej kolumnie, schemat w drugiej */
@media (min-width:900px){
  .svc-row--wide{
    grid-column:1 / -1; display:grid; align-items:center;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    /* Cztery jawne wiersze — bez nich `grid-row: 1 / -1` obejmuje tylko
       pierwszy wiersz i schemat przykleja się do górnej krawędzi karty. */
    grid-template-rows:repeat(4, auto);
    column-gap:clamp(40px,5vw,88px);
  }
  .svc-row--wide > *{ grid-column:1; }
  .svc-row--wide .svc__anim{ grid-column:2; grid-row:1 / -1; align-self:center; margin:0; }
  .svc-row--wide .svc__anim svg{ max-width:340px; }
  .svc-row--wide .btn{ justify-self:start; margin-top:8px; }
}

/* ==========================================================================
   44. SEKCJA KONTAKTOWA NA KOLORZE MARKI
   Blok domyka stronę: jednolity błękit marki, biała typografia
   i biała kratka wychodząca ponad treść.
   ========================================================================== */
.sec--brand{
  position:relative; isolation:isolate; overflow:hidden;
  padding-block:64px; color:#fff;
  background:var(--blue);
}
/* Kratka wyłania się od dołu */

.sec--brand h2,
.sec--brand .spec--contact dd,
.sec--brand .spec--contact dd a{ color:#fff; }
.sec--brand .eyebrow{ color:rgba(255,255,255,.82); }
.sec--brand .spec--contact dd a:hover{ color:rgba(255,255,255,.72); }
.sec--brand .spec,
.sec--brand .spec div{ border-color:rgba(255,255,255,.24); }
.sec--brand .spec dt{ color:rgba(255,255,255,.62); }
.sec--brand .btn{ background:#fff; color:var(--blue); }
.sec--brand .btn:hover{ background:#E8EFF9; }

/* ==========================================================================
   45. LICZBY NA PODSTRONIE O NAS
   Ten sam układ co tabela kontaktowa: etykieta z lewej, wartość z prawej,
   wiersze rozdzielone włosem. Skala liczb bez zmian, kolor brandowy.
   ========================================================================== */
.stats-list{ border-top:1px solid var(--bd); }
.stats-list div{
  grid-template-columns:minmax(140px,auto) 1fr;
  padding:clamp(16px,2.2vw,30px) 0; align-items:center;
}
.stats-list dd{ text-align:right; }
.stats-list .stat__v{ display:block; color:var(--blue); }
@media (max-width:640px){
  .stats-list div{ grid-template-columns:1fr; gap:4px; }
  .stats-list dd{ text-align:left; }
}

/* ==========================================================================
   46. BLOK ZAMYKAJĄCY — SEKCJA KONTAKTOWA I STOPKA NA JEDNYM GRADIENCIE
   Wspólny rodzic niesie tło, więc na styku obu elementów nie ma krawędzi.
   ========================================================================== */
.closing{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--blue);
  color:#fff;
}
/* Kratka obejmuje sekcję kontaktową i stopkę — jedna warstwa, bez krawędzi */
.closing::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  -webkit-mask-image:radial-gradient(46% 62% at 24% 26%, #000 10%, rgba(0,0,0,.45) 50%, transparent 84%);
  mask-image:radial-gradient(46% 62% at 24% 26%, #000 10%, rgba(0,0,0,.45) 50%, transparent 84%);
}
.closing .sec--brand{ background:none; }
.closing .ftr{ background:none; color:rgba(255,255,255,.74); }
.closing .ftr h4{ color:#fff; }
.closing .ftr a{ color:rgba(255,255,255,.74); }
.closing .ftr a:hover{ color:#fff; }
.closing .ftr__logo img{ filter:brightness(0) invert(1); }
.closing .ftr__bot{ border-top-color:rgba(255,255,255,.16); color:rgba(255,255,255,.5); }
.closing .lang a{ color:rgba(255,255,255,.55); }
.closing .lang a[aria-current="true"]{ color:#fff; }
.closing .lang span{ color:rgba(255,255,255,.3); }

/* Sekcja otwierająca O nas — tekst i liczby obok siebie */
.phead--split .phead__in{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(40px,6vw,96px); align-items:center;
}
.phead--split .statement{ max-width:600px; }
.phead--split .stats-list{ border-top-color:var(--bd); }
@media (max-width:960px){
  .phead--split .phead__in{ grid-template-columns:1fr; }
}

/* Blok zamykający nie dostaje własnego marginesu — odstęp przed gradientem
   daje padding dolny ostatniej sekcji. Doliczanie drugiego odstępu czytałoby
   się jako podwójna przerwa, bo po stronie koloru nie ma już „oddechu". */
.closing{ margin-top:0; }

/* Sekcja otwierająca O nas — kratka skupiona pod liczbami */
.phead--split::before{
  -webkit-mask-image:radial-gradient(48% 105% at 26% 55%, #000 14%, rgba(0,0,0,.45) 54%, transparent 84%);
  mask-image:radial-gradient(48% 105% at 26% 55%, #000 14%, rgba(0,0,0,.45) 54%, transparent 84%);
}

/* ==========================================================================
   47. STRONA KONTAKT — biały panel danych, pola bez obrysu, styk ze stopką
   ========================================================================== */
.stack .dashbox{ padding:64px clamp(28px,3vw,40px); background:var(--surface); }
.stack .dashbox .spec div:last-child{ border-bottom:0; padding-bottom:0; }
.sec--mist .field input,
.sec--mist .field textarea,
.sec--mist .field select{ border:0; background-color:var(--surface); }
.sec--mist .field input:focus,
.sec--mist .field textarea:focus,
.sec--mist .field select:focus{ box-shadow:0 0 0 2px var(--blue); }
.sec--mist .field.has-error input,
.sec--mist .field.has-error textarea{ box-shadow:0 0 0 2px #C0392B; }

/* O nas kończy się sekcją ze zdjęciem o węższym rytmie — tam odstęp
   przed gradientem jest podwojony, żeby blok zamykający miał oddech. */
main:has(> section.sec--alt:last-of-type) + .closing{ margin-top:clamp(36px,4vw,58px); }

/* ==========================================================================
   48. KONTAKT — panel danych na całą wysokość sekcji, ze zdjęciem w tle
   ========================================================================== */
.sec--mist .split{ align-items:stretch; }
.sec--mist .stack .dashbox{
  height:100%; display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(40px,5vw,64px);
  color:#fff;
  background:linear-gradient(150deg, #0B2C5E 0%, #1652AB 52%, #1B6FD6 100%);
}
.sec--mist .stack .dashbox .mono{ color:#fff; }
.sec--mist .stack .dashbox .spec{ border-top-color:rgba(255,255,255,.28); }
.sec--mist .stack .dashbox .spec div{ border-bottom-color:rgba(255,255,255,.28); }
.sec--mist .stack .dashbox .spec dt{ color:rgba(255,255,255,.62); }
.sec--mist .stack .dashbox .spec dd,
.sec--mist .stack .dashbox .spec dd a{ color:#fff; }
.sec--mist .stack .dashbox .spec dd a:hover{ color:rgba(255,255,255,.72); }
@media (max-width:860px){
  .sec--mist .stack .dashbox{ min-height:420px; }
}

/* ==========================================================================
   50. KOREKTY SKALI TYPOGRAFICZNEJ
   ========================================================================== */
/* Etykiety techniczne: nadtytuły sekcji, numery kroków, opisy kafli */
.eyebrow{ font-size:14px; }
.step__n{ font-size:13px; }
.svc__n{ font-size:13px; }
.stat__l{ font-size:13px; }
.crumbs{ font-size:12px; }
.spec dt{ font-size:12px; }
.field label{ font-size:12px; }
.dashbox .mono,
.mono{ font-size:14px; }

/* Pasek czterech cech */
.strip__i b{ font-size:13px; }
.strip--dark .strip__i span{ font-size:clamp(1.1rem,1.35vw,1.28rem); }

/* Stopka — czytelniejsza, z wyróżnionymi nazwiskami */
.ftr{ font-size:17px; }
.ftr h4{ font-size:12px; margin-bottom:22px; }
.ftr__bot{ font-size:12px; }
/* Kontakty w stopce mieszkają teraz wyłącznie w sekcji nad nią, więc
   kolumny nawigacyjne wracają do jednej, spokojnej skali. */
.ftr__logo p{ font-size:17px; line-height:1.55; }

/* ==========================================================================
   51. HERO NA PEŁNOEKRANOWYM ZDJĘCIU
   Zdjęcie w tle całej sekcji, kierunkowe przyciemnienie (mocniejsze po
   stronie tekstu), biała typografia i pasek czterech cech wtopiony
   w dolną krawędź kadru.
   ========================================================================== */
.hero{
  flex-direction:column; color:#fff;
  background-image:
    /* przyciemnienie pod belką — żeby menu było czytelne nad jasnym kadrem */
    linear-gradient(to bottom, rgba(9,20,34,.5) 0, rgba(9,20,34,0) 190px),
    linear-gradient(100deg, rgba(9,20,34,.84) 0%, rgba(9,20,34,.64) 46%, rgba(9,20,34,.34) 100%),
    url('../img/foto/hero-hala.jpg');
  background-size:100% 190px, cover, cover;
  background-position:top center, center, 62% center;
  background-repeat:no-repeat;
}
.hero__in{ display:flex; flex-direction:column; justify-content:center; flex:1; }
.hero__txt{ max-width:760px; }
.hero .eyebrow{ color:rgba(255,255,255,.88); }
.hero h1{ color:#fff; }
.hero h1 em{ color:#fff; }
.hero .lead{ color:rgba(255,255,255,.84); }
.hero .btn--ghost{ color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.44); }
.hero .btn--ghost:hover{ background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px #fff; }

/* Pasek cech w dolnej krawędzi hero */
.hero .strip--dark{ background:transparent; padding-block:0; }
.hero .strip--dark .strip__in{ border-top:1px solid rgba(255,255,255,.16); }
.hero .strip--dark .strip__i{
  border-left-color:rgba(255,255,255,.16); padding:28px 32px 34px;
}
.hero .strip--dark .strip__i:first-child{ padding-left:0; }
.hero .strip--dark .strip__i b{ color:#fff; }
.hero .strip--dark .strip__i span{ color:#fff; }

/* Belka nad zdjęciem — jasna do momentu przypięcia */
.chrome.on-dark:not(.is-stuck) .nav a{ color:#fff; }
.chrome.on-dark:not(.is-stuck) .logo img{ filter:brightness(0) invert(1); }
.chrome.on-dark:not(.is-stuck) .lang a{ color:rgba(255,255,255,.55); }
.chrome.on-dark:not(.is-stuck) .lang a:hover,
.chrome.on-dark:not(.is-stuck) .lang a[aria-current="true"]{ color:#fff; }
.chrome.on-dark:not(.is-stuck) .lang span{ color:rgba(255,255,255,.3); }
.chrome.on-dark:not(.is-stuck) .burger i{ background:#fff; }
.logo img{ transition:filter .4s var(--ease); }

@media (max-width:1080px){
  .hero{ height:auto; min-height:100svh; }
}
@media (max-width:860px){
  .hero .strip--dark .strip__i{ border-top-color:rgba(255,255,255,.16); padding:24px 0 26px; }
}

/* ==========================================================================
   52. KOREKTY SKALI — DRUGA TURA
   ========================================================================== */
/* Sekcja kontaktowa nad stopką: etykiety z nazwiskami wyraźnie większe */
.sec--brand .spec--contact dt{ font-size:16px; letter-spacing:.1em; }

/* Kroki procesu — mocniejszy akcent */
.step h3{ font-size:1.9rem; font-weight:600; }

/* Tytuły usług — pogrubione */
.svc h3,
.svc-row h3{ font-weight:600; }

/* O nas — etykiety przy liczbach trzykrotnie większe */
.stats-list dt{
  font-family:var(--fd); font-weight:500; font-size:36px;
  letter-spacing:-.01em; text-transform:none; color:var(--graphite);
  line-height:1.15;
}
.stats-list div{ grid-template-columns:minmax(0,1fr) auto; align-items:end; }
@media (max-width:1200px){ .stats-list dt{ font-size:28px; } }
@media (max-width:640px){ .stats-list dt{ font-size:24px; } }

/* Kontakt — panel z danymi rejestrowymi */
.databox{ background:var(--surface); padding:clamp(32px,3.4vw,44px); }
.databox .mono{ display:flex; align-items:center; gap:12px; color:var(--blue); margin-bottom:20px; }
.databox .mono::before{
  content:''; width:8px; height:8px; flex:none;
  border:1.5px solid currentColor; border-radius:50%;
}
.databox__n{
  font-family:var(--fd); font-weight:500; font-size:20px; line-height:1.32;
  color:var(--navy); margin-bottom:24px;
}
.spec--reg dt{ font-size:12px; }
.spec--reg dd{ font-size:16px; }
.spec--reg div{ padding:14px 0; }
.spec--reg div:last-child{ border-bottom:0; padding-bottom:0; }

/* Panel ze zdjęciem wypełnia resztę kolumny */
.sec--mist .stack{ grid-template-rows:auto 1fr; }
/* Trzy kolumny w stopce po usunięciu powtórzonych kontaktów */
.ftr__top{ grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr)); }
.ftr__bot{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.ftr__bot .lang{ order:-1; }

/* ==========================================================================
   53. KOREKTY SKALI — TRZECIA TURA
   ========================================================================== */
/* Belka: nawigacja i przełącznik języków */
.nav a{ font-size:19px; }
.lang{ font-size:14px; }
.lang a{ padding:6px 9px; }

/* Panel danych kontaktowych na stronie Kontakt — większe nazwiska */
.sec--mist .stack .dashbox .spec dt{ font-size:16px; letter-spacing:.1em; }
/* Panel z gradientem: etykieta nad wartością, żeby numery nie łamały się w kolumnie */
.sec--mist .stack .dashbox .spec div{ grid-template-columns:1fr; gap:6px; padding:22px 0; }
.sec--mist .stack .dashbox .spec dd{ text-align:left; }