/* IT-ELECTRIC, motyw „rama” (29.09.2026)
   Neutralna czerń, zero zaokrągleń, strona w jednej ramce z linii 1 px, sekcje i karty jako komórki siatki.
   Nagłówki cienkie, mono wielkimi literami w nawigacji, przyciskach i etykietach, numeracja 01 / 1.1.
   Kolor tylko w drobiazgach: zielona dioda (akcent) i jeden limonkowy blok kontaktu.
   CSP strony: style-src 'self', więc zero stylów inline; wszystko tutaj. */

/* CZCIONKI: Geist i Geist Mono (licencja OFL), pliki na własnym serwerze */
@font-face{font-family:"Geist"; font-style:normal; font-weight:100 900; font-display:swap; src:url(fonts/geist-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Geist"; font-style:normal; font-weight:100 900; font-display:swap; src:url(fonts/geist-latin.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Geist Mono"; font-style:normal; font-weight:100 900; font-display:swap; src:url(fonts/geist-mono-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Geist Mono"; font-style:normal; font-weight:100 900; font-display:swap; src:url(fonts/geist-mono-latin.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --bg:#0E0E0E;
  --bg-2:#111111;
  --stopka:#171717;
  --panel:#131313;
  --panel-2:#1A1A1A;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.14);
  --line-3:rgba(255,255,255,.26);
  --ink:#FFFFFF;
  --ink-2:#A6A6A6;      /* 7,9:1 na tle */
  --ink-3:#8E8E8E;      /* 5,9:1 na tle */
  --lead:#BDBDBD;
  --pole-ramka:#6B6B6B; /* 3,6:1, granica pola (WCAG 1.4.11) */
  --accent:#85ED75;
  --uwaga:#F2B544;
  --pilne:#FF6E61;
  --limonka:#E1F14A;
  --limonka-ink:#0A0A0A;
  --limonka-ink-2:#2B3000;
  --szary-btn:#2A2A2A;
  --szary-btn-hover:#383838;
  --zakladka:rgba(255,255,255,.13);
  --zakladka-hover:rgba(255,255,255,.22);
  --ramka:1360px;
  --odstep:24px;
  --sekcja:96px;
  --header-h:76px;
  --sans:"Geist","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,Consolas,"SFMono-Regular",monospace;
}

/* PODSTAWA */
[hidden]{display:none !important;}
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); -webkit-text-size-adjust:100%; background:var(--bg); color-scheme:dark;}
body{background:var(--bg); color:var(--ink); font:17px/1.6 var(--sans); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-feature-settings:"ss01";}
img,svg{max-width:100%; display:block;}
a{color:var(--ink); text-underline-offset:3px; text-decoration-thickness:1px;}
a:hover{color:var(--accent);}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
/* Kotwice (29.09.2026): odstęp od nagłówka daje już scroll-padding-top na html; scroll-margin DODAJE się do niego,
   więc sekcja lądowała ok. 100 px za nisko. Sekcja ma równać się z dolną krawędzią nagłówka, inne cele (np. formularz) 16 px pod nim. */
