/* ==================================================================================
   HIGH PRESSURE PIPING — prototyp v2   (2026-07-28)

   RYTM — 1:1 z referencje-www/szablon-editorial.html, BEZ zerowania paddingów:
     sekcja 120px góra i dół (1024px → 96, 640px → 72)
     container 1280 / padding 40 · 32 · 20
     lead 19px / 46ch · karta padding 32 / radius 20 · nagłówek sekcji margin-bottom 60
     Sąsiadujące sekcje mają RÓŻNE tła — granica jest widoczna, nic się nie zlewa.

   KOLOR — zmierzony w logo klienta (narzedzia/playwright/kolory-logo.js):
     #0078bf niebieski marki (27,8% pikseli) · #22211f grafit (18,8%) · #1a3d52 granat
     Pełne kontrasty: prototyp/marka/paleta.md

   EFEKTY — tylko techniki o potwierdzonym wsparciu na 2026-07-28:
     IntersectionObserver (NIE animation-timeline — ten ma status "limited availability")
     animacje wyłącznie transform/opacity → CLS bez zmian
     hero bez animacji wejścia → to element LCP
     prefers-reduced-motion: reduce wyłącza cały ruch
   ================================================================================== */

:root{
  --body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  /* z logo */
  --brand:#0078bf;
  --brand-hi:#1a92dd;
  --brand-dark:#005c93;
  --ink:#22211f;
  --navy:#152e3d;
  --navy-2:#1a3d52;

  /* neutralne (wyprowadzone) */
  --bg:#ffffff;
  --bg-alt:#f2f5f7;
  --steel:#dfe4e8;
  --steel-2:#c6ced5;
  --gray-1:#4a545d;
  --gray-2:#6b757e;
  --gray-3:#9aa3ab;

  --rytm:120px;
  --radius:20px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:100px;}
html,body{margin:0; padding:0; overflow-x:clip;}
body{font-family:var(--body); background:var(--bg); color:var(--ink);
     -webkit-font-smoothing:antialiased; line-height:1.65; font-size:16px;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
h1,h2,h3,h4{font-weight:800; letter-spacing:-0.035em; line-height:1.06; margin:0;}
p{margin:0;}

/* ====== UKŁAD ====== */
.wrap{max-width:1280px; margin:0 auto; padding:0 40px;}
.sek{padding:var(--rytm) 0; position:relative;}
.sek-jasna{background:var(--bg);}
.sek-alt{background:var(--bg-alt);}
.sek-ciemna{background:var(--navy); color:#fff;}
.sek-marka{background:var(--brand); color:#fff;}

.naglowek{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:60px; flex-wrap:wrap; gap:28px;}
.naglowek .opis{max-width:38ch; color:var(--gray-1); font-size:15px;}
.sek-ciemna .naglowek .opis, .sek-marka .naglowek .opis{color:rgba(255,255,255,.75);}
.h2{font-size:clamp(32px,4.4vw,52px); margin-top:14px; max-width:18ch;}
.oko{font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:#00618f;}  /* 4,32:1 -> ok. 6:1 */
.sek-ciemna .oko{color:#6cc5f2;}  /* 4,16:1 -> ok. 7:1 na granacie */
.sek-marka .oko{color:rgba(255,255,255,.8);}
.lead{font-size:19px; color:var(--gray-1); max-width:46ch; margin-top:24px;}
/* długość wiersza — max 75 znaków (CARD-PRODUCT-SINGLE-CONTENT-BLUEPRINT-2026) */
.proza{max-width:68ch; color:var(--gray-1); font-size:17px;}
.proza p + p{margin-top:18px;}

/* ====== PRZYCISKI ====== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:600; font-size:15px;
     padding:16px 30px; border-radius:10px; border:1px solid transparent; cursor:pointer; min-height:52px;
     transition:transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;}
.btn svg{transition:transform .18s cubic-bezier(.2,.7,.2,1);}
.btn:hover svg{transform:translateX(4px);}
.btn-glowny{background:var(--brand); color:#fff;}
.btn-glowny:hover{background:var(--brand-dark); transform:translateY(-2px); box-shadow:0 16px 32px -14px rgba(0,120,191,.65);}
.btn-obrys{background:transparent; color:var(--ink); border-color:var(--steel-2);}
.btn-obrys:hover{border-color:var(--ink); transform:translateY(-2px);}
.btn-jasny{background:#fff; color:var(--brand); }
.btn-jasny:hover{transform:translateY(-2px); box-shadow:0 16px 32px -14px rgba(0,0,0,.4);}
.btn-obrys-jasny{background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.4);}
.btn-obrys-jasny:hover{background:rgba(255,255,255,.16); transform:translateY(-2px);}

/* ====== PASEK POSTĘPU ====== */
.postep{position:fixed; top:0; left:0; height:3px; width:100%; z-index:60; transform:scaleX(0); transform-origin:0 50%;
        background:linear-gradient(90deg,var(--brand),var(--brand-hi)); will-change:transform;}

/* ====== NAWIGACJA (kapsuła) ====== */
.topbar{position:fixed; top:14px; left:0; right:0; z-index:55; padding:0 20px; pointer-events:none;}
.nav{pointer-events:auto; max-width:1280px; margin:0 auto; display:flex; align-items:center; gap:20px;
     justify-content:space-between; padding:10px 10px 10px 16px; border-radius:100px;
     background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%);
     border:1px solid rgba(255,255,255,.65); box-shadow:0 12px 36px -22px rgba(21,46,61,.6);
     transition:box-shadow .3s ease, background .3s ease, padding .3s ease;}
.topbar.przewiniety .nav{background:rgba(255,255,255,.97); box-shadow:0 18px 44px -24px rgba(21,46,61,.75);}
.marka{display:flex; align-items:center; gap:11px; min-height:44px;}
.marka img{height:46px; width:auto;}
.marka .nazwa{font-weight:800; font-size:15px; letter-spacing:-0.02em; line-height:1.1; white-space:nowrap;}
.marka .nazwa small{display:block; font-family:var(--mono); font-size:9.5px; font-weight:400; letter-spacing:.15em;
     text-transform:uppercase; color:var(--gray-2); margin-top:2px;}
.menu{display:flex; gap:26px; font-size:14.5px; font-weight:500;}
.menu a{color:var(--gray-1); padding:10px 0; position:relative; min-height:44px; display:inline-flex; align-items:center;}
.menu a::after{content:''; position:absolute; left:0; right:100%; bottom:6px; height:2px; background:var(--brand);
     transition:right .25s cubic-bezier(.2,.7,.2,1);}
.menu a:hover{color:var(--ink);} .menu a:hover::after{right:0;}
.nav-prawa{display:flex; align-items:center; gap:10px;}
.jezyki{display:flex; gap:2px; font-family:var(--mono); font-size:11px;}
.jezyki a{padding:0 9px; min-height:44px; display:inline-flex; align-items:center; border-radius:8px; color:var(--gray-2);}
.jezyki a.wybrany{background:var(--ink); color:#fff;}
.jezyki a:not(.wybrany):hover{background:var(--bg-alt); color:var(--ink);}
.nav-tel{display:inline-flex; align-items:center; gap:9px; min-height:48px; padding:0 20px; border-radius:100px;
     background:var(--brand); color:#fff; font-family:var(--mono); font-size:13.5px; font-weight:500; white-space:nowrap;}
.nav-tel:hover{background:var(--brand-dark);}
.burger{display:none; width:46px; height:46px; flex:none; align-items:center; justify-content:center; flex-direction:column; gap:5px;
     background:transparent; border:1px solid var(--steel-2); border-radius:12px; cursor:pointer;}
.burger span{display:block; width:18px; height:2px; background:var(--ink); transition:transform .2s ease, opacity .2s ease;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ====== HERO ====== */
.hero{position:relative; min-height:min(100svh,940px); display:flex; align-items:flex-end;
      padding:180px 0 84px; overflow:hidden; background:var(--navy); color:#fff;}
.hero-foto{position:absolute; inset:-8% 0 -8% 0; z-index:0; will-change:transform;}
.hero-foto img{width:100%; height:100%; object-fit:cover; object-position:center 42%;}
.hero-maska{position:absolute; inset:0; z-index:1;
     background:linear-gradient(180deg, rgba(21,46,61,.86) 0%, rgba(21,46,61,.62) 34%, rgba(21,46,61,.9) 82%, rgba(21,46,61,.97) 100%);}
.hero-maska2{position:absolute; inset:0; z-index:1;
     background:linear-gradient(100deg, rgba(0,120,191,.42) 0%, rgba(21,46,61,.1) 55%, transparent 100%);}
.hero .wrap{position:relative; z-index:2; width:100%; will-change:transform,opacity;}
.hero h1{font-size:clamp(40px,6.2vw,86px); max-width:15ch; letter-spacing:-0.045em;}
.hero .oko{color:#8fd0f5;}
.hero-lead{font-size:clamp(17px,1.5vw,21px); color:rgba(255,255,255,.86); max-width:54ch; margin-top:26px;}
.hero-akcje{display:flex; gap:14px; flex-wrap:wrap; margin-top:38px;}
.hero-dane{display:grid; grid-template-columns:repeat(3,auto); gap:52px; justify-content:start;
     margin-top:56px; padding-top:34px; border-top:1px solid rgba(255,255,255,.22);}
.hero-dane .wiecej{font-size:.3em; margin-bottom:2px;}
.hero-dane .l{font-size:clamp(30px,3.6vw,44px); font-weight:800; letter-spacing:-0.04em; line-height:1;
     font-variant-numeric:tabular-nums;}
.hero-dane .o{font-size:13.5px; color:rgba(255,255,255,.62); margin-top:8px; max-width:15ch;}
.hero-plakietka{will-change:opacity; position:absolute; right:40px; bottom:84px; z-index:2; text-align:right; padding-right:20px;
     border-right:2px solid var(--brand-hi);}
.hero-plakietka .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.55);}
.hero-plakietka .w{font-family:var(--mono); font-size:32px; font-weight:500; margin-top:6px;}
.hero-plakietka .d{font-size:12.5px; color:rgba(255,255,255,.6); margin-top:4px;}
.hero-strzalka{position:absolute; left:50%; bottom:26px; z-index:2; transform:translateX(-50%);
     width:30px; height:30px; color:rgba(255,255,255,.5); animation:opad 2.2s ease-in-out infinite;}
@keyframes opad{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

/* ====== PAS ZAUFANIA (logotypy klientów) ======
   Statyczna siatka, nie jadąca taśma. Ruch nie ma tu oparcia w badaniach,
   a utrudnia odczytanie, dla kogo firma pracowała — czyli jedynej rzeczy,
   po którą ta sekcja istnieje. Logotypy w równych polach o wspólnej wysokości. */
.zaufanie{background:var(--bg); padding:56px 0; border-bottom:1px solid var(--steel);}
.zaufanie .etyk{text-align:center; font-family:var(--mono); font-size:11.5px; letter-spacing:.2em;
     text-transform:uppercase; color:#5c666f; margin-bottom:34px;}  /* 2,56:1 -> ponad 6:1 */
.loga{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; align-items:stretch;}
.logo-pole{display:flex; align-items:center; justify-content:center; padding:22px 20px; min-height:104px;
     background:var(--bg-alt); border:1px solid var(--steel); border-radius:14px;
     transition:transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s ease, background .25s ease;}
.logo-pole img{max-height:46px; width:auto; max-width:100%; object-fit:contain;
     filter:grayscale(1) contrast(.85); opacity:.72; transition:filter .25s ease, opacity .25s ease;}
.logo-pole:hover{transform:translateY(-4px); border-color:rgba(0,120,191,.45); background:#fff;}
.logo-pole:hover img{filter:none; opacity:1;}

/* ====== KARTY OGÓLNE ====== */
.siatka-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.siatka-2{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.karta{background:var(--bg); border:1px solid var(--steel); border-radius:var(--radius); padding:32px; position:relative;
     overflow:hidden; transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease;}
.sek-alt .karta{background:#fff;}
.karta::before{content:''; position:absolute; inset:0; opacity:0; transition:opacity .3s ease; pointer-events:none;
     background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(0,120,191,.1), transparent 62%);}
.karta::after{content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
     box-shadow:0 26px 52px -30px rgba(21,46,61,.5); transition:opacity .28s ease;}
.karta:hover{transform:translateY(-6px); border-color:rgba(0,120,191,.4);}
.karta:hover::after{opacity:1;}
.karta:hover::before{opacity:1;}
.karta h3{font-size:23px; margin-bottom:12px;}
.karta p{color:var(--gray-1); font-size:15.5px;}

/* filary */
.filar .nr{width:52px; height:52px; border-radius:14px; background:var(--brand); color:#fff; display:flex;
     align-items:center; justify-content:center; font-family:var(--mono); font-size:14px; margin-bottom:22px;}

/* ====== O NAS ====== */
.onas-siatka{display:grid; grid-template-columns:1fr 1.15fr; gap:72px; align-items:center;}
.onas-foto{position:relative; border-radius:var(--radius); overflow:hidden; background:var(--bg-alt); aspect-ratio:4/5;}
.onas-foto img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.onas-foto:hover img{transform:scale(1.04);}
.onas-plakietka{position:absolute; left:20px; bottom:20px; right:20px; background:rgba(255,255,255,.95);
     -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-radius:14px; padding:18px 20px;}
.onas-plakietka .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gray-2);}
.onas-plakietka .w{font-weight:700; font-size:17px; margin-top:3px;}
.lista{list-style:none; padding:0; margin:34px 0 0;}
.lista li{position:relative; padding:14px 0 14px 34px; border-top:1px solid var(--steel); font-size:15.5px; color:var(--gray-1);}
.lista li:last-child{border-bottom:1px solid var(--steel);}
.lista li::before{content:''; position:absolute; left:0; top:23px; width:16px; height:2px; background:var(--brand);}

/* ====== OFERTA (ciemna) ====== */
.oferta-karta{background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.13); border-radius:var(--radius);
     overflow:hidden; display:flex; flex-direction:column; position:relative;
     transition:transform .28s cubic-bezier(.2,.7,.2,1), border-color .28s ease, background .28s ease;}
.oferta-karta:hover{transform:translateY(-6px); border-color:rgba(0,120,191,.6); background:rgba(255,255,255,.07);}
.oferta-foto{aspect-ratio:16/10; overflow:hidden; background:var(--navy-2);}
.oferta-foto img{width:100%; height:100%; object-fit:cover; opacity:.88; transition:transform .7s cubic-bezier(.2,.7,.2,1), opacity .3s ease;}
.oferta-karta:hover .oferta-foto img{transform:scale(1.06); opacity:1;}
.oferta-tresc{padding:30px 32px 32px; display:flex; flex-direction:column; flex:1;}
.oferta-tresc h3{font-size:23px; color:#fff; margin-bottom:12px;}
.oferta-tresc > p{color:rgba(255,255,255,.72); font-size:15.5px;}
.sys{list-style:none; padding:0; margin:22px 0 0;}
.oferta-tresc > p{margin-bottom:0;}
.sys li{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:11px 0;
     border-top:1px solid rgba(255,255,255,.12); font-size:15px; color:rgba(255,255,255,.88);}
.sys li:last-child{border-bottom:1px solid rgba(255,255,255,.12);}
.sys .par{font-family:var(--mono); font-size:11.5px; color:#6cc5f2; white-space:nowrap;}
.uwaga{font-size:13px; color:rgba(255,255,255,.55); margin-top:auto; padding-top:20px;}



/* ====== REALIZACJE ====== */
.real{display:grid; grid-template-columns:repeat(6,1fr); gap:24px;}
.rk{grid-column:span 2; background:#fff; border:1px solid var(--steel); border-radius:var(--radius); overflow:hidden;
    display:flex; flex-direction:column; position:relative;
    transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease;}
.rk:hover{transform:translateY(-6px); border-color:rgba(0,120,191,.4); box-shadow:0 28px 56px -32px rgba(21,46,61,.5);}
.rk-duza{grid-column:span 3;}
.rk-foto{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--bg-alt);}
.rk-duza .rk-foto{aspect-ratio:16/8;}
.rk-foto img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.rk:hover .rk-foto img{transform:scale(1.05);}
.rk-logo{position:absolute; left:18px; top:18px; background:#fff; border-radius:12px;
     padding:10px 16px; height:54px; display:flex; align-items:center; box-shadow:0 8px 22px -12px rgba(21,46,61,.6);}
.rk-logo img{height:100%; width:auto; object-fit:contain;}
.rk-tresc{padding:26px 28px 28px; display:flex; flex-direction:column; flex:1;}
.rk-klient{font-family:var(--mono); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:#5c666f;}
.rk h3{font-size:21px; margin:9px 0 12px;}
.rk-duza h3{font-size:26px;}
.rk p{color:var(--gray-1); font-size:15px; margin-bottom:22px; max-width:62ch;}
.par-lista{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:20px; border-top:1px solid var(--steel);}
.par-chip{font-family:var(--mono); font-size:11px; color:#00618f; background:rgba(0,120,191,.08);
     border:1px solid rgba(0,120,191,.2); border-radius:8px; padding:7px 11px;}

/* ====== LICZBY (sekcja w kolorze marki) ====== */
.liczby{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}
.wiecej{display:block; font-family:var(--mono); font-size:.26em; font-weight:400; letter-spacing:.14em;
     text-transform:uppercase; opacity:.72; margin-bottom:4px;}
.hero-dane .wiecef{display:inline;}
.liczba .l{font-size:clamp(46px,6.6vw,88px); font-weight:800; letter-spacing:-0.05em; line-height:1; font-variant-numeric:tabular-nums;}
.liczba .o{font-size:16px; color:rgba(255,255,255,.8); margin-top:12px; max-width:18ch;}
.liczba{padding-left:26px; border-left:2px solid rgba(255,255,255,.32);}

/* ====== OPINIE ======
   Sekcja tymczasowo ZDJĘTA ze strony (2026-07-28) — stare opinie były wstawione
   prowizorycznie, klient zbiera nowe rekomendacje.
   CSS zostaje, bo sekcja wróci. Gotowy blok HTML: fragmenty/sekcja-opinie-WZOR.html */
.opinia{background:#fff; border:1px solid var(--steel); border-radius:var(--radius); padding:32px;
     display:flex; flex-direction:column; transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;}
.opinia:hover{transform:translateY(-6px); box-shadow:0 26px 52px -30px rgba(21,46,61,.4);}
.opinia .cudzyslow{font-family:var(--mono); font-size:44px; color:var(--brand); opacity:.3; line-height:.7; margin-bottom:14px;}
.opinia p{color:var(--gray-1); font-size:15.5px; max-width:60ch;}
.opinia .kto{display:flex; align-items:center; gap:14px; margin-top:auto; padding-top:24px; border-top:1px solid var(--steel);}
.opinia .kto img{width:52px; height:52px; border-radius:100px; object-fit:cover; flex:none;}
.opinia .kto .n{font-weight:700; font-size:15.5px;}
.opinia .kto .f{font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--gray-2); margin-top:2px;}

/* ====== KONTAKT ====== */
.kontakt-siatka{display:grid; grid-template-columns:1fr 1.05fr; gap:64px; align-items:start;}
.dane{background:#fff; border:1px solid var(--steel); border-radius:var(--radius); padding:8px 32px; margin-top:40px;}
.dane-w{display:flex; gap:20px; align-items:center; padding:22px 0; border-top:1px solid var(--steel); min-height:44px;}
.dane-w:first-child{border-top:0;}
.dane-w .ikona{width:44px; height:44px; border-radius:12px; background:rgba(0,120,191,.09); color:var(--brand);
     display:flex; align-items:center; justify-content:center; flex:none;}
/* etykieta i wartość muszą być w osobnych wierszach — jako inline sklejały się w „TELEFON+48 605…" */
.dane-w > span:last-child{display:flex; flex-direction:column;}
.dane-w .k{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#5c666f;}
.dane-w .w{font-size:17.5px; font-weight:600; margin-top:2px;}
.dane-w .w small{display:block; font-size:14px; font-weight:400; color:var(--gray-2); margin-top:1px;}
/* telefon i mail to linki — musza miec pelne 44px obszaru dotykowego */
.dane-w .w a{display:inline-flex; align-items:center; min-height:44px;}
.dane-w .w a:hover{color:var(--brand);}
.formularz{background:#fff; border:1px solid var(--steel); border-radius:var(--radius); padding:34px;}
.pole{margin-bottom:20px;}
.pole label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
     color:#5c666f; margin-bottom:9px;}
.pole input,.pole select,.pole textarea{width:100%; font-family:var(--body); font-size:15.5px; color:var(--ink);
     background:var(--bg-alt); border:1px solid var(--steel-2); border-radius:10px; padding:14px 15px; outline:none; min-height:52px;
     transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;}
.pole textarea{min-height:130px; resize:vertical;}
.pole input:focus,.pole select:focus,.pole textarea:focus{border-color:var(--brand); background:#fff; box-shadow:0 0 0 4px rgba(0,120,191,.14);}
.dwa{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.zgoda{display:flex; gap:13px; align-items:flex-start; margin-bottom:22px;}
.zgoda input{width:24px; height:24px; margin-top:2px; flex:none; accent-color:var(--brand);}
.zgoda label{font-size:13px; color:var(--gray-2); line-height:1.55; letter-spacing:0; text-transform:none; font-family:var(--body); margin:0;}
.pulapka{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* ====== CTA ====== */
.cta{background:linear-gradient(120deg,var(--brand) 0%, var(--brand-dark) 62%, var(--navy) 100%);
     border-radius:28px; padding:68px 56px; color:#fff; display:flex; justify-content:space-between;
     align-items:center; flex-wrap:wrap; gap:32px; position:relative; overflow:hidden;}
.cta::after{content:''; position:absolute; right:-90px; top:-90px; width:340px; height:340px; border-radius:100%;
     background:radial-gradient(circle,rgba(255,255,255,.16),transparent 68%);}
.cta h2{font-size:clamp(28px,3.8vw,46px); max-width:19ch; position:relative;}
.cta .akcje{display:flex; gap:14px; flex-wrap:wrap; position:relative;}

/* ====== STOPKA ====== */
footer{background:var(--ink); color:var(--gray-3); padding:84px 0 36px;}
.stopka-siatka{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:48px;}
footer h4{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gray-3); margin-bottom:18px;}
footer a{display:flex; align-items:center; min-height:44px; color:rgba(255,255,255,.72); font-size:14.5px;}
footer a:hover{color:#fff;}
.stopka-marka{display:flex; align-items:center; gap:12px;}
.stopka-marka img{height:44px; width:auto; background:#fff; border-radius:10px; padding:4px;}
.stopka-dol{border-top:1px solid rgba(255,255,255,.13); margin-top:56px; padding-top:26px; display:flex;
     justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:13px; align-items:center;}
.stopka-linki{display:flex; gap:24px; flex-wrap:wrap;}
.stopka-linki a{min-height:44px; display:inline-flex; align-items:center; font-size:13px;}


/* ==================================================================================
   EFEKTY WIZUALNE — zestaw rozszerzony (2026-07-28)
   Wszystko na właściwościach kompozytowanych (transform / opacity / clip-path),
   zgodnie z MDN „CSS and JavaScript animation performance" — bez layoutu i repaintu.
   Każdy efekt wyłączany przez prefers-reduced-motion (blok na końcu arkusza).
   ================================================================================== */

/* --- 1. NAGŁÓWKI WJEŻDŻAJĄCE SŁOWO PO SŁOWIE ---
   Każde słowo w masce (overflow:hidden), wjeżdża z dołu z opóźnieniem kaskadowym.
   Podział robi JS po załadowaniu, więc treść w DOM i dla czytników zostaje nietknięta. */
.slowo{display:inline-block; overflow:hidden; vertical-align:top;}
.slowo > i{display:inline-block; font-style:inherit; transform:translateY(105%);
     transition:transform .82s cubic-bezier(.16,.84,.24,1);}
.slowo.wjechalo > i{transform:translateY(0);}
/* przy wylaczonych animacjach systemowych slowa nie jada w pionie, tylko sie rozjasniaja */
html.bez-ruchu .slowo{overflow:visible;}
html.bez-ruchu .slowo > i{transform:none; opacity:0; transition:opacity .55s ease;}
html.bez-ruchu .slowo.wjechalo > i{opacity:1;}

/* --- 2. ODSŁANIANIE OBRAZÓW MASKĄ ---
   Obraz wyłania się spod przesuwającej się krawędzi + delikatne odjechanie skali. */
.odslon{clip-path:inset(0 0 100% 0); transition:clip-path 1.05s cubic-bezier(.16,.84,.24,1);}
.odslon.jest{clip-path:inset(0 0 0 0);}
.odslon img{transform:scale(1.14); transition:transform 1.5s cubic-bezier(.16,.84,.24,1);}
.odslon.jest img{transform:scale(1);}

/* --- 3. AURORA W HERO ---
   Dwie plamy światła w kolorze marki, powolny ruch. Tylko transform, warstwa nad zdjęciem. */
.aurora{position:absolute; inset:-30%; z-index:1; pointer-events:none; opacity:.4; mix-blend-mode:screen;}
.aurora span{position:absolute; border-radius:50%; filter:blur(90px); will-change:transform;}
.aurora span:nth-child(1){width:52vw; height:52vw; left:46%; top:-6%;
     background:radial-gradient(circle, rgba(0,120,191,.85), transparent 66%); animation:dryf1 28s ease-in-out infinite;}
.aurora span:nth-child(2){width:40vw; height:40vw; left:8%; top:34%;
     background:radial-gradient(circle, rgba(26,146,221,.6), transparent 68%); animation:dryf2 34s ease-in-out infinite;}
@keyframes dryf1{0%,100%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(-6%,5%,0) scale(1.12);}}
@keyframes dryf2{0%,100%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(9%,-8%,0) scale(1.2);}}

/* --- 4. POWOLNE ZBLIŻENIE ZDJĘCIA HERO (Ken Burns) --- */
.hero-foto img{animation:zblizenie 34s ease-in-out infinite alternate;}
@keyframes zblizenie{from{transform:scale(1);}to{transform:scale(1.08);}}

/* --- 5. PRZYCISKI MAGNETYCZNE ---
   Przycisk przesuwa się nieznacznie w stronę kursora. Wartości ustawia JS w rAF. */
.btn{--px:0px; --py:0px;}
@media (hover:hover) and (pointer:fine){
  .btn{transform:translate3d(var(--px),var(--py),0);}
  .btn-glowny:hover{transform:translate3d(var(--px),calc(var(--py) - 2px),0);}
  .btn-obrys:hover,.btn-jasny:hover,.btn-obrys-jasny:hover{transform:translate3d(var(--px),calc(var(--py) - 2px),0);}
}

/* --- 6. KARTY REALIZACJI Z PERSPEKTYWĄ ---
   Delikatne przechylenie w stronę kursora. Kąt liczony w JS, tu tylko przekazany. */
.real{perspective:1400px;}
.rk{--rx:0deg; --ry:0deg; transform-style:preserve-3d;}
@media (hover:hover) and (pointer:fine){
  .rk{transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease;}
  .rk:hover{transform:translateY(-6px) rotateX(var(--rx)) rotateY(var(--ry));}
  /* parametry wysuwają się przy najechaniu */
  .rk .par-chip{transition:transform .32s cubic-bezier(.2,.7,.2,1), background .25s ease, border-color .25s ease;}
  .rk:hover .par-chip{background:rgba(0,120,191,.14); border-color:rgba(0,120,191,.42);}
  .rk:hover .par-chip:nth-child(1){transform:translateY(-3px);}
  .rk:hover .par-chip:nth-child(2){transform:translateY(-3px); transition-delay:.04s;}
  .rk:hover .par-chip:nth-child(3){transform:translateY(-3px); transition-delay:.08s;}
  .rk:hover .par-chip:nth-child(4){transform:translateY(-3px); transition-delay:.12s;}
}

/* --- 7. PODKREŚLENIE LICZB W SEKCJI MARKI --- */
.liczba{position:relative; overflow:hidden;}
.liczba::after{content:''; position:absolute; left:-2px; bottom:0; width:2px; height:100%;
     background:#fff; transform:scaleY(0); transform-origin:0 100%; transition:transform .9s cubic-bezier(.16,.84,.24,1);}
.liczba.jest::after{transform:scaleY(1);}




/* ==================================================================================
   SCHEMAT INSTALACJI — żywy element strony (2026-07-28)
   Zamiast pożyczonych efektów: motyw z branży klienta. Rurociąg rysowany w SVG,
   medium płynie animacją `stroke-dashoffset` (CSS, wspierane od zawsze), zawory
   pulsują, punkty pomiarowe migają. Nie zależy od jakości zdjęć — rysunek jest wektorowy.
   Animowane wyłącznie właściwości kompozytowane + stroke-dashoffset.
   ================================================================================== */
.rurociag{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.42;
     -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 26%, #000 52%);
     mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 26%, #000 52%);}
.rurociag svg{width:100%; height:100%;}
.r-rura{fill:none; stroke:rgba(160,215,250,.22); stroke-width:4; stroke-linecap:round;}
.r-medium{fill:none; stroke:#8fe3ff; stroke-width:4; stroke-linecap:round;
     stroke-dasharray:120 300; filter:drop-shadow(0 0 7px rgba(127,220,255,.55));
     animation:plyn 9s linear infinite;}
.r-medium.o1{animation-duration:11s; animation-delay:-3s;}
.r-medium.o2{animation-duration:10s; animation-delay:-6s;}
.r-medium.o3{animation-duration:12s; animation-delay:-4s;}
@keyframes plyn{to{stroke-dashoffset:-380;}}

.r-zawor{fill:rgba(21,46,61,.85); stroke:rgba(143,227,255,.7); stroke-width:2.5;}
.r-punkt{fill:#8fe3ff; r:4; filter:drop-shadow(0 0 6px rgba(143,227,255,.7)); animation:tetno 6s ease-in-out infinite;}
.r-punkt.o1{animation-delay:-.8s;} .r-punkt.o2{animation-delay:-1.6s;}
@keyframes tetno{0%,100%{opacity:.5;}50%{opacity:.85;}}
.r-halo{display:none;}  /* usuniete — najbardziej migotliwy element hero */
.r-halo.o1{animation-delay:-.8s;} .r-halo.o2{animation-delay:-1.6s;}
@keyframes fala{0%{r:5; opacity:.55;}100%{r:30; opacity:0;}}

/* wskaźnik "instalacja pod ciśnieniem" — miga jak dioda na sterowniku */
.dioda{display:inline-flex; align-items:center; gap:11px; font-family:var(--mono); font-size:12px;
     letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.62);}
.dioda b{width:9px; height:9px; border-radius:50%; background:#3ddc84; flex:none;
     box-shadow:0 0 0 0 rgba(61,220,132,.7); animation:puls 4s ease-out infinite;}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(61,220,132,.55);}70%{box-shadow:0 0 0 12px rgba(61,220,132,0);}100%{box-shadow:0 0 0 0 rgba(61,220,132,0);}}

/* pasek parametrów przesuwający się pod hero */
.ticker{position:relative; overflow:hidden; background:var(--ink); border-top:1px solid rgba(255,255,255,.1);
     border-bottom:1px solid rgba(255,255,255,.1); padding:15px 0;}
.ticker-tor{display:flex; gap:0; width:max-content; animation:jedzie 68s linear infinite;}
.ticker-tor:hover{animation-play-state:paused;}
.ticker span{font-family:var(--mono); font-size:12.5px; letter-spacing:.13em; text-transform:uppercase;
     color:rgba(255,255,255,.62); padding:0 30px; white-space:nowrap; display:inline-flex; align-items:center; gap:12px;}
.ticker span::after{content:''; width:5px; height:5px; border-radius:50%; background:var(--brand-hi); opacity:.85;}
.ticker em{color:#fff; font-style:normal;}
@keyframes jedzie{to{transform:translateX(-50%);}}

/* liczby "dekodujące się" przy wejściu */
.scramble{font-variant-numeric:tabular-nums;}

@media (prefers-reduced-motion: reduce){
  /* Dekoracje ZOSTAJA — spokojna petla w rurach i dioda nie wywoluja dolegliwosci
     przedsionkowych. Wytyczne dotycza ruchu gwaltownego: parallaxu, przesuniec, przechylow.
     Wyciszamy jedynie najbardziej ruchliwa fale wokol punktow. */
  .r-halo{animation-duration:4.5s;}
}




/* ===== EFEKTY PRZENIESIONE Z jadeja.pl/rejestracja-b2b =====
   Odczytane z żywej strony (narzedzia/playwright/analiza-jadeja.js):
   jjbStepGlow, jjbLineH/jjbDotH, jjbNumPulse, jjbBob oraz błysk .jjb-cta::after (left .6s). */

/* błysk przejeżdżający przez przycisk (odpowiednik .jjb-cta::after) */
.btn{position:relative; overflow:hidden;}
.btn::after{content:''; position:absolute; top:0; bottom:0; left:-140%; width:60%;
     background:linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
     transform:skewX(-18deg); transition:left .6s cubic-bezier(.2,.7,.2,1); pointer-events:none;}
.btn:hover::after{left:150%;}
.btn-obrys::after{background:linear-gradient(100deg, transparent, rgba(0,120,191,.24), transparent);}

/* numery filarów pulsują i unoszą się (jjbNumPulse + jjbBob) */
.filar .nr{position:relative; animation:hppBob 7s ease-in-out infinite;}
.filar:nth-child(2) .nr{animation-delay:-1.5s;}
.filar:nth-child(3) .nr{animation-delay:-3s;}
.filar .nr::after{content:''; position:absolute; inset:-6px; border-radius:18px;
     border:2px solid var(--brand); opacity:0; animation:hppNumPulse 3.2s ease-out infinite;}
.filar:nth-child(2) .nr::after{animation-delay:-1.1s;}
.filar:nth-child(3) .nr::after{animation-delay:-2.2s;}
@keyframes hppBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@keyframes hppNumPulse{0%{opacity:.3; transform:scale(.98);}70%{opacity:0; transform:scale(1.14);}100%{opacity:0;}}

/* linia rysująca się pod nagłówkiem sekcji + kropka wędrująca (jjbLineH + jjbDotH) */
.naglowek{position:relative;}
.naglowek::before{content:''; position:absolute; left:0; right:0; bottom:-22px; height:2px;
     background:linear-gradient(90deg, var(--brand), rgba(0,120,191,0));
     transform:scaleX(0); transform-origin:0 50%; transition:transform 1.1s cubic-bezier(.16,.84,.24,1);}
.naglowek.jest::before{transform:scaleX(1);}
.naglowek::after{content:''; position:absolute; bottom:-26px; left:0; width:10px; height:10px;
     border-radius:50%; background:var(--brand); box-shadow:0 0 12px rgba(0,120,191,.9);
     animation:hppDot 14s ease-in-out infinite; opacity:.9;}
.sek-ciemna .naglowek::before{background:linear-gradient(90deg, var(--brand-hi), rgba(143,227,255,0));}
.sek-ciemna .naglowek::after{background:var(--brand-hi); box-shadow:0 0 12px rgba(143,227,255,.95);}
.sek-marka .naglowek::before{background:linear-gradient(90deg, #fff, rgba(255,255,255,0));}
.sek-marka .naglowek::after{background:#fff; box-shadow:0 0 12px rgba(255,255,255,.9);}
@keyframes hppDot{0%,100%{left:0;}50%{left:calc(100% - 10px);}}

/* karty ofert: delikatna poświata krawędzi (jjbStepGlow) */
.oferta-karta{position:relative;}
.oferta-karta::before{content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
     border:1px solid rgba(143,227,255,.4); opacity:0; animation:hppGlow 9s ease-in-out infinite;}
.oferta-karta:nth-child(2)::before{animation-delay:-1.7s;}
.oferta-karta:nth-child(3)::before{animation-delay:-3.4s;}
@keyframes hppGlow{0%,100%{opacity:0;}50%{opacity:.35;}}

/* chipy parametrów zapalają się po kolei */
.par-chip{}

@keyframes hppChip{0%,100%{border-color:rgba(0,120,191,.2);}50%{border-color:rgba(0,120,191,.62);}}


/* ===== HOVER PRZYCISKÓW — wyraźny, jednoznaczny ===== */
.btn{--cien:0 0 0 0 rgba(0,0,0,0);}
.btn-glowny:hover,.btn-glowny:focus-visible{background:var(--brand-dark); transform:translate3d(var(--px),calc(var(--py) - 3px),0);
     box-shadow:0 14px 30px -10px rgba(0,120,191,.75);}
.btn-obrys{background:#fff;}
.btn-obrys:hover,.btn-obrys:focus-visible{background:var(--ink); color:#fff; border-color:var(--ink);
     transform:translate3d(var(--px),calc(var(--py) - 3px),0); box-shadow:0 14px 30px -12px rgba(34,33,31,.6);}
.btn-jasny:hover,.btn-jasny:focus-visible{background:var(--ink); color:#fff;
     transform:translate3d(var(--px),calc(var(--py) - 3px),0); box-shadow:0 14px 30px -12px rgba(0,0,0,.55);}
.btn-obrys-jasny:hover,.btn-obrys-jasny:focus-visible{background:#fff; color:var(--brand); border-color:#fff;
     transform:translate3d(var(--px),calc(var(--py) - 3px),0); box-shadow:0 14px 30px -12px rgba(0,0,0,.5);}
/* ognisko klawiatury — obowiazkowe dla dostepnosci */
.btn:focus-visible,.menu a:focus-visible,.jezyki a:focus-visible,.nav-tel:focus-visible,
footer a:focus-visible,.dane-w .w a:focus-visible,.logo-pole:focus-visible{
     outline:3px solid var(--brand-hi); outline-offset:3px;}
.sek-marka .btn:focus-visible,.hero .btn:focus-visible{outline-color:#fff;}
/* linki tekstowe */
.dane-w .w a{border-bottom:1px solid transparent;}
.dane-w .w a:hover{color:var(--brand); border-bottom-color:var(--brand);}
.nav-tel:hover{background:var(--brand-dark); transform:translateY(-2px);}
footer a:hover{color:#fff; padding-left:5px;}
footer a{transition:color .2s ease, padding-left .2s ease;}
.jezyki a:not(.wybrany):hover{background:var(--brand); color:#fff;}


/* ===== REALIZACJE — układ poziomy, odróżnia je od pionowych kart Oferty =====
   Oferta: karty pionowe na ciemnym tle, zdjęcie u góry.
   Realizacje: pasy poziome na jasnym tle, zdjęcie z boku, duży numer porządkowy.
   Wspólny język (te same promienie, chipy, typografia), inny rytm czytania. */
@media (min-width:1025px){
  /* uklad desktopowy BEZ ZMIAN — siatka kart jak wczesniej.
     Jedyny dodatek: dyskretny numer porzadkowy, ktory nie rusza kompozycji. */
  .rk-tresc{position:relative;}
  .rk-tresc::before{content:attr(data-nr); position:absolute; right:26px; top:20px;
       font-family:var(--mono); font-size:34px; font-weight:500; line-height:1;
       color:rgba(0,120,191,.10); letter-spacing:-0.03em;}
}
/* ===== MOBILE: karuzela ===== */
@media (max-width:1024px){
  .real{display:flex; flex-wrap:nowrap; overflow-x:auto; gap:16px; scroll-snap-type:x mandatory;
       -webkit-overflow-scrolling:touch; padding:4px 0 22px; margin:0 -32px; padding-left:32px; padding-right:32px;
       scrollbar-width:thin;}
  .rk{grid-column:auto !important; flex:0 0 82%; scroll-snap-align:center; max-width:420px;}
  .real::-webkit-scrollbar{height:5px;}
  .real::-webkit-scrollbar-thumb{background:var(--steel-2); border-radius:5px;}
  .karuzela-info{display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11.5px;
       letter-spacing:.13em; text-transform:uppercase; color:#5c666f; margin-top:-8px; margin-bottom:18px;}
  .karuzela-info svg{animation:przesuw-hint 2.6s ease-in-out infinite;}
  @keyframes przesuw-hint{0%,100%{transform:translateX(0);}50%{transform:translateX(6px);}}
}
@media (max-width:640px){
  .real{margin:0 -20px; padding-left:20px; padding-right:20px;}
  .rk{flex:0 0 86%;}
}
@media (min-width:1025px){ .karuzela-info{display:none;} }


/* ===== KLAUZULA RODO przy formularzu =====
   Wg wytycznych UODO dla formularzy kontaktowych stosuje sie KLAUZULE INFORMACYJNA (art. 13 RODO),
   a nie checkbox zgody. Podstawa przetwarzania zapytania ofertowego to art. 6 ust. 1 lit. b RODO
   (czynnosci przed zawarciem umowy), wiec zgoda jest tu podstawa niewlasciwa: nie bylaby dobrowolna,
   skoro bez niej nie da sie wyslac formularza. */
.rodo{border:1px solid var(--steel); border-radius:12px; margin-bottom:22px; background:var(--bg-alt);}
.rodo summary{cursor:pointer; padding:14px 16px; font-family:var(--mono); font-size:11px; letter-spacing:.11em;
     text-transform:uppercase; color:#5c666f; list-style:none; display:flex; justify-content:space-between;
     align-items:center; gap:12px; min-height:48px;}
.rodo summary::-webkit-details-marker{display:none;}
.rodo summary::after{content:'+'; font-family:var(--mono); font-size:17px; color:var(--brand); flex:none;}
.rodo[open] summary::after{content:'–';}
.rodo summary:hover{color:var(--ink);}
.rodo summary:focus-visible{outline:3px solid var(--brand-hi); outline-offset:2px;}
.rodo-tresc{padding:2px 16px 16px; font-size:12.5px; line-height:1.6; color:#4a545d;}
.rodo-tresc p{margin-bottom:11px;}
.rodo-tresc p:last-child{margin-bottom:0;}
.rodo-tresc b{color:var(--ink);}
.rodo-tresc a{color:#00618f; border-bottom:1px solid rgba(0,97,143,.4);}
.rodo-tresc a:hover{border-bottom-color:#00618f;}
.rodo-uwaga{background:#fff5e6; border-left:3px solid #d98324; padding:10px 12px; border-radius:6px;
     font-size:12px; color:#6b4a10;}


/* ===== KOMUNIKATY FORMULARZA ===== */
.hpp-info{display:none; padding:15px 18px; border-radius:12px; margin-bottom:20px; font-size:14.5px; line-height:1.55;}
.hpp-info.jest{display:block;}
.hpp-info.sukces{background:#e8f6ed; border:1px solid #7bc79a; color:#1c5733;}
.hpp-info.blad{background:#fdecea; border:1px solid #e39b95; color:#7a2820;}

/* ====== EFEKTY WEJŚCIA ====== */
.wj{opacity:0; transform:translateY(26px);
    transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.wj.jest{opacity:1; transform:none;}
.o1{transition-delay:.09s;} .o2{transition-delay:.18s;} .o3{transition-delay:.27s;} .o4{transition-delay:.36s;}
html:not(.js) .wj{opacity:1; transform:none;}

/* ====== RESPONSYWNOŚĆ ====== */
@media (max-width:1180px){
  .menu{gap:18px; font-size:14px;}
  .marka .nazwa{font-size:14px;}
  .hero-plakietka{display:none;}
}
@media (max-width:1024px){
  :root{--rytm:96px;}
  .wrap{padding:0 32px;}
  .topbar{padding:0 16px;}
  .menu{position:absolute; top:calc(100% + 10px); left:0; right:0; flex-direction:column; gap:0; display:none;
        background:rgba(255,255,255,.98); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
        border:1px solid var(--steel); border-radius:20px; padding:10px 22px; box-shadow:0 26px 52px -28px rgba(21,46,61,.6);}
  .menu.otwarte{display:flex;}
  .menu a{border-bottom:1px solid var(--steel); font-size:16px; min-height:56px;}
  .menu a:last-child{border-bottom:0;}
  .menu a::after{display:none;}
  .burger{display:flex;}
  .onas-siatka{grid-template-columns:1fr; gap:44px;}
  .onas-foto{aspect-ratio:16/10; max-height:460px;}
  .siatka-3{grid-template-columns:repeat(2,1fr);}
  .loga{grid-template-columns:repeat(3,1fr);}
  .real{grid-template-columns:repeat(4,1fr);}
  .rk{grid-column:span 2;} .rk-duza{grid-column:span 4;}
  .kontakt-siatka{grid-template-columns:1fr; gap:48px;}
  .stopka-siatka{grid-template-columns:1fr 1fr; gap:40px;}
  .hero{padding:150px 0 72px; min-height:auto;}
  .hero-dane{gap:36px;}
  .cta{padding:52px 40px;}
}
@media (max-width:820px){
  .liczby{grid-template-columns:1fr; gap:36px;}
  .hero-dane{grid-template-columns:repeat(3,1fr); gap:20px;}
  .hero-dane .o{font-size:12.5px;}
}
@media (max-width:640px){
  .rurociag{display:none;}
  :root{--rytm:72px; --radius:16px;}
  .wrap{padding:0 20px;}
  .topbar{top:10px; padding:0 12px;}
  .nav{padding:8px 8px 8px 12px; gap:10px;}
  .marka .nazwa{display:none;}
  .marka img{height:36px;}
  .nav-tel{padding:0; width:48px; justify-content:center;}
  .nav-tel .nr{display:none;}
  .jezyki a{padding:0 7px;}
  .siatka-3,.siatka-2{grid-template-columns:1fr;}
  .real{grid-template-columns:1fr;}
  .rk,.rk-duza{grid-column:span 1;}
  .stopka-siatka{grid-template-columns:1fr; gap:32px;}
  .naglowek{margin-bottom:40px;}
  .karta,.formularz,.oferta-tresc,.rk-tresc,.opinia{padding:24px;}
  .dane{padding:6px 22px;}
  .dwa{grid-template-columns:1fr; gap:0;}
  .cta{padding:40px 26px; border-radius:20px;}
  .hero{padding:130px 0 60px;}
  .hero-dane{margin-top:38px; padding-top:26px; gap:14px;}
  .hero-dane .l{font-size:26px;}
  .hero-dane .o{font-size:11.5px;}
  .loga{grid-template-columns:repeat(2,1fr); gap:12px;}
  .logo-pole{min-height:86px; padding:16px;}
  .hero-strzalka{display:none;}
  .lista li{padding-left:28px;}
}

/* ====== USTAWIENIA UŻYTKOWNIKA ====== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  /* wylaczamy TYLKO ruch gwaltowny i sterowany przewijaniem */
  .odslon{clip-path:none !important;} .odslon img{transform:none !important;}
  .rk:hover{transform:none !important;}
  .btn{transform:none !important;}
  .hero-foto{transform:none !important;}
  .hero-strzalka{animation:none;}
  .hero-foto{transform:none !important;}
}