[id]{scroll-margin-top:0;}
section[id]{scroll-margin-top:-16px;}
ul,ol{list-style:none;}
::selection{background:var(--accent); color:#0A0A0A;}
.wrap{max-width:var(--ramka); margin:0 auto; padding:0 var(--odstep);}
.skip{position:absolute; left:-9999px; top:0; background:#fff; color:#0A0A0A; padding:10px 16px; z-index:100; font:500 14px var(--mono); text-transform:uppercase; letter-spacing:.06em; text-decoration:none;}
.skip:focus{left:8px; top:8px;}
.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;}
.przygaszony{color:var(--ink-2);}
.nw{white-space:nowrap;}
.todo{border:1px dashed var(--uwaga); background:#1C1709; color:#F5DCA8; padding:12px 16px; margin:16px 0; font-size:16px; line-height:1.5;}
.todo strong{display:block; font:500 13px var(--mono); letter-spacing:.06em; text-transform:uppercase; margin-bottom:2px;}

/* TYPOGRAFIA */
h1,h2,h3{font-family:var(--sans); font-weight:400; color:var(--ink); letter-spacing:-.028em; overflow-wrap:break-word;}
h1{font-size:clamp(36px,4.3vw,60px); line-height:1.04; margin-bottom:24px;}
h2{font-size:clamp(28px,3.1vw,44px); line-height:1.08; margin-bottom:18px;}
h3{font-size:clamp(20px,1.7vw,23px); line-height:1.25; letter-spacing:-.018em; margin-bottom:10px;}
.hero-podstrona h1{font-size:clamp(34px,3.9vw,54px);}
.h-duzy{font-size:clamp(32px,4vw,56px); line-height:1.04;}
.h-cisza{color:var(--ink-3);}
p{margin-bottom:16px;}
h1,h2,h3,summary,.etykieta,.btn{text-wrap:balance;}
p,li,dd,figcaption{text-wrap:pretty;}
@media (max-width:374px){ h1,.hero-podstrona h1{font-size:29px;} }
@media (max-width:340px){ h1,.hero-podstrona h1{font-size:27px;} }
.lead{font-size:clamp(18px,1.45vw,20px); line-height:1.55; color:var(--ink-2); max-width:640px; letter-spacing:-.005em;}
.etykieta{display:inline-flex; align-items:center; gap:10px; font:400 13px/1.4 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin-bottom:18px;}
.etykieta-nr{color:var(--ink-3);}
.etykieta-el{color:var(--uwaga);}
.etykieta-odstep{margin-top:64px;}
.link-kreska{display:inline-flex; align-items:center; min-height:40px; font:400 14px var(--mono); letter-spacing:.06em; text-transform:uppercase; text-decoration:none; border-bottom:1px solid currentColor; white-space:nowrap;}

/* PRZYCISKI: kwadratowe, mono, biały główny i szary drugi (jak u wzoru) */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:10px 16px; font:400 14px/1.25 var(--mono); letter-spacing:.07em; text-transform:uppercase; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:background-color .15s ease, border-color .15s ease, color .15s ease;}
.btn .strzalka{flex:none; width:12px; height:12px; transition:transform .15s ease;}
.btn:hover .strzalka{transform:translateX(2px);}
.btn-glowny,.btn.btn-glowny{background:#FFFFFF; color:#0A0A0A;}
.btn-glowny:hover{background:#DADADA; color:#0A0A0A;}
.btn-obrys{background:var(--szary-btn); color:#FFFFFF;}
.btn-obrys:hover{background:var(--szary-btn-hover); color:#FFFFFF;}
.btn svg,.nav-tel svg{flex:none; max-width:none;}
.btn-rzad{display:flex; flex-wrap:wrap; gap:6px; margin-top:32px;}

/* DIODY STANU */
.dioda{display:inline-block; flex:none; width:8px; height:8px; border-radius:50%; background:#3A3A3A;}
.dioda-ok{background:var(--accent);}
.dioda-uwaga{background:var(--uwaga);}
.dioda-pilne{background:var(--pilne);}
.dioda-swieci{box-shadow:0 0 10px var(--accent);}

/* PASEK GÓRNY */
.pasek-gorny{background:var(--stopka); border-bottom:1px solid var(--line); font:400 13px/1.4 var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2);}
.pasek-gorny .wrap{min-height:36px; display:flex; align-items:center; justify-content:center; gap:14px;}
.pasek-gorny .wrap > span + span{padding-left:14px; border-left:1px solid var(--line-2);}
.pasek-przepisy{padding:2px 8px; border:1px solid var(--line-2) !important; background:rgba(0,0,0,.3); color:var(--ink);}
.pasek-gorny .wrap > .pasek-przepisy + span{border-left:0; padding-left:0;}
.pasek-prawy{display:inline-flex; align-items:center; gap:10px; color:var(--ink);}
.pasek-prawy .dioda{background:var(--accent); box-shadow:0 0 10px var(--accent);}
@media (max-width:900px){ .pasek-prawy{display:none !important;} }
@media (max-width:560px){ .pasek-przepisy{display:none;} }

/* NAGŁÓWEK Z ZAKŁADKAMI 01 do 05 (numery z licznika CSS) */
.site-header{position:sticky; top:0; z-index:50; background:rgba(14,14,14,.88); -webkit-backdrop-filter:blur(12px) saturate(140%); backdrop-filter:blur(12px) saturate(140%); border-bottom:1px solid var(--line);}
.nav{max-width:var(--ramka); margin:0 auto; padding:0 var(--odstep); min-height:var(--header-h); display:flex; align-items:center; gap:28px;}
.logo{display:inline-flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; flex:none;}
.logo:hover{color:var(--ink);}
.logo-tekst{font:500 17px/1 var(--mono); letter-spacing:.14em;}
.nav-links{display:flex; align-items:center; gap:4px; counter-reset:nav;}
.nav-links > li{counter-increment:nav;}
.nav-links > li > a{display:flex; align-items:center; gap:26px; min-height:32px; padding:6px 9px; background:var(--zakladka); color:var(--ink); text-decoration:none; font:400 14px/1.2 var(--mono); letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; transition:background-color .15s ease;}
.nav-links > li > a::after{content:"0" counter(nav); color:rgba(255,255,255,.5);}
.nav-links > li > a:hover{background:var(--zakladka-hover); color:var(--ink);}
.nav-links > li > a[aria-current="page"],.nav-links > li > a.w-dziale{background:rgba(255,255,255,.3);}
.nav-tel{margin-left:auto; min-height:40px; padding:8px 14px; gap:10px;}
.nav-tel svg{width:15px; height:15px;}

/* PODMENU USŁUG: panel na całą szerokość pod nagłówkiem, kolumny filarów, usługi numerowane 1.1 */
.ma-podmenu{display:flex; align-items:stretch;}
.ma-podmenu > a{padding-right:9px;}
.podmenu-toggle{width:30px; min-height:32px; margin-left:1px; border:0; background:var(--zakladka); color:var(--ink); cursor:pointer; flex:none; transition:background-color .15s ease;}
.podmenu-toggle::before{content:""; display:block; margin:0 auto; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .2s ease;}
.podmenu-toggle[aria-expanded="true"]::before{transform:translateY(1px) rotate(-135deg);}
.podmenu-toggle:hover{background:var(--zakladka-hover);}
.podmenu{display:none; position:absolute; left:0; right:0; top:100%; z-index:60; background:rgba(14,14,14,.97); border-bottom:1px solid var(--line); box-shadow:0 30px 60px rgba(0,0,0,.55); counter-reset:grupa;}
.podmenu::before{content:""; position:absolute; left:0; right:0; bottom:100%; height:24px;}
.ma-podmenu:hover .podmenu,.ma-podmenu.otwarte .podmenu,.podmenu.open{display:grid;}
.ma-podmenu.bez-hover:hover .podmenu:not(.open),.ma-podmenu.bez-hover.otwarte .podmenu:not(.open){display:none;}
@media (min-width:1181px){
  .site-header{position:sticky;}
  .nav{position:relative;}
  /* tło na całą szerokość okna: cień bez rozmycia przycięty do wysokości panelu */
  .podmenu{grid-template-columns:repeat(4,minmax(0,1fr)); left:var(--odstep); right:var(--odstep); background:var(--bg); border-bottom:0; box-shadow:0 0 0 100vmax var(--bg); clip-path:inset(0 -100vmax -1px);}
  .podmenu-grupa{padding:28px 24px 32px; border-left:1px solid var(--line); border-bottom:1px solid var(--line);}
  .podmenu-grupa:last-child{border-right:1px solid var(--line);}
}
.podmenu-grupa{counter-increment:grupa; counter-reset:poz;}
.podmenu-filar{display:block; margin-bottom:14px; font:400 13px var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);}
.podmenu-filar::before{content:"0" counter(grupa) "  "; white-space:pre; color:var(--accent);}
.podmenu li li{counter-increment:poz;}
.podmenu a{display:flex; gap:12px; padding:7px 0; color:var(--ink); text-decoration:none; font-size:15.5px; line-height:1.35;}
.podmenu a::before{content:counter(grupa) "." counter(poz); flex:none; width:24px; padding-top:2px; font:400 13px var(--mono); color:var(--ink-3);}
.podmenu a:hover,.podmenu a[aria-current="page"]{color:var(--accent);}

/* MENU NA TELEFONIE I WĄSKIM LAPTOPIE (do 1180 px zakładki się nie mieszczą) */
.nav-toggle{display:none; flex:none; width:44px; height:44px; border:1px solid var(--line-3); background:none; color:var(--ink); cursor:pointer; position:relative;}
.nav-toggle span{position:absolute; left:12px; right:12px; height:1.5px; background:currentColor; transition:transform .2s ease, opacity .2s ease;}
.nav-toggle span:nth-child(1){top:15px;}
.nav-toggle span:nth-child(2){top:21px;}
.nav-toggle span:nth-child(3){top:27px;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
@media (max-width:1180px){
  :root{--header-h:68px;}
  .nav{gap:10px; position:relative;}
  .nav-toggle{display:block; order:3;}
  .nav-links{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--bg); border-bottom:1px solid var(--line); padding:8px var(--odstep) 20px; box-shadow:0 24px 40px rgba(0,0,0,.6); max-height:calc(100vh - var(--header-h)); max-height:calc(100dvh - var(--header-h)); overflow-y:auto; overscroll-behavior:contain;}
  .nav-links.open{display:flex;}
  .nav-links > li{border-top:1px solid var(--line);}
  .nav-links > li:first-child{border-top:0;}
  .nav-links > li > a{justify-content:space-between; min-height:54px; padding:12px 4px; background:none; font-size:14px; white-space:normal;}
  .nav-links > li > a:hover{background:none; color:var(--accent);}
  .nav-links > li > a[aria-current="page"],.nav-links > li > a.w-dziale{background:none; color:var(--accent);}
  .ma-podmenu{display:grid; grid-template-columns:minmax(0,1fr) auto;}
  .ma-podmenu > a{justify-content:space-between;}
  .podmenu-toggle{width:54px; min-height:54px; margin:0; background:none; border-left:1px solid var(--line);}
  .podmenu-toggle:hover{background:none;}
  .ma-podmenu:hover .podmenu:not(.open),.ma-podmenu.otwarte .podmenu:not(.open){display:none;}
  .podmenu.open{display:block;}
  .podmenu{position:static; grid-column:1 / -1; border:0; box-shadow:none; background:none; padding:4px 0 12px 4px;}
  .podmenu::before{content:none;}
  .podmenu-grupa{padding:10px 0;}
  .podmenu-filar{margin-bottom:6px;}
  .podmenu a{padding:9px 0; font-size:16.5px;}
}
@media (max-width:560px){
  .logo-tekst{font-size:15px; letter-spacing:.12em;}
  .logo-znak{width:30px; height:30px;}
  .nav-tel{width:44px; min-height:44px; padding:0;}
  .nav-tel span{display:none;}
}

/* RAMA: jedna ciągła rama z linii przez całą stronę, sekcje to komórki */
main > section,.pas-faktow,.pas-el{border-top:1px solid var(--line);}
main > section > .wrap,.pas-faktow > .wrap,.pas-el > .wrap,main > .okruszki{border-left:1px solid var(--line); border-right:1px solid var(--line);}
main > section > .wrap{padding-top:var(--sekcja); padding-bottom:var(--sekcja);}
main > section > .wrap + .wrap{padding-top:0;}
/* dwa .wrap w jednej sekcji (nagłówek, potem siatka): odstęp w paddingu, żeby rama z linii się nie urywała */
main > section > .wrap:has(+ .wrap){padding-bottom:56px;}
main > section > .wrap:has(+ .wrap) > :last-child{margin-bottom:0;}
@media (max-width:900px){ main > section > .wrap:has(+ .wrap){padding-bottom:40px;} }
section.ciemniej,section.alt{background:var(--bg-2);}
@media (max-width:1408px){ main > section > .wrap,.pas-faktow > .wrap,.pas-el > .wrap,main > .okruszki{margin-left:20px; margin-right:20px;} }
@media (max-width:760px){ :root{--sekcja:64px;} }
@media (max-width:560px){
  :root{--odstep:16px; --sekcja:56px;}
  main > section > .wrap,.pas-faktow > .wrap,.pas-el > .wrap,main > .okruszki{margin-left:0; margin-right:0; border-left:0; border-right:0;}
}

/* NAGŁÓWEK SEKCJI */
.sekcja-glowa{max-width:780px; margin-bottom:56px;}
.sekcja-glowa p{color:var(--ink-2); font-size:17px;}
.sekcja-glowa-rzad{max-width:none; display:flex; justify-content:space-between; align-items:flex-end; gap:56px;}
.sekcja-glowa-rzad > div{max-width:760px;}
.sekcja-glowa-rzad > div h2{margin-bottom:0;}
.sekcja-glowa-rzad > p{max-width:420px; margin:0;}
@media (max-width:900px){ .sekcja-glowa-rzad{flex-direction:column; align-items:flex-start; gap:20px;} .sekcja-glowa{margin-bottom:40px;} }

/* OKRUSZKI */
.okruszki{display:flex; flex-wrap:wrap; gap:6px 10px; padding-top:18px; padding-bottom:18px; font:400 13px/1.4 var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3);}
.okruszki a{color:var(--ink-2); text-decoration:none;}
.okruszki a:hover{color:var(--ink);}
.okruszki [aria-current]{color:var(--ink);}

/* TŁO Z KROPEK (hero): pole kropek w CSS, fala z canvas dokłada app.js */
.hero,.hero-podstrona{position:relative; overflow:hidden; background:var(--bg);}
.hero::before,.hero-podstrona::before{content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.15) 1px, transparent 1.4px); background-size:14px 14px; -webkit-mask-image:radial-gradient(ellipse 60% 85% at 78% 10%, #000 0%, transparent 72%); mask-image:radial-gradient(ellipse 60% 85% at 78% 10%, #000 0%, transparent 72%);}
.hero-fala{position:absolute; left:0; right:0; bottom:0; width:100%; height:64%; pointer-events:none; opacity:0; transition:opacity 1.2s ease; -webkit-mask-image:radial-gradient(ellipse 70% 100% at 70% 100%, #000 35%, transparent 78%); mask-image:radial-gradient(ellipse 70% 100% at 70% 100%, #000 35%, transparent 78%);}
.hero-fala.gotowa{opacity:1;}
/* telefon (od 30.09 fala także tu): pas fali za panelem „Stan IT”, panel bardziej przejrzysty, żeby ruch prześwitywał */
@media (max-width:899px){
  .hero-fala{top:38%; bottom:auto; height:62%; -webkit-mask-image:radial-gradient(ellipse 95% 70% at 50% 55%, #000 35%, transparent 85%); mask-image:radial-gradient(ellipse 95% 70% at 50% 55%, #000 35%, transparent 85%);}
  .hero .panel-stanu{background:rgba(11,11,11,.62); -webkit-backdrop-filter:blur(1.5px); backdrop-filter:blur(1.5px);}
}
.hero > .wrap,.hero-podstrona > .wrap{position:relative; z-index:1;}

/* HERO STRONY GŁÓWNEJ */
.hero > .wrap{padding-top:112px; padding-bottom:120px;}
.hero-uklad{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,540px); gap:72px; align-items:center;}
.hero-tekst{max-width:700px;}
.hero-tekst .lead + .lead{margin-top:-4px;}
.hero-ptaszki{display:flex; flex-wrap:wrap; gap:8px 0; margin-top:28px; font:400 14px/1.5 var(--mono); letter-spacing:.03em; color:var(--ink-3);}
.hero-ptaszki li{display:inline-flex; align-items:center; gap:8px;}
.hero-ptaszki li::before{content:"$"; color:var(--accent);}
.hero-ptaszki li + li::before{content:"/"; color:var(--line-3); margin:0 6px 0 10px;}
@media (max-width:1100px){ .hero-uklad{grid-template-columns:minmax(0,1fr); gap:56px; align-items:start;} .panel-stanu{max-width:640px;} }
@media (max-width:560px){ .hero > .wrap{padding-top:48px; padding-bottom:64px;} .hero-ptaszki{flex-direction:column; gap:6px;} .hero-ptaszki li + li::before{content:"$"; color:var(--accent); margin:0;} }

/* PANEL STANU (komórka „FIG.”) */
.panel-stanu{margin:0; background:rgba(11,11,11,.86); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:1px solid var(--line-2);}
.panel-glowa{min-height:44px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); font:400 13px var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);}
.panel-kropki{display:flex; gap:5px;}
.panel-kropki span{width:6px; height:6px; border-radius:50%; background:#3A3A3A;}
.panel-kropki span:first-child{background:var(--accent);}
.panel-lista{padding:4px 18px;}
.panel-lista li{min-height:52px; display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--line); padding:8px 0;}
.panel-lista li:last-child{border-bottom:0;}
.panel-co{flex:1 1 auto; font-size:15px; line-height:1.35;}
.panel-kiedy{font:400 14px var(--mono); color:var(--ink-2); white-space:nowrap;}
.panel-stan{width:100px; flex:none; text-align:right; font:500 13px var(--mono); letter-spacing:.05em; white-space:nowrap;}
.stan-ok{color:var(--accent);}
.stan-uwaga{color:var(--uwaga);}
.stan-pilne{color:var(--pilne);}
.panel-stopka{padding:14px 18px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px;}
.panel-suma{margin:0; display:flex; flex-wrap:wrap; gap:6px 18px; font:400 14px var(--mono); color:var(--ink-2);}
@media (max-width:560px){
  .panel-lista{padding:4px 14px;}
  .panel-lista li{flex-wrap:wrap; gap:4px 12px;}
  .panel-co{flex-basis:calc(100% - 22px);}
  .panel-kiedy{margin-left:22px;}
  .panel-stan{width:auto; margin-left:auto;}
  .panel-glowa,.panel-stopka{padding-left:14px; padding-right:14px;}
}

/* PAS FAKTÓW: rząd komórek jak rząd logotypów u wzoru */
.pas-faktow .wrap{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:0;}
.pas-faktow .wrap > div{position:relative; display:flex; flex-direction:column; justify-content:center; gap:8px; min-height:132px; padding:36px 28px 28px; border-left:1px solid var(--line);}
.pas-faktow .wrap > div:first-child{border-left:0;}
.pas-faktow strong{font:400 19px/1.3 var(--sans); letter-spacing:-.015em; color:var(--ink);}
.pas-faktow span{font:400 13px/1.45 var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3);}
.pas-faktow .wrap > div::before{content:""; position:absolute; top:14px; right:14px; width:6px; height:6px; background:var(--line-3);}
.pas-faktow .wrap > div:first-child::before{background:var(--accent);}
@media (max-width:1000px){
  .pas-faktow .wrap{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pas-faktow .wrap > div{border-top:1px solid var(--line);}
  .pas-faktow .wrap > div:nth-child(-n+2){border-top:0;}
  .pas-faktow .wrap > div:nth-child(odd){border-left:0;}
}
@media (max-width:560px){
  .pas-faktow .wrap{grid-template-columns:minmax(0,1fr);}
  .pas-faktow .wrap > div{min-height:0; padding:24px var(--odstep) 22px; border-left:0; border-top:1px solid var(--line);}
  .pas-faktow .wrap > div:first-child{border-top:0;}
}

/* KARTY FILARÓW: jedna siatka z linii, rysunek „FIG.”, numer i tytuł, usługi 1.1, 1.2 */
.filary{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); counter-reset:fil;}
.filar{display:flex; flex-direction:column; background:var(--bg); counter-increment:fil; counter-reset:us; min-width:0;}
section.ciemniej .filar{background:var(--bg-2);}
.filar-fig{position:relative; margin:0; border-bottom:1px solid var(--line); aspect-ratio:480 / 300; overflow:hidden;}
.filar-fig img,.filar-rys{width:100%; height:100%; object-fit:contain; transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.filar:hover .filar-fig img,.filar:hover .filar-rys{transform:translateY(-4px);}
.filar-glowa{min-height:40px; padding:14px 20px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; font:400 13px var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);}
.filar-fig .filar-glowa{position:absolute; top:0; left:0; right:0; z-index:1;}
.filar-kropki{display:flex; gap:5px;}
.filar-kropki span{width:6px; height:6px; border-radius:50%; background:#3A3A3A;}
.filar-kropki .kropka-ok{background:var(--accent);}
.filar-kropki .kropka-uwaga{background:var(--uwaga);}
.filar-tresc{padding:28px 24px 24px; display:flex; flex-direction:column; flex-grow:1;}
.filar .ikona{margin-bottom:18px; color:var(--ink-3);}
.filar h3{display:flex; gap:12px; font-size:23px;}
.filar h3::before{content:"0" counter(fil); color:var(--ink-3);}
.filar p{color:var(--ink-2); font-size:16px; line-height:1.6;}
.filar ul{margin-top:auto; padding-top:8px;}
.filar li{counter-increment:us;}
.filar li a{display:flex; align-items:baseline; gap:14px; min-height:40px; padding:8px 0; color:#DEDEDE; font-size:15.5px; line-height:1.4; text-decoration:none;}
.filar li a::before{content:counter(fil) "." counter(us); flex:none; width:28px; font:400 13px var(--mono); color:var(--ink-3);}
.filar li a span{margin-left:auto; color:var(--ink-3); transition:transform .15s ease, color .15s ease;}
.filar li a:hover{color:#FFFFFF;}
.filar li a:hover span{color:var(--accent); transform:translateX(3px);}
.filar li a.przygaszony{color:var(--ink-2);}
@media (max-width:1000px){ .filary{grid-template-columns:minmax(0,1fr);} .filar-fig{aspect-ratio:auto; height:240px;} }

/* SZEROKI FILAR „NA MIARĘ”: komórka dopięta do siatki */
.filar-szeroki{margin-top:-1px; display:flex; align-items:center; justify-content:space-between; gap:24px 48px; flex-wrap:wrap; padding:32px 24px; border:1px solid var(--line); background:var(--bg);}
.filar-szeroki-opis{display:flex; gap:20px; align-items:flex-start; max-width:820px;}
.filar-szeroki-opis .ikona{flex:none; color:var(--accent);}
.filar-szeroki h3{margin-bottom:6px;}
.filar-szeroki p{margin:0; color:var(--ink-2); font-size:16px;}
.filar-szeroki-linki{display:flex; flex-wrap:wrap; gap:6px; margin-top:18px;}
.filar-szeroki-linki a{display:inline-flex; align-items:center; gap:12px; min-height:40px; padding:8px 14px; background:var(--szary-btn); color:var(--ink); font:400 14px var(--mono); letter-spacing:.06em; text-transform:uppercase; text-decoration:none;}
.filar-szeroki-linki a span{color:var(--accent); transition:transform .15s ease;}
.filar-szeroki-linki a:hover{background:var(--szary-btn-hover); color:var(--ink);}
.filar-szeroki-linki a:hover span{transform:translateX(3px);}
@media (max-width:560px){ .filar-szeroki{padding:24px 18px;} .filar-szeroki-opis{flex-direction:column; gap:14px;} }

/* DROGOWSKAZ DO ELEKTRYKI (28.09.2026): jeden pas pod usługami, bez przycisku */
.pas-el .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:10px 32px; padding-top:22px; padding-bottom:22px;}
.pas-el-etykieta{display:inline-flex; align-items:center; gap:10px; font:400 13px/1.4 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--uwaga); white-space:nowrap;}
.pas-el .dioda{background:var(--uwaga); box-shadow:0 0 10px var(--uwaga);}
.pas-el p{margin:0; flex:1 1 420px; font-size:15.5px; line-height:1.55; color:var(--ink-2);}
.pas-el a{display:inline-flex; align-items:center; min-height:40px; font:400 14px var(--mono); letter-spacing:.07em; text-transform:uppercase; text-decoration:none; white-space:nowrap;}
.pas-el a:hover{color:var(--uwaga);}

/* SCHEMAT SIECI (komórka FIG) */
.schemat-ramka{position:relative; background:var(--bg); border:1px solid var(--line); padding:56px 40px 36px; overflow-x:auto; -webkit-overflow-scrolling:touch; background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.3px); background-size:16px 16px;}
.schemat-ramka::before{content:"FIG. SIEĆ MAŁEJ FIRMY"; content:"FIG. SIEĆ MAŁEJ FIRMY" / ""; position:absolute; left:16px; top:14px; font:400 12.5px var(--mono); letter-spacing:.09em; color:var(--ink-3);}
.schemat{width:100%; height:auto; min-width:760px;}
/* Pionowy schemat na telefon (01.10.2026, audyt UX): poziomy rysunek przy 760 px w ramce 357 px dawał napisy 7,5 do 8,8 px
   i przewijanie w bok bez podpowiedzi. Do 899 px widać pionową wersję (te same węzły), skala co najwyżej 360 px. */
.schemat-pion{display:none; min-width:0; max-width:360px; margin:0 auto;}
@media (max-width:899px){ .schemat-poziom{display:none;} .schemat-pion{display:block;} .schemat-ramka{overflow-x:visible;} }
.schemat text{font-family:var(--mono);}
.schemat-wezel rect{transition:stroke .15s ease, fill .15s ease;}
.schemat-wezel:hover rect,.schemat-wezel:focus-visible rect{stroke:var(--accent); fill:#161B15;}
.schemat-wezel:focus{outline:none;}
.schemat-wezel:focus-visible rect{stroke:#FFFFFF; stroke-width:2;}
.legenda{display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:24px; font:400 14px var(--mono); color:var(--ink-2);}
.legenda li{display:flex; align-items:center; gap:8px;}
@media (max-width:899px){ .schemat-ramka{padding:48px 16px 20px;} }
@media (max-width:360px){ .schemat-ramka{padding-left:8px; padding-right:8px;} } /* przy 320 px napisy pionowego schematu zostają nad 13 px */
@media (prefers-reduced-motion:no-preference){
  .schemat.plynie .schemat-plyniecie{animation:plyniecie 1.2s linear 4;}
  @keyframes plyniecie{to{stroke-dashoffset:-24;}}
}

/* PORÓWNANIE */
.porownanie{display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:80px; align-items:start;}
.porownanie-opis p{color:var(--ink-2); font-size:17px;}
.tabela-porownanie{width:100%; border-collapse:collapse; border:1px solid var(--line); font-size:15px;}
.tabela-porownanie thead th,.tabela-porownanie thead td{height:48px; padding:0 20px; text-align:left; border-bottom:1px solid var(--line); font:400 13px var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);}
.tabela-porownanie thead .kol-my{color:var(--accent);}
.tabela-porownanie tbody th,.tabela-porownanie tbody td{height:60px; padding:12px 20px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle;}
.tabela-porownanie tbody tr:last-child > *{border-bottom:0;}
.tabela-porownanie tbody th{font-weight:400; color:var(--ink);}
.tabela-porownanie tbody td{color:var(--ink-2);}
.tabela-porownanie .kol-my{background:rgba(255,255,255,.035); border-left:1px solid var(--line);}
.tabela-porownanie tbody td.kol-my{color:var(--ink);}
@media (max-width:1000px){ .porownanie{grid-template-columns:minmax(0,1fr); gap:40px;} }
@media (max-width:640px){
  .tabela-porownanie thead{display:none;}
  .tabela-porownanie,.tabela-porownanie tbody,.tabela-porownanie tr,.tabela-porownanie th,.tabela-porownanie td{display:block;}
  .tabela-porownanie tr{border-bottom:1px solid var(--line);}
  .tabela-porownanie tbody tr:last-child{border-bottom:0;}
  .tabela-porownanie tbody th{height:auto; padding:16px 18px 6px; border:0;}
  .tabela-porownanie tbody td{height:auto; padding:5px 18px; border:0;}
  .tabela-porownanie tbody td:last-child{padding-bottom:16px;}
  .tabela-porownanie .kol-my{background:none; border-left:0;}
  .tabela-porownanie tbody td::before{content:attr(data-kto) ": "; font:400 13px var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3);}
  .tabela-porownanie tbody td.kol-my::before{color:var(--accent);}
}

/* OŚ CZASU (jak pracujemy) */
.os-czasu{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); counter-reset:krok;}
.os-czasu li{position:relative; display:flex; flex-direction:column; padding:28px 24px 30px; background:var(--bg-2); counter-increment:krok;}
section:not(.ciemniej) .os-czasu li{background:var(--bg);}
.os-czasu .dioda{margin-bottom:40px;}
.os-czasu .dioda-obwodka{box-shadow:0 0 0 3px var(--bg-2), 0 0 0 4px var(--uwaga);}
.os-czasu li::after{content:"0" counter(krok); position:absolute; top:24px; right:24px; font:400 13px var(--mono); color:var(--ink-3);}
.os-czasu h3{font-size:22px;}
.os-czasu p{margin:0; color:var(--ink-2); font-size:15.5px; line-height:1.6;}
.os-czasu-5{grid-template-columns:repeat(5,minmax(0,1fr));}
@media (max-width:1100px){ .os-czasu-5{grid-template-columns:repeat(2,minmax(0,1fr));} .os-czasu-5 li:last-child{grid-column:1 / -1;} }
@media (max-width:900px){ .os-czasu{grid-template-columns:repeat(2,minmax(0,1fr));} .os-czasu .dioda{margin-bottom:28px;} }
@media (max-width:560px){ .os-czasu,.os-czasu-5{grid-template-columns:minmax(0,1fr);} .os-czasu li{padding:24px 18px;} }

/* BRANŻE: siatka komórek */
section.jasna{background:var(--bg);}
.branze{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
.branze li{position:relative; background:var(--bg); padding:32px 28px; min-height:196px; transition:background-color .2s ease;}
.branze li:hover{background:#121212;}
.branze .ikona{color:var(--ink-3); margin-bottom:28px;}
.branze h3{font-size:21px;}
.branze p{margin:0; font-size:15.5px; line-height:1.55; color:var(--ink-2);}
.branze-cta{margin:28px 0 0;}
@media (max-width:1000px){ .branze{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:600px){ .branze{grid-template-columns:minmax(0,1fr);} .branze li{min-height:0; padding:24px 18px;} }

/* DWIE KOLUMNY */
.dwie-rowne{display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:80px; align-items:start;}
.dwie-rowne p{color:var(--ink-2); font-size:17px;}
@media (max-width:1000px){ .dwie-rowne{grid-template-columns:minmax(0,1fr); gap:24px;} }
.dwie{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:64px; align-items:start;}
.dwie p{color:var(--lead);}
@media (max-width:900px){ .dwie{grid-template-columns:minmax(0,1fr); gap:40px;} }
.brama{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));}
.brama > .boks + .boks{border-left:0;}
@media (max-width:760px){ .brama{grid-template-columns:minmax(0,1fr);} .brama > .boks + .boks{border-left:1px solid var(--line); border-top:0;} }
.lista-ptaszki{border-top:1px solid var(--line);}
.lista-ptaszki li{position:relative; padding:14px 0 14px 32px; border-bottom:1px solid var(--line); color:var(--lead);}
.lista-ptaszki li strong{font-weight:500; color:var(--ink);}
.lista-ptaszki li::before{content:""; position:absolute; left:3px; top:22px; width:11px; height:6px; border-left:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent); transform:rotate(-45deg);}
.dodatek{margin-top:56px;}

/* BOKSY I KARTY */
.boks{border:1px solid var(--line); padding:28px; background:var(--bg);}
section.ciemniej .boks,section.ciemniej .karta{background:var(--bg-2);}
.boks p{color:var(--lead);}
.boks a:not(.btn):not(.tel),.dwie-rowne a,.porownanie-opis a,.dokument a,.faq .odp a{text-decoration-color:var(--line-3);}
.boks a:not(.btn):not(.tel):hover,.dwie-rowne a:hover,.porownanie-opis a:hover,.dokument a:hover,.faq .odp a:hover{text-decoration-color:currentColor;}
.boks-z-glowa{padding:0;}
.boks-z-glowa > .filar-glowa{padding:14px 20px 0; min-height:40px;}
.boks-z-glowa > .filar-glowa .dioda{width:7px; height:7px;}
.boks-tresc{padding:22px 24px 26px;}
.brama .boks-tresc > h2{font-size:clamp(26px,2.6vw,34px);}
.boks-kontakt{position:sticky; top:calc(var(--header-h) + 24px); border-color:var(--line-2);}
.boks-kontakt::before{content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:2px; background:var(--accent);}
@media (max-width:900px){ .boks-kontakt{position:relative; top:auto;} }
.boks-kontakt .tel{display:block; margin:6px 0 12px; font:400 24px var(--mono); letter-spacing:.02em; color:var(--ink); text-decoration:none; white-space:nowrap;}
.boks-kontakt .tel:hover{color:var(--accent);}
.email-link{overflow-wrap:anywhere;}
.osoba{font-weight:500; color:var(--ink);}
.rola{font:400 13px var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3);}
.karty{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); counter-reset:karta;}
@media (max-width:940px){ .karty{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:600px){ .karty{grid-template-columns:minmax(0,1fr);} }
.karty.karty-2{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:600px){ .karty.karty-2{grid-template-columns:minmax(0,1fr);} }
.karta{position:relative; display:flex; flex-direction:column; background:var(--bg); color:var(--ink); text-decoration:none;}
.karta .boks-tresc{display:flex; flex-direction:column; flex-grow:1; padding:22px 24px 26px;}
.karta p{margin-bottom:0; color:var(--ink-2); font-size:15.5px;}
.karta h3{font-size:21px;}

/* PANEL SYGNAŁÓW (podstrony) */
.panel-sygnaly{margin:8px 0 0;}
.panel-sygnaly .panel-lista li{align-items:flex-start; min-height:0; padding:14px 0;}
.panel-sygnaly .dioda{margin-top:9px;}
.panel-sygnaly .panel-co{font-size:16.5px; line-height:1.5; color:var(--lead);}
@media (max-width:560px){ .panel-sygnaly .panel-lista li{flex-wrap:nowrap;} .panel-sygnaly .panel-co{flex-basis:auto;} }

/* INNE USŁUGI (małe filary) */
.filary.filary-male{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.filary-male .filar h3{font-size:20px;}
.filary-male .filar h3::before{content:none;}
.filary-male .filar-tresc{padding:18px 20px 16px;}
.filary-male .filar ul{margin-top:10px;}
@media (max-width:1000px){ .filary.filary-male{grid-template-columns:minmax(0,1fr);} }

/* FAQ */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{position:relative; cursor:pointer; list-style:none; padding:24px 52px 24px 0; font:400 clamp(18px,1.55vw,21px)/1.35 var(--sans); letter-spacing:-.015em; color:var(--ink); transition:color .15s ease;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:""; position:absolute; right:0; top:50%; width:28px; height:28px; margin-top:-14px; background:linear-gradient(currentColor,currentColor) center/11px 1.5px no-repeat, linear-gradient(currentColor,currentColor) center/1.5px 11px no-repeat; border:1px solid var(--line-2); color:var(--ink-2); transition:transform .2s ease;}
.faq details[open] summary::after{background:linear-gradient(var(--accent),var(--accent)) center/11px 1.5px no-repeat; transform:rotate(180deg);}
.faq summary:hover{color:var(--accent);}
.faq .odp{padding:0 52px 26px 0; color:var(--ink-2); max-width:720px; font-size:16.5px;}
.faq .odp p:last-child{margin-bottom:0;}
@media (max-width:560px){ .faq .odp{padding-right:0;} }

/* LINKI DO INNYCH USŁUG */
.linki-uslug{display:flex; flex-wrap:wrap; gap:6px;}
.linki-uslug a{display:inline-flex; align-items:center; min-height:40px; padding:8px 14px; background:var(--szary-btn); color:var(--ink); text-decoration:none; font:400 14px var(--mono); letter-spacing:.06em; text-transform:uppercase;}
.linki-uslug a:hover{background:var(--szary-btn-hover); color:var(--ink);}

/* CTA (starszy blok podstron) */
.cta{position:relative; display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:space-between; padding:48px; background:var(--bg); border:1px solid var(--line);}
.cta h2{margin-bottom:10px; font-size:clamp(26px,3vw,40px);}
.cta p{margin:0; color:var(--ink-2); max-width:600px;}
@media (max-width:600px){ .cta{padding:30px 20px;} }

/* PODSTRONY: HERO */
.hero-podstrona > .wrap{padding-top:64px; padding-bottom:88px;}
.hero-z-obrazem > .wrap{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:64px; align-items:center;}
.ilustracja{margin:0;}
.ilustracja img{width:100%; height:auto;}
@media (max-width:900px){
  .hero-z-obrazem > .wrap{grid-template-columns:minmax(0,1fr); gap:40px;}
  .hero-z-obrazem .ilustracja{max-width:300px;}
}
@media (max-width:560px){ .hero-podstrona > .wrap{padding-top:40px; padding-bottom:56px;} }

/* KONTAKT: limonkowy blok, jedyna duża plama koloru na stronie */
.kontakt-sekcja{background:var(--bg);}
.kontakt-sekcja > .wrap{position:relative; overflow:hidden; background:var(--limonka) url(img/linie-limonka.svg) right -80px bottom -40px / 760px auto no-repeat; color:var(--limonka-ink); padding-left:56px; padding-right:56px;}
.kontakt-sekcja .wrap > *{position:relative; max-width:860px;}
.kontakt-sekcja h2{color:var(--limonka-ink);}
.kontakt-sekcja .etykieta,.kontakt-sekcja .etykieta-nr{color:var(--limonka-ink-2);}
.kontakt-sekcja .lead,.kontakt-sekcja .kontakt-mail{color:var(--limonka-ink-2);}
.tel-duzy{display:inline-block; margin-top:14px; font:400 clamp(32px,4.4vw,60px)/1.15 var(--mono); letter-spacing:-.01em; color:var(--limonka-ink); text-decoration:none; white-space:nowrap;}
.tel-duzy:hover{color:var(--limonka-ink); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:8px;}
.kontakt-sekcja .btn-glowny{background:var(--limonka-ink); color:#FFFFFF;}
.kontakt-sekcja .btn-glowny:hover{background:#333333; color:#FFFFFF;}
.kontakt-sekcja .btn-obrys{background:transparent; border-color:var(--limonka-ink); color:var(--limonka-ink);}
.kontakt-sekcja .btn-obrys:hover{background:rgba(0,0,0,.08); color:var(--limonka-ink);}
.kontakt-mail{margin:24px 0 0; font-size:15px;}
.kontakt-sekcja a{color:var(--limonka-ink);}
.kontakt-sekcja :focus-visible{outline-color:var(--limonka-ink);}
.kontakt-sekcja ::selection{background:var(--limonka-ink); color:var(--limonka);}
@media (max-width:760px){ .kontakt-sekcja > .wrap{padding-left:24px; padding-right:24px; background-size:520px auto;} }
@media (max-width:560px){ .kontakt-sekcja > .wrap{padding-left:var(--odstep); padding-right:var(--odstep);} .tel-duzy{white-space:normal;} }

/* FORMULARZ */
.formularz{margin-top:20px; max-width:620px;}
.pole{margin-bottom:20px;}
.pole label{display:block; margin-bottom:8px; font:400 14px var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--ink);}
.pole .opcjonalne{text-transform:none; letter-spacing:0; color:var(--ink-2);}
.pole input,.pole textarea{width:100%; font:17px/1.5 var(--sans); color:var(--ink); background:#0A0A0A; border:1px solid var(--pole-ramka); padding:12px 14px; border-radius:0; transition:border-color .15s ease;}
.pole input:hover,.pole textarea:hover{border-color:#8A8A8A;}
.pole textarea{resize:vertical; min-height:160px;}
.pole input:focus,.pole textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}
.pole [aria-invalid="true"]{border-color:var(--pilne); border-width:2px;}
.pole-blad{margin:8px 0 0; color:#FF9A90; font-size:15.5px; font-weight:500;}
.pole-pulapka{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden;}
.cf-turnstile{margin:4px 0 18px; min-height:65px;}
.form-info{font-size:15px; color:var(--ink-2);}
.formularz .btn{min-height:48px; padding:12px 20px;}
.komunikat{padding:18px 20px; margin:16px 0; border:1px solid;}
.komunikat p{margin:0; color:var(--ink);}
.komunikat-ok{background:#0F1F0D; border-color:#3E7A35;}
.komunikat-blad{background:#26110F; border-color:#8A3B33;}

/* DOKUMENT (polityka prywatności) */
.dokument{max-width:780px;}
.dokument h2{font-size:clamp(24px,2.3vw,32px); line-height:1.15; margin-bottom:14px;}
.dokument .etykieta{margin:48px 0 12px;}
.dokument > .etykieta:first-of-type{margin-top:8px;}
.dokument p,.dokument li{color:var(--lead); font-size:17px; line-height:1.65;}
.dokument p strong{font-weight:500; color:var(--ink);}
.dokument ul{list-style:square; padding-left:22px; margin-bottom:16px;}
.dokument li{margin-bottom:8px;}
.dokument li::marker{color:var(--accent);}

/* STOPKA: jaśniejsza niż strona, hasło z kropek, linki mono */
.site-footer{background:var(--stopka); border-top:1px solid var(--line); color:var(--ink-2); font-size:15px;}
.stopka-gora{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:64px; padding-top:80px; padding-bottom:64px;}
.stopka-marka .logo{margin-bottom:0;}
.site-footer .stopka-haslo{margin:56px 0 44px; font:700 clamp(40px,5.2vw,84px)/1 var(--mono); letter-spacing:-.03em; color:transparent; background:radial-gradient(circle, #5C5C5C 1.25px, transparent 1.55px) 0 0 / 5px 5px; -webkit-background-clip:text; background-clip:text; -webkit-user-select:none; user-select:none;}
.stopka-haslo::before{content:"Chronimy\A Twój biznes"; white-space:pre;}
.stopka-kolumny{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px 32px;}
.site-footer h2{margin:0 0 16px; font:400 13px var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);}
.site-footer p{margin-bottom:14px; line-height:1.7;}
.site-footer p + h2{margin-top:28px;}
.site-footer a{color:var(--ink); text-decoration:none; overflow-wrap:anywhere;}
.site-footer a:hover{color:var(--accent);}
.site-footer li a{display:inline-block; padding:5px 0; font:400 14px/1.4 var(--mono); letter-spacing:.07em; text-transform:uppercase;}
.stopka-osoba{margin-bottom:6px !important; font-size:17px; color:var(--ink);}
.stopka-tel{font:400 15px var(--mono); letter-spacing:.02em;}
.stopka-el{margin-top:32px;}
.stopka-el h2{color:var(--uwaga);}
.stopka-it h2{color:var(--accent);}
.footer-dol{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; padding-top:22px; padding-bottom:36px; border-top:1px solid var(--line); font:400 13px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);}
.footer-dol ul{display:flex; flex-wrap:wrap; gap:4px 24px;}
.footer-dol a{display:inline-block; padding:4px 0; color:var(--ink-2) !important;}
.footer-dol a:hover{color:var(--ink) !important;}
@media (max-width:1100px){ .stopka-gora{grid-template-columns:minmax(0,1fr); gap:48px;} .site-footer .stopka-haslo{margin:40px 0 32px;} }
@media (max-width:760px){ .stopka-kolumny{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:480px){ .stopka-kolumny{grid-template-columns:minmax(0,1fr);} .stopka-gora{padding-top:56px;} .site-footer .stopka-haslo{font-size:38px; background-image:radial-gradient(circle, #6A6A6A .9px, transparent 1.1px); background-size:3px 3px;} }

/* WYŁĄCZONE ANIMACJE NA ŻYCZENIE UŻYTKOWNIKA */
/* OŻYWIENIE (29.09.2026): akcenty z branży: dziennik systemowy, diody, skaner, przełącznik sieciowy, prąd przemienny.
   Stan początkowy tylko z klasą .js-anim (bez JS widać stan końcowy). Każda animacja kończy się w 5 s (WCAG 2.2.2).
   Napisy ozdobne w CSS z pustym tekstem alternatywnym (content: "X" / ""), więc czytniki ekranu i wyszukiwarki ich nie czytają. */
.dioda-pilne{color:var(--pilne);}
.dioda-uwaga{color:var(--uwaga);}
.dioda-ok{color:var(--accent);}

/* 1. Proces: linia sygnału od czerwieni do zieleni, diody zapalają się, gdy sygnał dociera, znaczniki jak w dzienniku */
.os-czasu{--n:4; --czas:2.4s;}
.os-czasu-5{--n:5;}
.os-czasu li:nth-child(1){--i:0;} .os-czasu li:nth-child(2){--i:1;} .os-czasu li:nth-child(3){--i:2;} .os-czasu li:nth-child(4){--i:3;} .os-czasu li:nth-child(5){--i:4;}
.os-czasu li{transition:background-color .2s ease;}
.os-czasu li:hover{background:#151515;}
.os-czasu .dioda{position:relative; z-index:3;}
.os-czasu .dioda::after{position:absolute; left:13px; top:50%; transform:translateY(-50%); font:500 10.5px/1 var(--mono); letter-spacing:.1em; white-space:nowrap;}
.os-czasu .dioda-pilne::after{content:"BŁĄD"; content:"BŁĄD" / "";}   /* 01.10: po polsku (audyt UX, heurystyka 8) */
.os-czasu .dioda-uwaga::after{content:"UWAGA"; content:"UWAGA" / "";}
.os-czasu .dioda-ok::after{content:"OK"; content:"OK" / "";}
@media (min-width:1101px){
  .os-czasu::before,.os-czasu::after{content:""; position:absolute; z-index:2; left:24px; right:24px; top:32px; height:1px; pointer-events:none;}
  .os-czasu::before{background:rgba(255,255,255,.14);}
  .os-czasu::after{background:linear-gradient(90deg, var(--pilne), var(--uwaga) 45%, var(--accent)); transform-origin:left center;}
  .os-czasu .dioda{box-shadow:0 0 0 5px var(--bg-2);}
  section:not(.ciemniej) .os-czasu .dioda{box-shadow:0 0 0 5px var(--bg);}
  .os-czasu .dioda-obwodka{box-shadow:0 0 0 3px var(--bg-2), 0 0 0 4px var(--uwaga), 0 0 0 6px var(--bg-2);}
  .os-czasu .dioda-swieci{box-shadow:0 0 0 5px var(--bg-2), 0 0 12px 2px var(--accent);}
  .os-czasu .dioda::after{padding:2px 6px; background:var(--bg-2);}
  section:not(.ciemniej) .os-czasu .dioda::after{background:var(--bg);}
  /* numer kroku przykrywa linię sygnału */
  .os-czasu li::after{z-index:3; top:26px; padding-left:8px; line-height:12px; background:var(--bg-2);}
  section:not(.ciemniej) .os-czasu li::after{background:var(--bg);}
  .os-czasu li:hover::after{background:#151515;}
}
.js-anim .os-czasu:not(.ozyj)::after{transform:scaleX(0);}
/* telefon (jedna kolumna, 30.09): linia sygnału pionowo przez diody, tekst odsunięty od linii */
@media (max-width:560px){
  .os-czasu::before,.os-czasu::after{content:""; position:absolute; z-index:2; left:21.5px; top:28px; bottom:28px; width:1px; pointer-events:none;}
  .os-czasu::before{background:rgba(255,255,255,.14);}
  .os-czasu::after{background:linear-gradient(180deg, var(--pilne), var(--uwaga) 45%, var(--accent)); transform-origin:center top;}
  .os-czasu .dioda{box-shadow:0 0 0 5px var(--bg-2);}
  section:not(.ciemniej) .os-czasu .dioda{box-shadow:0 0 0 5px var(--bg);}
  .os-czasu .dioda-obwodka{box-shadow:0 0 0 3px var(--bg-2), 0 0 0 4px var(--uwaga), 0 0 0 6px var(--bg-2);}
  .os-czasu .dioda::after{padding:2px 6px; background:var(--bg-2);}
  section:not(.ciemniej) .os-czasu .dioda::after{background:var(--bg);}
  .os-czasu h3,.os-czasu p{margin-left:28px;}
  .js-anim .os-czasu:not(.ozyj)::after{transform:scaleY(0);}
  .os-czasu.ozyj::after{animation-name:sygnal-pion;}
}
@keyframes sygnal-pion{from{transform:scaleY(0);} to{transform:scaleY(1);}}
.js-anim .os-czasu:not(.ozyj) .dioda{background:#3A3A3A;}
.js-anim .os-czasu:not(.ozyj) .dioda::after{opacity:0;}
.os-czasu.ozyj::after{animation:sygnal var(--czas) cubic-bezier(.45,0,.25,1) both;}
.os-czasu.ozyj .dioda{animation:zapal .8s calc(var(--i) * var(--czas) / var(--n)) both;}
.os-czasu.ozyj .dioda::after{animation:pojaw .4s calc(var(--i) * var(--czas) / var(--n) + .15s) both;}
.os-czasu.ozyj .dioda-ok{animation:zapal .8s calc(var(--i) * var(--czas) / var(--n)) both, puls 1.2s calc(var(--i) * var(--czas) / var(--n) + .8s) 2;}
@keyframes sygnal{from{transform:scaleX(0);} to{transform:scaleX(1);}}
@keyframes zapal{from{background:#3A3A3A;} 45%{background:currentColor; outline:8px solid color-mix(in srgb, currentColor 28%, transparent); outline-offset:0;}}
@keyframes pojaw{from{opacity:0; transform:translate(-4px,-50%);}}
@keyframes puls{50%{outline:10px solid color-mix(in srgb, var(--accent) 22%, transparent);}}

/* 2. Hero: pasek skanowania raz przechodzi przez panel „Stan IT”, diody mrugają po kolei (tylko przesunięcia, bez zmiany przezroczystości tekstu).
   Od 30.09 rusza z klasą .ozyj (app.js: po wjechaniu na ekran plus OPOZNIENIE), bez JS nic nie gra i panel jest w stanie końcowym. */
.panel-lista{position:relative; overflow:hidden;}
.panel-lista::after{content:""; position:absolute; left:0; right:0; top:0; height:100%; pointer-events:none; background:linear-gradient(to bottom, transparent 0, transparent 38%, rgba(133,237,117,.13) 49%, rgba(133,237,117,.35) 50%, transparent 51%); transform:translateY(-100%);}
.panel-stanu.ozyj .panel-lista::after{animation:skan 2.6s .5s linear both;}
@keyframes skan{to{transform:translateY(100%);}}
.panel-stanu.ozyj .panel-lista li:nth-child(1) .dioda{animation:mrug .45s 1.2s both;}
.panel-stanu.ozyj .panel-lista li:nth-child(2) .dioda{animation:mrug .45s 1.42s both;}
.panel-stanu.ozyj .panel-lista li:nth-child(3) .dioda{animation:mrug .45s 1.64s both;}
.panel-stanu.ozyj .panel-lista li:nth-child(4) .dioda{animation:mrug .45s 1.86s both;}
.panel-stanu.ozyj .panel-lista li:nth-child(5) .dioda{animation:mrug .45s 2.08s both;}
.panel-stanu.ozyj .panel-lista li:nth-child(6) .dioda{animation:mrug .45s 2.3s both;}
@keyframes mrug{50%{outline:6px solid color-mix(in srgb, currentColor 30%, transparent);}}

/* 3. Branże: kody jak w dokumentacji z diodą, ikony rysowane kreską, narożniki celownika po najechaniu */
.branze li:nth-child(1){--i:0;} .branze li:nth-child(2){--i:1;} .branze li:nth-child(3){--i:2;} .branze li:nth-child(4){--i:3;} .branze li:nth-child(5){--i:4;} .branze li:nth-child(6){--i:5;}
.branze li::after{position:absolute; top:22px; right:22px; padding-left:14px; font:400 12.5px/1 var(--mono); letter-spacing:.12em; color:var(--ink-3); background:linear-gradient(var(--accent),var(--accent)) left center / 6px 6px no-repeat;}
.branze li:nth-child(1)::after{content:"MED"; content:"MED" / "";}
.branze li:nth-child(2)::after{content:"FIN"; content:"FIN" / "";}
.branze li:nth-child(3)::after{content:"LEX"; content:"LEX" / "";}
.branze li:nth-child(4)::after{content:"IND"; content:"IND" / "";}
.branze li:nth-child(5)::after{content:"LOG"; content:"LOG" / "";}
.branze li:nth-child(6)::after{content:"WAN"; content:"WAN" / "";}
.branze li::before{content:""; position:absolute; inset:10px; pointer-events:none; opacity:0; transition:opacity .2s ease, inset .2s ease;
  background:linear-gradient(var(--accent),var(--accent)) left top / 14px 1px no-repeat, linear-gradient(var(--accent),var(--accent)) left top / 1px 14px no-repeat,
             linear-gradient(var(--accent),var(--accent)) right bottom / 14px 1px no-repeat, linear-gradient(var(--accent),var(--accent)) right bottom / 1px 14px no-repeat;}
.branze li:hover::before{opacity:1; inset:6px;}
.branze li:hover .ikona{color:var(--accent);}
.branze .ikona{transition:color .2s ease;}
.js-anim .branze:not(.ozyj) .ikona *{stroke-dasharray:1; stroke-dashoffset:1;}
.js-anim .branze:not(.ozyj) li::after{background-image:linear-gradient(#3A3A3A,#3A3A3A);}
.branze.ozyj .ikona *{stroke-dasharray:1; animation:rysuj 1.1s calc(var(--i) * .14s) cubic-bezier(.5,0,.3,1) both;}
.branze.ozyj li::after{animation:dioda-kod .5s calc(var(--i) * .14s + .9s) both;}
@keyframes rysuj{from{stroke-dashoffset:1;} to{stroke-dashoffset:0;}}
@keyframes dioda-kod{from{background-image:linear-gradient(#3A3A3A,#3A3A3A);} 40%{background-image:linear-gradient(#FFFFFF,#FFFFFF);}}

/* 4. Pas elektryki: sinusoida prądu przemiennego, przepływ 4 razy */
.pas-el-fala{flex:none; stroke:var(--uwaga); stroke-width:1.4; stroke-linecap:round;}
.pas-el-fala path{stroke-dasharray:5 3;}
.pas-el.ozyj .pas-el-fala path{animation:prad 1s linear 4;}
@keyframes prad{to{stroke-dashoffset:-16;}}
@media (max-width:560px){ .pas-el .wrap{position:relative;} .pas-el-fala{position:absolute; right:var(--odstep); bottom:34px;} }

/* 5. Stopka: listwa przełącznika sieciowego, diody portów migają jak przy ruchu w sieci */
.switch{display:flex; align-items:center; gap:18px; padding-top:28px; padding-bottom:28px; border-bottom:1px solid var(--line);}
.switch::before{content:"SW-01 · 24 × 1 GbE"; content:"SW-01 · 24 × 1 GbE" / ""; flex:none; font:400 12.5px var(--mono); letter-spacing:.1em; color:var(--ink-3);}
.switch-porty{display:grid; grid-template-columns:repeat(12, 18px); grid-auto-rows:13px; gap:6px 4px;}
.switch-porty i{position:relative; border:1px solid var(--line-3); background:#0A0A0A;}
.switch-porty i::before{content:""; position:absolute; left:3px; right:3px; bottom:2px; height:4px; border:1px solid rgba(255,255,255,.12); border-top:0;}
.switch-porty i::after{content:""; position:absolute; top:2px; right:2px; width:3px; height:2px; background:#3A3A3A;}
.switch-porty i:nth-child(3n+1)::after,.switch-porty i:nth-child(5n+2)::after{background:var(--accent);}
.switch-porty i:nth-child(7n)::after{background:var(--uwaga);}
.switch.ozyj .switch-porty i:nth-child(3n+1)::after{animation:ruch .16s steps(1) .2s 14;}
.switch.ozyj .switch-porty i:nth-child(5n+2)::after{animation:ruch .22s steps(1) .5s 10;}
.switch.ozyj .switch-porty i:nth-child(4n+3)::after{animation:ruch .3s steps(1) .1s 8;}
@keyframes ruch{50%{background:#1E1E1E;}}
.stopka-gora{padding-top:56px;}
@media (min-width:1101px){ .switch-porty{grid-template-columns:repeat(24, 24px); grid-auto-rows:17px; gap:0 5px;} .switch-porty i::before{left:4px; right:4px; bottom:3px; height:6px;} .switch-porty i::after{width:4px; height:3px; top:3px; right:3px;} .switch{gap:24px;} }
@media (max-width:560px){ .switch{flex-wrap:wrap; gap:12px;} .switch::before{flex-basis:100%;} }
@media (max-width:360px){ .switch-porty{grid-template-columns:repeat(12, 16px); gap:5px 3px;} }

/* 6. Schemat sieci: ruch pakietów i odparty atak (29.09.2026, noc). Rusza z klasą .plynie (app.js, po wejściu na ekran),
   całość kończy się po 4,8 s (przepływ na liniach 4 x 1,2 s, ostatni błysk węzła 4,65 s). Zielone pakiety chowają się pod urządzeniami (węzły są rysowane później), czerwone zatrzymuje
   zapora: router błyska, nad nim zostaje znacznik DROP narysowany liniami. Stan końcowy (też bez JS i przy „ogranicz ruch”):
   pakiety niewidoczne, znacznik widoczny. */
.pakiet{opacity:0; fill:var(--accent); pointer-events:none;}
.pakiet-zly{fill:var(--pilne);}
.pakiet-fala{opacity:0; fill:none; stroke:var(--pilne); stroke-width:1.5; vector-effect:non-scaling-stroke; pointer-events:none;}
.pakiet-1{--y:220px;} .pakiet-2{--y:60px;} .pakiet-3{--y:380px;} .pakiet-4{--y:140px;} .pakiet-5{--y:300px;}
.schemat.plynie .pakiet-1{animation:pakiet-prosty 1.5s linear 0s both;}
.schemat.plynie .pakiet-2{animation:pakiet-daleki 1.9s linear .6s both;}
.schemat.plynie .pakiet-3{animation:pakiet-daleki 1.9s linear 1.2s both;}
.schemat.plynie .pakiet-4{animation:pakiet-bliski 1.7s linear 1.8s both;}
.schemat.plynie .pakiet-5{animation:pakiet-bliski 1.7s linear 2.4s both;}
.schemat.plynie .pakiet-zly-1{animation:pakiet-odrzucony .8s cubic-bezier(.3,0,.6,1) .9s both;}
.schemat.plynie .pakiet-zly-2{animation:pakiet-odrzucony .8s cubic-bezier(.3,0,.6,1) 2.9s both;}
.schemat.plynie .pakiet-fala-1{animation:pakiet-fala .6s ease-out 1.34s both;}
.schemat.plynie .pakiet-fala-2{animation:pakiet-fala .6s ease-out 3.34s both;}
.schemat.plynie .schemat-zapora rect{animation:zapora .9s 1.3s, zapora .9s 3.3s;}
.js-anim .schemat:not(.plynie) .schemat-drop-w{opacity:0;}
/* węzeł błyska, gdy dotrze do niego pakiet (kolejność <a>: router, przełącznik, serwer, kopie, kamery, kontrola, stanowiska) */
.schemat.plynie .schemat-wezel:nth-of-type(5) rect{animation:odbior .6s 1.45s;}
.schemat.plynie .schemat-wezel:nth-of-type(3) rect{animation:odbior .6s 2.45s;}
.schemat.plynie .schemat-wezel:nth-of-type(7) rect{animation:odbior .6s 3.05s;}
.schemat.plynie .schemat-wezel:nth-of-type(4) rect{animation:odbior .6s 3.45s;}
.schemat.plynie .schemat-wezel:nth-of-type(6) rect{animation:odbior .6s 4.05s;}
@keyframes odbior{30%{stroke:#85ED75; fill:#161B15;}}
.schemat.plynie .schemat-drop-w{animation:drop-pojaw .4s 1.34s both, drop-mrug .5s 3.34s;}
@keyframes pakiet-prosty{0%{transform:translate(170px,220px); opacity:0;} 4%,96%{opacity:1;} 89.3%{transform:translate(706px,220px);} 100%{transform:translate(770px,220px); opacity:0;}}
@keyframes pakiet-daleki{0%{transform:translate(170px,220px); opacity:0;} 4%,97%{opacity:1;} 70.5%{transform:translate(706px,220px);} 91.6%{transform:translate(706px,var(--y));} 100%{transform:translate(770px,var(--y)); opacity:0;}}
@keyframes pakiet-bliski{0%{transform:translate(170px,220px); opacity:0;} 4%,97%{opacity:1;} 78.8%{transform:translate(706px,220px);} 90.6%{transform:translate(706px,var(--y));} 100%{transform:translate(770px,var(--y)); opacity:0;}}
@keyframes pakiet-odrzucony{0%{transform:translate(170px,220px) scale(1); opacity:0;} 12%,55%{opacity:1;} 55%{transform:translate(226px,220px) scale(1);} 100%{transform:translate(226px,220px) scale(2.6); opacity:0;}}
@keyframes pakiet-fala{0%{transform:translate(232px,220px) scale(.4); opacity:0;} 8%{opacity:.9;} 100%{transform:translate(232px,220px) scale(3.4); opacity:0;}}
/* Pionowy schemat (telefon): te same czasy, inne trasy. Pakiet startuje w boksie INTERNET (150,60), jedzie w dół przez router
   i przełącznik (chowa się pod boksami), w przełączniku skręca do pionowej magistrali x=40 i wjeżdża w swój boks od lewej.
   Czerwony zatrzymuje się tuż przed routerem (150,100), tam też fala i znacznik DROP. */
.schemat-pion.plynie .pakiet-1{animation-name:pion-1;}
.schemat-pion.plynie .pakiet-2{animation-name:pion-2;}
.schemat-pion.plynie .pakiet-3{animation-name:pion-3;}
.schemat-pion.plynie .pakiet-4{animation-name:pion-4;}
.schemat-pion.plynie .pakiet-5{animation-name:pion-5;}
.schemat-pion.plynie .pakiet-zly{animation-name:pion-odrzucony;}
.schemat-pion.plynie .pakiet-fala{animation-name:pion-fala;}
@keyframes pion-1{0%{transform:translate(150px,60px); opacity:0;} 4%,99%{opacity:1;} 30.3%{transform:translate(150px,222px);} 50.9%{transform:translate(40px,222px);} 94%{transform:translate(40px,452px);} 100%{transform:translate(72px,452px); opacity:0;}}
@keyframes pion-2{0%{transform:translate(150px,60px); opacity:0;} 4%,99%{opacity:1;} 41.5%{transform:translate(150px,222px);} 69.7%{transform:translate(40px,222px);} 91.8%{transform:translate(40px,308px);} 100%{transform:translate(72px,308px); opacity:0;}}
@keyframes pion-3{0%{transform:translate(150px,60px); opacity:0;} 4%,99%{opacity:1;} 23.9%{transform:translate(150px,222px);} 40.1%{transform:translate(40px,222px);} 95.3%{transform:translate(40px,596px);} 100%{transform:translate(72px,596px); opacity:0;}}
@keyframes pion-4{0%{transform:translate(150px,60px); opacity:0;} 4%,99%{opacity:1;} 35.1%{transform:translate(150px,222px);} 58.9%{transform:translate(40px,222px);} 93.1%{transform:translate(40px,380px);} 100%{transform:translate(72px,380px); opacity:0;}}
@keyframes pion-5{0%{transform:translate(150px,60px); opacity:0;} 4%,99%{opacity:1;} 26.7%{transform:translate(150px,222px);} 44.9%{transform:translate(40px,222px);} 94.7%{transform:translate(40px,524px);} 100%{transform:translate(72px,524px); opacity:0;}}
@keyframes pion-odrzucony{0%{transform:translate(150px,60px) scale(1); opacity:0;} 12%,55%{opacity:1;} 55%{transform:translate(150px,100px) scale(1);} 100%{transform:translate(150px,100px) scale(2.6); opacity:0;}}
@keyframes pion-fala{0%{transform:translate(150px,100px) scale(.4); opacity:0;} 8%{opacity:.9;} 100%{transform:translate(150px,100px) scale(3.4); opacity:0;}}
@keyframes zapora{0%,100%{stroke:#85ED75; fill:#131313;} 15%,50%{stroke:#FF6E61; fill:#221311;}}
@keyframes drop-pojaw{from{opacity:0; transform:translateY(6px);}}
@keyframes drop-mrug{50%{opacity:.3;}}

/* 7. Karty filarów: każdy rysunek to jedna scena z WSZYSTKIMI usługami karty, ożywa po najechaniu, fokusie
   albo (na ekranach dotykowych, klasa .ozyj z app.js) raz po wjechaniu na ekran. Wersja 3 z 29.09.2026, generator
   materialy/rysunki-uslug/rysunki.py. Każda scena kończy się przed 3,1 s, bez pętli (WCAG 2.2.2).
   SEC: granica terenu się rysuje, pierścień audytu jedzie w górę budynku i zamienia punkty z bursztynu na zieleń,
        kamera omiata teren, czytnik przy drzwiach błyska.
   OPS: pakiety biegną kablami, diody szafy mrugają, dysk kopii zapełnia się segmentami, na monitorze pojawia się ptaszek.
   REG: dwanaście gwiazd zapala się po kolei, wymagania na liście odhaczają się, kłódka na bazie danych się zatrzaskuje. */
.rys-pk,.rys-kamera,.rys-gw,.rys-led{transform-box:fill-box; transform-origin:50% 50%;}
.rys-kamera{transform-origin:0% 45%;}
.rys-skan{opacity:0;}
.rys-obwod{stroke-dasharray:100;}
.rys-ptak{stroke-dasharray:1;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-obwod{animation:rys-rysuj .9s cubic-bezier(.5,0,.3,1) both;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-skan{animation:rys-skan 1.5s .2s linear both;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-pk{animation:rys-pk .4s ease-out both;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-pk-2{animation-delay:.79s;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-pk-1{animation-delay:1.14s;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-pk-3{animation-delay:1.31s;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-stozek{animation:rys-stozek 1.6s 1.3s ease-in-out both;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-kamera{animation:rys-omiata 1.6s 1.3s ease-in-out both;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-czytnik{animation:rys-czytnik .8s 2.2s steps(1) both;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-pakiet{animation:rys-pakiet .8s linear 3 both;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-pakiet-2{animation-delay:.3s; animation-iteration-count:2;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-pakiet-3{animation-delay:.45s;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-pakiet-4{animation-delay:.6s;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-led{animation:rys-mrug .36s steps(1) 4;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-led-1{animation-delay:.08s;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-led-2{animation-delay:.16s;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-led-3{animation-delay:.24s;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-led-4{animation-delay:.32s;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-kopia{animation:rys-zapal .25s .6s both;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-kopia-1{animation-delay:.95s;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-kopia-2{animation-delay:1.3s;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-kopia-3{animation-delay:1.65s;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-ekran .rys-ptak{animation:rys-ptak .45s 2.3s ease-out both;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-gw{animation:rys-gw .5s both;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-gw-1{animation-delay:.09s;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-gw-2{animation-delay:.18s;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-gw-3{animation-delay:.27s;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-gw-4{animation-delay:.36s;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-gw-5{animation-delay:.45s;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-gw-6{animation-delay:.54s;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-gw-7{animation-delay:.63s;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-gw-8{animation-delay:.72s;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-gw-9{animation-delay:.81s;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-gw-10{animation-delay:.9s;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-gw-11{animation-delay:.99s;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-ptak-0{animation:rys-ptak .3s 1.1s ease-out both;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-ptak-1{animation:rys-ptak .3s 1.35s ease-out both;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-ptak-2{animation:rys-ptak .3s 1.6s ease-out both;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-ptak-3{animation:rys-ptak .3s 1.85s ease-out both;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-kablak{animation:rys-kablak .5s 2.15s cubic-bezier(.5,0,.6,1.4) both;}
:is(.filar:hover,.filar:focus-within,.filar.ozyj) .rys-zamek path{animation:rys-zamek .3s 2.5s both;}
@keyframes rys-rysuj{from{stroke-dashoffset:100;} to{stroke-dashoffset:0;}}
@keyframes rys-ptak{from{stroke-dashoffset:1;} to{stroke-dashoffset:0;}}
@keyframes rys-skan{0%{transform:translateY(0); opacity:0;} 10%{opacity:1;} 85%{transform:translateY(-102.4px); opacity:1;} 100%{transform:translateY(-102.4px); opacity:0;}}
@keyframes rys-pk{0%{color:var(--uwaga); transform:scale(1);} 40%{transform:scale(1.6);} 100%{color:var(--accent); transform:scale(1);}}
@keyframes rys-stozek{0%{opacity:.25;} 30%{opacity:1;} 55%{opacity:.45;} 100%{opacity:1;}}
@keyframes rys-omiata{30%{transform:rotate(-7deg);} 70%{transform:rotate(5deg);}}
@keyframes rys-czytnik{0%,50%{opacity:.15;} 25%,75%{opacity:1;}}
@keyframes rys-pakiet{from{stroke-dashoffset:14;} to{stroke-dashoffset:-100;}}
@keyframes rys-mrug{50%{opacity:.15;}}
@keyframes rys-zapal{from{opacity:.12;} to{opacity:1;}}
@keyframes rys-gw{0%{opacity:.15; transform:scale(.6);} 60%{opacity:1; transform:scale(1.5);} 100%{opacity:1; transform:scale(1);}}
@keyframes rys-kablak{from{transform:translateY(-9px);} to{transform:translateY(0);}}
@keyframes rys-zamek{from{fill:var(--uwaga);} to{fill:var(--accent);}}

/* 8. Pas faktów: mapka lubuskiego w pierwszej komórce, trzy miasta pulsują 3 razy po wejściu na ekran (29.09.2026, noc) */
.pas-faktow .wrap > .pas-z-mapa{padding-right:108px;}
.pas-mapa{position:absolute; right:20px; bottom:14px; width:auto; height:92px; pointer-events:none;}
.pas-mapa path{fill:rgba(255,255,255,.03); stroke:var(--line-3); stroke-width:1; stroke-linejoin:round; vector-effect:non-scaling-stroke;}
.pas-mapa-punkt{fill:var(--accent);}
.pas-mapa-puls{fill:none; stroke:var(--accent); stroke-width:1; opacity:0; transform-box:fill-box; transform-origin:50% 50%;}
.pas-faktow.ozyj .pas-mapa-puls{animation:mapa-puls 1.4s ease-out 3;}
.pas-faktow.ozyj .pas-mapa-gorzow{animation-delay:.3s;}
.pas-faktow.ozyj .pas-mapa-swiebodzin{animation-delay:.6s;}
@keyframes mapa-puls{0%{transform:scale(1); opacity:.9;} 100%{transform:scale(4.5); opacity:0;}}
/* 30.09: na telefonie (jedna kolumna) mapka dalej od prawej krawędzi (user: „zbyt przy prawej krawędzi”) */
@media (max-width:560px){ .pas-faktow .wrap > .pas-z-mapa{padding-right:116px;} .pas-mapa{right:32px;} }
@media (max-width:360px){ .pas-faktow .wrap > .pas-z-mapa{padding-right:92px;} .pas-mapa{height:72px; right:28px;} }

/* 9. Strona 404 jak terminal (29.09.2026, noc): linie piszą się po kolei, kursor miga do 4,9 s.
   Pisanie przez clip-path (bez przezroczystości tekstu); przy „ogranicz ruch” od razu cały zapis. */
.terminal{margin:0; align-self:center; background:#0A0A0A; border:1px solid var(--line-2);}
.terminal-tresc{padding:16px 18px 18px; font:400 14px/1.75 var(--mono); color:var(--ink-2);}
.t-linia{margin:0; white-space:pre-wrap; overflow-wrap:anywhere; text-wrap:wrap;}
.t-znak{color:var(--accent);}
.t-blad{color:var(--pilne);}
.t-cisza{color:var(--ink-3);}
.t-kursor{display:inline-block; width:8px; height:15px; vertical-align:-3px; background:var(--accent);}
.t-linia:nth-child(1){--t:.2s;} .t-linia:nth-child(2){--t:.65s;} .t-linia:nth-child(3){--t:1.05s;} .t-linia:nth-child(4){--t:1.5s;} .t-linia:nth-child(5){--t:1.8s;}
.t-linia:nth-child(6){--t:2.1s;} .t-linia:nth-child(7){--t:2.5s;} .t-linia:nth-child(8){--t:3s;} .t-linia:nth-child(9){--t:3.4s;}
.terminal.ozyj .t-linia{animation:pisz .38s steps(20) var(--t) both;}   /* od 30.09 start z .ozyj (app.js, z opóźnieniem); bez JS cały zapis od razu */
.terminal.ozyj .t-kursor{animation:kursor .7s steps(1) 3.5s 2;}
@keyframes pisz{from{clip-path:inset(0 100% 0 0);} to{clip-path:inset(0 0 0 0);}}
@keyframes kursor{50%{background:transparent;}}
.hero-z-obrazem .terminal{max-width:none;}
@media (min-width:901px){ .hero-z-obrazem > .wrap:has(.terminal){grid-template-columns:minmax(0,1fr) 440px;} }

/* 10. Tabela porównania (29.09.2026, noc): ptaszki w kolumnie IT-ELECTRIC rysują się po kolei po wejściu na ekran,
   wiersz pod kursorem podświetlony jak w konsoli, ze znakiem zachęty w CSS (pusty tekst dla czytników).
   Od 30.09 ptaszki także na telefonie (w kartach po prawej). */
.tabela-porownanie tbody th{position:relative; transition:color .15s ease;}
.tabela-porownanie tbody tr > *{transition:background-color .15s ease;}
.tabela-porownanie tbody tr:hover > *{background-color:rgba(133,237,117,.05);}
.tabela-porownanie tbody tr:hover th{color:var(--accent);}
.tabela-porownanie tbody tr:hover th::before{content:">"; content:">" / ""; position:absolute; left:7px; font:400 13px var(--mono); color:var(--accent);}
.tabela-porownanie tbody td.kol-my{position:relative;}
.tabela-porownanie tbody td.kol-my::after{content:""; position:absolute; top:50%; width:12px; height:6px; margin-top:-5px; border-left:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent); transform:rotate(-45deg);}
.tabela-porownanie tbody tr:nth-child(1){--i:0;} .tabela-porownanie tbody tr:nth-child(2){--i:1;} .tabela-porownanie tbody tr:nth-child(3){--i:2;}
.tabela-porownanie tbody tr:nth-child(4){--i:3;} .tabela-porownanie tbody tr:nth-child(5){--i:4;} .tabela-porownanie tbody tr:nth-child(6){--i:5;}
.js-anim .tabela-porownanie:not(.ozyj) td.kol-my::after{clip-path:inset(0 100% 0 0);}
.tabela-porownanie.ozyj td.kol-my::after{animation:ptaszek .35s calc(var(--i) * .18s + .2s) ease-out both;}
/* komputer: ptaszek przed tekstem; telefon (tabela jako karty z podpisem „IT-ELECTRIC:”): ptaszek po prawej */
@media (min-width:641px){ .tabela-porownanie tbody td.kol-my{padding-left:46px;} .tabela-porownanie tbody td.kol-my::after{left:21px;} }
@media (max-width:640px){ .tabela-porownanie tbody td.kol-my{padding-right:48px;} .tabela-porownanie tbody td.kol-my::after{right:22px; margin-top:-7px;} }
@keyframes ptaszek{from{clip-path:inset(0 100% 0 0);} to{clip-path:inset(0 0 0 0);}}

/* 9. Ożywiony rysunek w nagłówku podstrony audytu (29.09.2026, generator materialy/rysunki-uslug/audyt-zywy.py).
   Lupa objeżdża sprzęt (serwer, laptop, router, dysk kopii), nad każdym zapala bursztynowy znacznik: znalezione.
   Potem znaczniki po kolei zielenieją (poprawione), z tyłu wyrasta tarcza i rysuje się na niej ptaszek. Razem 4,4 s,
   raz po pokazaniu i od nowa po najechaniu, stuknięciu lub Tab (app.js). Przesunięcia lupy wypisuje generator. */
.ilustracja svg{display:block; width:100%; height:auto;}
.rys-a-pin{transform-box:fill-box; transform-origin:50% 100%;}
.rys-a-ptak{stroke-dasharray:1;}
.js-anim .ilustracja-zywa:not(.ozyj) .rys-a-pin,.js-anim .ilustracja-zywa:not(.ozyj) .rys-a-tarcza{opacity:0;}
.ilustracja-zywa.ozyj .rys-a-lupa{animation:rys-a-lupa 3s .3s ease-in-out both;}
.ilustracja-zywa.ozyj .rys-a-pin{animation:rys-a-pin .4s .57s both, rys-a-ok .3s 3.3s both;}
.ilustracja-zywa.ozyj .rys-a-pin-2{animation-delay:1.2s, 3.45s;}
.ilustracja-zywa.ozyj .rys-a-pin-1{animation-delay:1.83s, 3.6s;}
.ilustracja-zywa.ozyj .rys-a-pin-3{animation-delay:2.46s, 3.75s;}
.ilustracja-zywa.ozyj .rys-a-tarcza{animation:rys-a-tarcza .6s 3.4s cubic-bezier(.2,.7,.2,1) both;}
.ilustracja-zywa.ozyj .rys-a-ptak{animation:rys-ptak .4s 3.95s ease-out both;}
@keyframes rys-a-lupa{
  0%,100%{transform:none;}
  9%,21%{transform:translate(2.4px,-70px);}
  30%,42%{transform:translate(81.5px,-45.6px);}
  51%,63%{transform:translate(145px,-35.6px);}
  72%,84%{transform:translate(88.8px,14.3px);}
}
@keyframes rys-a-pin{0%{opacity:0; transform:scale(.3);} 60%{opacity:1; transform:scale(1.25);} 100%{opacity:1; transform:none;}}
@keyframes rys-a-ok{from{color:var(--uwaga);} to{color:var(--accent);}}
@keyframes rys-a-tarcza{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;}}

/* >>> zywe-podstrony: GENEROWANE przez materialy/rysunki-uslug/podstrony-zywe.py, nie edytuj ręcznie */
.js-anim .ilustracja-zywa:not(.ozyj) svg{visibility:hidden;}
.rz-ptak{stroke-dasharray:1 3;}
@keyframes rz-rysuj{from{stroke-dashoffset:1;} to{stroke-dashoffset:0;}}
@keyframes rz-fill-ok{from{fill:var(--uwaga);} to{fill:var(--accent);}}
@keyframes rz-mrug{50%{opacity:.15;}}
@keyframes rz-zapal{from{opacity:.1;} to{opacity:1;}}
@keyframes rz-pokaz{from{opacity:0;} to{opacity:1;}}
/* Obsługa: alarm na monitorze, dymek z pisaniem, pasek naprawy, ptaszek (4 s) */
.rys-o-alarm,.rys-o-pasek{opacity:0;}
.rys-o-dymek{transform-box:fill-box; transform-origin:0% 100%;}
.ilustracja-zywa.ozyj .rys-o-alarm{animation:rys-o-alarm 2.7s both;}
.ilustracja-zywa.ozyj .rys-o-alarm path{animation:rz-mrug .5s steps(1) .2s 3;}
.ilustracja-zywa.ozyj .rys-o-pasek{animation:rys-o-pasek 2.7s both;}
.ilustracja-zywa.ozyj .rys-o-postep{animation:rz-rysuj 1s 1.5s linear both;}
.ilustracja-zywa.ozyj .rys-o-dymek{animation:rys-o-dymek .45s .5s cubic-bezier(.3,1.5,.5,1) both;}
.ilustracja-zywa.ozyj .rys-o-kropka{animation:rys-o-kropka .45s .95s ease-in-out 3 both;}
.ilustracja-zywa.ozyj .rys-o-kropka-1{animation-delay:1.07s;}
.ilustracja-zywa.ozyj .rys-o-kropka-2{animation-delay:1.19s;}
.ilustracja-zywa.ozyj .rys-o-ptak{animation:rz-rysuj .45s 2.8s ease-out both;}
@keyframes rys-o-alarm{0%,88%{opacity:1;} 100%{opacity:0;}}
@keyframes rys-o-pasek{0%,52%{opacity:0;} 56%,88%{opacity:1;} 100%{opacity:0;}}
@keyframes rys-o-dymek{from{opacity:0; transform:scale(.3);} to{opacity:1; transform:none;}}
@keyframes rys-o-kropka{50%{transform:translateY(-5px);}}
/* NIS2: procedury się wypisują, punkty odhaczają, odznaka tarczy spada na dokument (3,4 s) */
.ilustracja-zywa.ozyj .rys-n-linia-0{animation:rz-rysuj .35s 0.10s ease-out both;}
.ilustracja-zywa.ozyj .rys-n-linia-1{animation:rz-rysuj .35s 0.24s ease-out both;}
.ilustracja-zywa.ozyj .rys-n-linia-2{animation:rz-rysuj .35s 0.38s ease-out both;}
.ilustracja-zywa.ozyj .rys-n-linia-3{animation:rz-rysuj .35s 0.52s ease-out both;}
.ilustracja-zywa.ozyj .rys-n-linia-4{animation:rz-rysuj .35s 0.66s ease-out both;}
.ilustracja-zywa.ozyj .rys-n-linia-5{animation:rz-rysuj .35s 0.80s ease-out both;}
.ilustracja-zywa.ozyj .rys-n-ptak-0{animation:rz-rysuj .25s 1.00s ease-out both;}
.ilustracja-zywa.ozyj .rys-n-ptak-1{animation:rz-rysuj .25s 1.25s ease-out both;}
.ilustracja-zywa.ozyj .rys-n-ptak-2{animation:rz-rysuj .25s 1.50s ease-out both;}
.ilustracja-zywa.ozyj .rys-n-ptak-3{animation:rz-rysuj .25s 1.75s ease-out both;}
.ilustracja-zywa.ozyj .rys-n-tarcza{animation:rys-n-tarcza .55s 2.1s cubic-bezier(.5,0,.6,1.35) both;}
.ilustracja-zywa.ozyj .rys-n-tptak{animation:rz-rysuj .4s 2.75s ease-out both;}
@keyframes rys-n-tarcza{from{opacity:0; transform:translateY(-44px);} 40%{opacity:1;} to{opacity:1; transform:none;}}
/* RODO: karty z danymi wlatują do kłódki, kabłąk się zatrzaskuje, sylwetka zielenieje (3,1 s) */
.rys-r-karta{opacity:0; transform-box:fill-box; transform-origin:50% 50%;}
.ilustracja-zywa.ozyj .rys-r-karta-0{animation:rys-r-karta-0 1.5s 0.10s ease-in both;}
.ilustracja-zywa.ozyj .rys-r-karta-1{animation:rys-r-karta-1 1.5s 0.40s ease-in both;}
.ilustracja-zywa.ozyj .rys-r-karta-2{animation:rys-r-karta-2 1.5s 0.70s ease-in both;}
@keyframes rys-r-karta-0{0%{opacity:0; transform:translateY(8px);} 15%,50%{opacity:1; transform:none;} 88%{opacity:1;} 100%{opacity:0; transform:translate(96.1px,94.5px) scale(.2);}}
@keyframes rys-r-karta-1{0%{opacity:0; transform:translateY(8px);} 15%,50%{opacity:1; transform:none;} 88%{opacity:1;} 100%{opacity:0; transform:translate(-106.5px,7.5px) scale(.2);}}
@keyframes rys-r-karta-2{0%{opacity:0; transform:translateY(8px);} 15%,50%{opacity:1; transform:none;} 88%{opacity:1;} 100%{opacity:0; transform:translate(-101.3px,-79.5px) scale(.2);}}
.ilustracja-zywa.ozyj .rys-r-kablak{animation:rys-r-kablak .45s 2.3s cubic-bezier(.5,0,.6,1.5) both;}
.ilustracja-zywa.ozyj .rys-r-osoba{animation:rys-r-osoba .45s 2.7s ease-out both;}
@keyframes rys-r-kablak{from{transform:translateY(-30px);} to{transform:none;}}
@keyframes rys-r-osoba{from{color:#FFFFFF; opacity:.35;} to{color:var(--accent); opacity:1;}}
/* Serwery: środkowy serwer pada, strzałka odtwarza dane z kopii, serwer wraca (3,6 s) */
.rys-s-cien{opacity:0;}
.ilustracja-zywa.ozyj .rys-s-cien{animation:rys-s-cien 3.3s both;}
.ilustracja-zywa.ozyj .rys-s-led-1 path{animation:rz-mrug .5s steps(1) .2s 5, rz-fill-ok .3s 3.2s both;}
.ilustracja-zywa.ozyj .rys-s-led-0,.ilustracja-zywa.ozyj .rys-s-led-2{animation:rz-mrug .3s steps(1) 3.3s 2;}
.ilustracja-zywa.ozyj .rys-s-luk{animation:rz-rysuj .8s 1s ease-in-out both;}
.ilustracja-zywa.ozyj .rys-s-grot{animation:rz-pokaz .2s 1.75s both;}
.ilustracja-zywa.ozyj .rys-s-dane{animation:rys-s-dane .6s 1.95s linear 2;}
.ilustracja-zywa.ozyj .rys-s-kopia-led{animation:rz-mrug .3s steps(1) 1.95s 4;}
@keyframes rys-s-cien{0%,90%{opacity:1;} 100%{opacity:0;}}
@keyframes rys-s-dane{from{stroke-dashoffset:.1;} to{stroke-dashoffset:-1.05;}}
/* Monitoring: kamera się obraca, osoba wchodzi w pole widzenia, ramka wykrycia i nagrywanie (4,1 s) */
.rys-m-osoba,.rys-m-ramka,.rys-m-rec{opacity:0;}
.rys-m-kamera{transform-box:fill-box; transform-origin:30% 10%;}
.ilustracja-zywa.ozyj .rys-m-kamera{animation:rys-m-kamera 1.8s ease-in-out both;}
.ilustracja-zywa.ozyj .rys-m-osoba{animation:rys-m-osoba 3.8s .3s ease-out both;}
.ilustracja-zywa.ozyj .rys-m-ramka{animation:rys-m-ramka 4.1s both;}
.ilustracja-zywa.ozyj .rys-m-rec{animation:rys-m-rec 1.6s 2.05s steps(1) both;}
.ilustracja-zywa.ozyj .rys-m-pole path{animation:rys-m-pole .8s 2.05s ease-out;}
@keyframes rys-m-kamera{0%{transform:rotate(-8deg);} 55%{transform:rotate(5deg);} 100%{transform:none;}}
@keyframes rys-m-osoba{0%{opacity:0; transform:translate(-98.7px,-57.0px);} 10%{opacity:1;} 45%{transform:none;} 88%{opacity:1; transform:none;} 100%{opacity:0; transform:none;}}
@keyframes rys-m-ramka{0%,49%{opacity:0; color:var(--uwaga);} 52%,70%{opacity:1; color:var(--uwaga);} 75%,90%{opacity:1; color:var(--accent);} 100%{opacity:0; color:var(--accent);}}
@keyframes rys-m-rec{0%,50%{opacity:1;} 25%,75%,100%{opacity:0;}}
@keyframes rys-m-pole{40%{fill-opacity:.24;}}
/* Kontrola dostępu: karta do czytnika, fale, dioda zielona, drzwi się uchylają (3,8 s) */
.rys-k-drzwi{transform-box:fill-box; transform-origin:0% 50%;}
.rys-k-karta{transform-box:fill-box; transform-origin:50% 50%;}
.ilustracja-zywa.ozyj .rys-k-karta{animation:rys-k-karta .9s .2s cubic-bezier(.2,.7,.2,1) both;}
.ilustracja-zywa.ozyj .rys-k-fala-0{animation:rys-k-fala .5s 1.05s ease-out 2 both;}
.ilustracja-zywa.ozyj .rys-k-fala-1{animation:rys-k-fala .5s 1.17s ease-out 2 both;}
.ilustracja-zywa.ozyj .rys-k-fala-2{animation:rys-k-fala .5s 1.29s ease-out 2 both;}
.ilustracja-zywa.ozyj .rys-k-led path{animation:rz-fill-ok .25s 1.85s both;}
.ilustracja-zywa.ozyj .rys-k-drzwi{animation:rys-k-drzwi 1.7s 2.1s ease-in-out both;}
@keyframes rys-k-karta{from{opacity:0; transform:translate(-59.2px,115.8px) rotate(10deg);} 30%{opacity:1;} to{opacity:1; transform:none;}}
@keyframes rys-k-fala{0%{opacity:0;} 50%{opacity:1;} 100%{opacity:.2;}}
@keyframes rys-k-drzwi{0%,100%{transform:none;} 30%,70%{transform:scaleX(.55);}}
/* Sieci: kable podłączają się po kolei, urządzenia się zapalają, płyną pakiety (3,9 s) */
.ilustracja-zywa.ozyj .rys-w-kabel-0{animation:rz-rysuj .45s 0.15s ease-in-out both;}
.ilustracja-zywa.ozyj .rys-w-kabel-1{animation:rz-rysuj .45s 0.50s ease-in-out both;}
.ilustracja-zywa.ozyj .rys-w-kabel-2{animation:rz-rysuj .45s 0.85s ease-in-out both;}
.ilustracja-zywa.ozyj .rys-w-kabel-3{animation:rz-rysuj .45s 1.20s ease-in-out both;}
.ilustracja-zywa.ozyj .rys-w-led-0,.ilustracja-zywa.ozyj .rys-w-port-0{animation:rz-zapal .25s 0.60s both;}
.ilustracja-zywa.ozyj .rys-w-led-1,.ilustracja-zywa.ozyj .rys-w-port-1{animation:rz-zapal .25s 0.95s both;}
.ilustracja-zywa.ozyj .rys-w-led-2,.ilustracja-zywa.ozyj .rys-w-port-2{animation:rz-zapal .25s 1.30s both;}
.ilustracja-zywa.ozyj .rys-w-led-3,.ilustracja-zywa.ozyj .rys-w-port-3{animation:rz-zapal .25s 1.65s both;}
.ilustracja-zywa.ozyj .rys-w-pakiet-0{animation:rys-w-pakiet .7s 1.90s linear 2;}
.ilustracja-zywa.ozyj .rys-w-pakiet-1{animation:rys-w-pakiet .7s 2.02s linear 2;}
.ilustracja-zywa.ozyj .rys-w-pakiet-2{animation:rys-w-pakiet .7s 2.14s linear 2;}
.ilustracja-zywa.ozyj .rys-w-pakiet-3{animation:rys-w-pakiet .7s 2.26s linear 2;}
@keyframes rys-w-pakiet{from{stroke-dashoffset:.08;} to{stroke-dashoffset:-1.05;}}
/* Strony WWW: pasek ładowania, znak kodu, strona składa się na telefonie, ptaszek (3,8 s) */
.rys-p-lad,.rys-p-blok{opacity:0;}
.ilustracja-zywa.ozyj .rys-p-lad{animation:rz-rysuj .8s .1s ease-in-out both, rys-p-lad 1.2s .1s both;}
.ilustracja-zywa.ozyj .rys-p-kod-0{animation:rz-rysuj .35s 0.75s ease-out both;}
.ilustracja-zywa.ozyj .rys-p-kod-1{animation:rz-rysuj .35s 0.97s ease-out both;}
.ilustracja-zywa.ozyj .rys-p-kod-2{animation:rz-rysuj .35s 1.19s ease-out both;}
.ilustracja-zywa.ozyj .rys-p-tekst{animation:rz-rysuj .4s 1.45s ease-out both;}
.ilustracja-zywa.ozyj .rys-p-blok-0{animation:rys-p-blok 1.7s 1.60s ease-out both;}
.ilustracja-zywa.ozyj .rys-p-blok-1{animation:rys-p-blok 1.7s 1.72s ease-out both;}
.ilustracja-zywa.ozyj .rys-p-blok-2{animation:rys-p-blok 1.7s 1.84s ease-out both;}
.ilustracja-zywa.ozyj .rys-p-blok-3{animation:rys-p-blok 1.7s 1.96s ease-out both;}
.ilustracja-zywa.ozyj .rys-p-ptak{animation:rz-rysuj .4s 3.35s ease-out both;}
@keyframes rys-p-lad{0%,80%{opacity:1;} 100%{opacity:0;}}
@keyframes rys-p-blok{0%{opacity:0; transform:translateY(6px);} 20%,75%{opacity:1; transform:none;} 100%{opacity:0;}}
/* Kontakt: telefon dzwoni, połączenie odebrane, dymek; koperta wpada do skrzynki, ptaszek (3,5 s) */
.rys-c-przycisk{transform-box:fill-box; transform-origin:50% 50%;}
.rys-c-dymek{transform-box:fill-box; transform-origin:0% 100%;}
.ilustracja-zywa.ozyj .rys-c-tel{animation:rys-c-dzwoni .12s linear 9;}
.ilustracja-zywa.ozyj .rys-c-fala-0{animation:rys-k-fala .5s 0.10s ease-out 2 both;}
.ilustracja-zywa.ozyj .rys-c-fala-1{animation:rys-k-fala .5s 0.20s ease-out 2 both;}
.ilustracja-zywa.ozyj .rys-c-fala-2{animation:rys-k-fala .5s 0.30s ease-out 2 both;}
.ilustracja-zywa.ozyj .rys-c-przycisk{animation:rys-c-puls .4s .05s ease-in-out 3;}
.ilustracja-zywa.ozyj .rys-c-przycisk path{animation:rz-fill-ok .01s 1.25s both;}
.ilustracja-zywa.ozyj .rys-c-czas{animation:rz-rysuj 1.4s 1.3s linear both;}
.ilustracja-zywa.ozyj .rys-c-dymek{animation:rys-o-dymek .45s 1.3s cubic-bezier(.3,1.5,.5,1) both;}
.ilustracja-zywa.ozyj .rys-c-kropka-0{animation:rys-o-kropka .45s 1.75s ease-in-out 2 both;}
.ilustracja-zywa.ozyj .rys-c-kropka-1{animation:rys-o-kropka .45s 1.87s ease-in-out 2 both;}
.ilustracja-zywa.ozyj .rys-c-kropka-2{animation:rys-o-kropka .45s 1.99s ease-in-out 2 both;}
.ilustracja-zywa.ozyj .rys-c-list{animation:rys-c-list .75s 2.1s cubic-bezier(.5,0,.6,1.25) both;}
.ilustracja-zywa.ozyj .rys-c-ptak{animation:rz-rysuj .35s 2.95s ease-out both;}
@keyframes rys-c-dzwoni{25%{transform:translateX(-2px);} 75%{transform:translateX(2px);}}
@keyframes rys-c-puls{50%{transform:scale(1.3);}}
@keyframes rys-c-list{from{opacity:0; transform:translate(0.0px,-99.6px);} 30%{opacity:1;} to{opacity:1; transform:none;}}
/* O firmie: kable z IT (zieleń) i EL (bursztyn) do kostki z logo, płyną sygnały, błyskawica rozbłyska (3,2 s) */
.rys-f-blysk{transform-box:fill-box; transform-origin:50% 50%;}
.ilustracja-zywa.ozyj .rys-f-kabel-it{animation:rz-rysuj .6s .1s ease-in-out both;}
.ilustracja-zywa.ozyj .rys-f-kabel-el{animation:rz-rysuj .6s .35s ease-in-out both;}
.ilustracja-zywa.ozyj .rys-f-dane-it{animation:rys-s-dane .6s .8s linear 2;}
.ilustracja-zywa.ozyj .rys-f-dane-el{animation:rys-s-dane .6s 1s linear 2;}
.ilustracja-zywa.ozyj .rys-f-led-0{animation:rz-mrug .3s steps(1) 0.2s 3;}
.ilustracja-zywa.ozyj .rys-f-led-1{animation:rz-mrug .3s steps(1) 0.3s 3;}
.ilustracja-zywa.ozyj .rys-f-led-2{animation:rz-mrug .3s steps(1) 0.4s 3;}
.ilustracja-zywa.ozyj .rys-f-uwaga{animation:rz-mrug .4s steps(1) .3s 3;}
.ilustracja-zywa.ozyj .rys-f-kontur{animation:rz-rysuj .5s 1.9s ease-out both, rys-f-zgas .4s 2.6s both;}
.ilustracja-zywa.ozyj .rys-f-blysk{animation:rys-f-blysk .7s 2.35s ease-out both;}
@keyframes rys-f-zgas{to{opacity:0;}}
@keyframes rys-f-blysk{0%{opacity:0; transform:scale(.7);} 45%{opacity:1; transform:scale(1.18);} 100%{opacity:1; transform:none;}}
/* <<< zywe-podstrony */

/* Powtórka animacji po najechaniu, dotknięciu lub Tab (app.js): na jedną klatkę zdejmuje animacje, potem ruszają od nowa. */
.anim-od-nowa,.anim-od-nowa *,.anim-od-nowa *::before,.anim-od-nowa *::after{animation:none !important;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
  html{scroll-behavior:auto;}
}

/* DRUK */
@media print{
  .pasek-gorny,.site-header,.hero-fala,.nav-toggle,.btn-rzad,.stopka-haslo{display:none !important;}
  body,main > section,.site-footer{background:#fff !important; color:#000 !important;}
  h1,h2,h3,p,li,a{color:#000 !important;}
}
.galaz-el .boks-kontakt::before{background:var(--uwaga);}

/* 30.09 WIĘKSZE CZCIONKI (user: „za małe czcionki w ogóle”): drobne teksty mono podniesione w całym arkuszu (11→12.5, 11.5→13, 12→13, 12.5→14, 13→14 px, zamiana skryptem w wartościach font:), a na telefonie przyciski i notki pod nimi 15 px. */
@media (max-width:560px){ .btn{font-size:15px;} .hero-ptaszki{font-size:15px;} }

/* 01.10 PIERWSZY EKRAN NA TELEFONIE (audyt UX, heurystyka 8; zamiast chowania paska z miastami): drugi akapit leadu
   przesunięty WIZUALNIE pod przyciski (HTML i kolejność tekstu bez zmian), mniejszy odstęp nad tytułem. Pomiar: oba przyciski
   mieszczą się na 390x664, 360x640 i 320x568 (wcześniej żaden albo tylko pierwszy). */
@media (max-width:560px){
  .hero > .wrap{padding-top:24px;}
  .hero .etykieta{margin-bottom:10px;}
  .hero .hero-tekst{display:flex; flex-direction:column; align-items:flex-start;}
  .hero .hero-tekst .lead + .lead{order:2; margin-top:22px;}
  /* 01.10 wieczór: ptaszki (pierwszy to „Pierwsza rozmowa bezpłatna”, audyt UX H10 p.2) tuż pod przyciskami, przed drugim akapitem. */
  .hero .hero-tekst .hero-ptaszki{order:1; margin-top:20px;}
}

/* 01.10 STOPKA I LEGENDA (audyt UX, heurystyka 8, punkty 3 i 4). Lista usług w stopce: na komputerze zwykły nagłówek i lista,
   na telefonie zwijana (details; app.js zdejmuje open do 560 px, bez JS zostaje otwarta). Pasek dolny: linki 44 px wysokości
   w łamanym wierszu. Legenda schematu: znacznik DROP (krzyżyk) obok wyjaśnienia. */
.stopka-zwijane summary{list-style:none; cursor:default;}
.stopka-zwijane summary::-webkit-details-marker{display:none;}
.stopka-zwijane summary h2{display:inline;}
.legenda-drop{position:relative; flex:none; width:10px; height:10px;}
.legenda-drop::before,.legenda-drop::after{content:""; position:absolute; left:-1px; top:4px; width:12px; height:2px; background:var(--pilne); transform:rotate(45deg);}
.legenda-drop::after{transform:rotate(-45deg);}
@media (max-width:560px){
  .stopka-zwijane summary{cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; margin:0 0 4px; border-bottom:1px solid var(--line);}
  .stopka-zwijane summary h2{margin:0;}
  .stopka-zwijane summary h2::after{content:" (" attr(data-ile) ")"; content:" (" attr(data-ile) ")" / "";}
  .stopka-zwijane summary::after{content:"+"; content:"+" / ""; font:400 20px/1 var(--mono); color:var(--ink-3);}
  .stopka-zwijane[open] summary::after{content:"–"; content:"–" / "";}
  .stopka-zwijane ul{padding-top:8px;}
  .footer-dol{padding-bottom:28px;}
  .footer-dol ul{gap:0 20px;}
  .site-footer .footer-dol li a{padding:11px 0;}   /* specyficzność ponad .site-footer li a */
}

/* 01.10 PODPIS TWÓRCY w linii z ©: „· Projekt i kod własny” z linkiem do usługi stron WWW (bez powtarzania nazwy firmy).
   Na telefonie pod ©, bez kropki. */
.footer-autor{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px;}
@media (max-width:560px){
  .footer-autor{flex-direction:column; gap:0;}
  .footer-autor-kropka{display:none;}
  .site-footer .footer-dol .footer-autor a{padding:11px 0;}
}

/* Tarcza pod adresem na stronie Kontakt (02.10.2026) */
.adres-znak{margin-top:28px;}
.adres-znak .logo-znak{display:block; width:80px; height:80px;}