/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{font-size:16px;scroll-behavior:smooth}
@media(max-width:960px){html{font-size:15px}}
@media(max-width:600px){html{font-size:14px}}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#1C1E1B;line-height:1.75;background:#fff}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}

/* ===== LAYOUT ===== */
.wrap{max-width:1160px;margin:0 auto;padding:0 2em}
@media(max-width:600px){.wrap{padding:0 1em}}

/* ===== HEADER ===== */
.hdr{position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(15,36,23,0.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(40,128,77,0.2);transition:background .3s}
.hdr-in{display:flex;align-items:center;justify-content:space-between;height:70px;max-width:1160px;margin:0 auto;padding:0 2em}
.logo{display:flex;align-items:center;gap:.625em;color:#fff}

/* ===== LOGOTYP =====
   Sygnet rysowany wektorowo, napis zwyklym tekstem zlozonym Interem.
   Budynek zostaje zloty na kazdym tle, monogram i napis dziedzicza kolor
   z otoczenia, wiec jedna wersja obsluguje ciemny pasek i jasna wizytowke. */
.lg{display:inline-flex;align-items:center;gap:.8em;line-height:1;font-size:15px;color:inherit}
.lg-znak{height:44px;width:auto;display:block;flex-shrink:0}
.lg-bud{stroke:#C9A452}
.lg-mono{fill:currentColor}
.lg-kreska{width:1px;align-self:stretch;min-height:2.4em;background:currentColor;opacity:.3}
.lg-tekst{display:flex;flex-direction:column;gap:.08em}
.lg-tekst-1,.lg-tekst-2{font-size:1.05em;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.ftr-brand-logo .lg-znak{height:50px}
.ftr-brand-logo .lg{font-size:16px}
@media(max-width:600px){.lg-znak{height:36px}.lg{font-size:13px;gap:.6em}}
.nav{display:flex;align-items:center;gap:.125em;list-style:none}
.nav a{display:block;padding:.5em .875em;color:rgba(255,255,255,.72);font-size:.875rem;font-weight:500;transition:color .2s,background .2s;white-space:nowrap}
.nav a:hover,.nav a.act{color:#fff;background:rgba(40,128,77,.2)}
.nav .nav-cta a{background:#28804D;color:#fff;font-weight:600;padding:.5em 1.25em}
.nav .nav-cta a:hover{background:#1F6B40}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.burger span{display:block;width:24px;height:2px;background:#fff;transition:all .3s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:820px){
  .burger{display:flex}
  .hdr-in{padding:0 1em}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:#0F2417;padding:1em;gap:.25em;border-top:1px solid rgba(40,128,77,.2)}
  .nav.open{display:flex}
  .nav a{padding:.75em 1em}
  .nav .nav-cta{margin-top:.5em}
  .nav .nav-cta a{text-align:center;display:block}
}

/* ===== BUTTONS ===== */
.btn-blue{display:inline-flex;align-items:center;gap:.5em;background:#28804D;color:#fff;font-size:.9375rem;font-weight:700;padding:.875em 2em;transition:background .2s,transform .15s}
.btn-blue:hover{background:#1F6B40;transform:translateY(-2px);color:#fff}
.btn-ghost{display:inline-flex;align-items:center;gap:.5em;background:transparent;color:#fff;font-size:.9375rem;font-weight:600;padding:.875em 2em;border:1px solid rgba(255,255,255,.35);transition:border-color .2s,background .2s,transform .15s}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.07);transform:translateY(-2px);color:#fff}
.btn-outline{display:inline-flex;align-items:center;gap:.5em;background:transparent;color:#28804D;font-size:.9375rem;font-weight:700;padding:.8125em 2em;border:1px solid #28804D;transition:background .2s,color .2s,transform .15s;margin-left:1em;white-space:nowrap}
.btn-outline:hover{background:#28804D;color:#fff;transform:translateY(-2px)}

/* ===== PAGE HERO (podstrony) ===== */
.ph{background:linear-gradient(160deg,#0F2417 0%,#0F2417 100%);padding:9em 0 5em;position:relative;overflow:hidden}
.ph--img{background-size:cover;background-position:center top}
.ph::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 70% 40%,rgba(40,128,77,.08),transparent 55%);pointer-events:none}
@media(max-width:820px){.ph::after{display:none}}
.ph--img::before{top:-6%;left:-6%;right:-6%;bottom:-6%;background:linear-gradient(rgba(8,22,14,.78),rgba(8,22,14,.84)),var(--ph-img,none) center top / cover;animation:ph-zoom 14s ease-out infinite alternate}
@keyframes ph-zoom{from{transform:scale(1)}to{transform:scale(1.08)}}
.ph h1{font-size:clamp(1.875rem,4vw,2.875rem);font-weight:900;color:#fff;line-height:1.1;margin-bottom:1em;max-width:700px;letter-spacing:-.02em}
.ph h1 em{color:#C9A452;font-style:normal}
.ph-lead{font-size:1.0625rem;color:rgba(255,255,255,.75);line-height:1.85;max-width:600px;margin-bottom:2em}
.ph-perks{display:flex;gap:2em;flex-wrap:wrap}
.ph-perk{display:flex;align-items:center;gap:.5em;font-size:.875rem;color:rgba(255,255,255,.6)}
.ph-perk svg{width:15px;height:15px;color:#28804D;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.ph-stats{display:flex;gap:3em;flex-wrap:wrap}
.phs-item{}
.phs-num{font-size:1.75rem;font-weight:900;color:#28804D}
.phs-lbl{font-size:.75rem;color:rgba(255,255,255,.4);margin-top:.2em}
@media(max-width:600px){.ph{padding:7em 0 3em}.ph-perks{flex-direction:column;gap:.875em}.ph-stats{gap:2em}}
.ph .wrap{position:relative;z-index:1}

/* ===== CTA SECTION ===== */
.cta-section{background:#28804D;padding:6em 0;text-align:center;position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:700px;height:400px;background:radial-gradient(ellipse,rgba(0,0,0,.12),transparent 65%);pointer-events:none}
.cta-section::after{content:'';position:absolute;right:0;top:0;bottom:0;width:220px;background-image:url("data:image/svg+xml,%3Csvg width='220' height='300' viewBox='0 0 220 300' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='50' width='70' height='250' stroke='%23D4A336' stroke-width='1.2'/%3E%3Cline x1='1' y1='85' x2='71' y2='85' stroke='%23D4A336' stroke-width='.6'/%3E%3Cline x1='1' y1='120' x2='71' y2='120' stroke='%23D4A336' stroke-width='.6'/%3E%3Cline x1='1' y1='155' x2='71' y2='155' stroke='%23D4A336' stroke-width='.6'/%3E%3Cline x1='1' y1='190' x2='71' y2='190' stroke='%23D4A336' stroke-width='.6'/%3E%3Cline x1='1' y1='225' x2='71' y2='225' stroke='%23D4A336' stroke-width='.6'/%3E%3Crect x='9' y='63' width='12' height='15' stroke='%23D4A336' stroke-width='.6'/%3E%3Crect x='30' y='63' width='12' height='15' stroke='%23D4A336' stroke-width='.6'/%3E%3Crect x='51' y='63' width='12' height='15' stroke='%23D4A336' stroke-width='.6'/%3E%3Crect x='9' y='98' width='12' height='15' stroke='%23D4A336' stroke-width='.6'/%3E%3Crect x='30' y='98' width='12' height='15' stroke='%23D4A336' stroke-width='.6'/%3E%3Crect x='51' y='98' width='12' height='15' stroke='%23D4A336' stroke-width='.6'/%3E%3Crect x='120' y='1' width='90' height='299' stroke='%23D4A336' stroke-width='1.2'/%3E%3Cline x1='120' y1='38' x2='210' y2='38' stroke='%23D4A336' stroke-width='.6'/%3E%3Cline x1='120' y1='75' x2='210' y2='75' stroke='%23D4A336' stroke-width='.6'/%3E%3Cline x1='120' y1='112' x2='210' y2='112' stroke='%23D4A336' stroke-width='.6'/%3E%3Cline x1='120' y1='149' x2='210' y2='149' stroke='%23D4A336' stroke-width='.6'/%3E%3Cline x1='120' y1='186' x2='210' y2='186' stroke='%23D4A336' stroke-width='.6'/%3E%3Cline x1='120' y1='223' x2='210' y2='223' stroke='%23D4A336' stroke-width='.6'/%3E%3Cline x1='120' y1='260' x2='210' y2='260' stroke='%23D4A336' stroke-width='.6'/%3E%3Crect x='130' y='14' width='14' height='17' stroke='%23D4A336' stroke-width='.6'/%3E%3Crect x='156' y='14' width='14' height='17' stroke='%23D4A336' stroke-width='.6'/%3E%3Crect x='182' y='14' width='14' height='17' stroke='%23D4A336' stroke-width='.6'/%3E%3Crect x='130' y='51' width='14' height='17' stroke='%23D4A336' stroke-width='.6'/%3E%3Crect x='156' y='51' width='14' height='17' stroke='%23D4A336' stroke-width='.6'/%3E%3Crect x='182' y='51' width='14' height='17' stroke='%23D4A336' stroke-width='.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center;background-size:contain;pointer-events:none;opacity:.08}
@media(max-width:700px){.cta-section::after{display:none}}
.cta-section h2{font-size:clamp(1.625rem,3vw,2.5rem);font-weight:900;color:#fff;margin-bottom:.875em;letter-spacing:-.02em;position:relative}
.cta-section p{font-size:1.0625rem;color:rgba(255,255,255,.7);margin-bottom:2.5em;max-width:500px;margin-left:auto;margin-right:auto;line-height:1.85;position:relative}
.cta-btns{display:flex;gap:1em;justify-content:center;flex-wrap:wrap;position:relative}
.cta-section .btn-blue{background:#fff;color:#0F2417;box-shadow:0 4px 20px rgba(0,0,0,.18)}
.cta-section .btn-blue:hover{background:#F2F0EB;color:#0F2417;transform:translateY(-2px)}
.cta-section .btn-ghost{border:1.5px solid rgba(255,255,255,.6);color:#fff}
.cta-section .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.12);transform:translateY(-2px)}
.cta-note{font-size:.8125rem;color:rgba(255,255,255,.3);margin-top:1.5em}
@media(max-width:600px){.cta-section{padding:4em 0}.cta-btns{flex-direction:column;align-items:center}}

/* ===== FOOTER ===== */
.ftr{background:#0F2417;color:rgba(255,255,255,.55);padding:5em 0 0;border-top:1px solid rgba(40,128,77,.2)}
.ftr-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:3em;margin-bottom:4em}
.ftr-brand-logo{display:flex;align-items:center;gap:.625em;margin-bottom:1.25em}
.ftr-brand-desc{font-size:.875rem;color:rgba(255,255,255,.4);line-height:1.8;max-width:250px}
.ftr-col-title{font-size:.6875rem;font-weight:700;color:rgba(255,255,255,.35);letter-spacing:.14em;margin-bottom:1.375em}
.ftr-col ul{list-style:none;display:flex;flex-direction:column;gap:.625em}
.ftr-col ul a{color:rgba(255,255,255,.45);font-size:.875rem;transition:color .2s}
.ftr-col ul a:hover{color:#fff}
.ftr-contact{list-style:none;display:flex;flex-direction:column;gap:.875em}
.ftr-contact li{display:flex;align-items:flex-start;gap:.625em;font-size:.875rem;color:rgba(255,255,255,.45)}
.ftr-contact li svg{flex-shrink:0;margin-top:2px;width:14px;height:14px;fill:none;stroke:#28804D;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ftr-contact a{color:rgba(255,255,255,.45);transition:color .2s}
.ftr-contact a:hover{color:#fff}
.ftr-bottom{border-top:1px solid rgba(255,255,255,.06);padding:1.5em 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75em;font-size:.8125rem;color:rgba(255,255,255,.28)}
.ftr-bottom a{color:rgba(255,255,255,.28);transition:color .2s}
.ftr-bottom a:hover{color:#fff}
.ftr-bottom-wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75em;width:100%}
.ftr-bottom-links{display:flex;gap:1.5em}
@media(max-width:900px){.ftr-grid{grid-template-columns:1fr 1fr;gap:2em}}
@media(max-width:600px){.ftr{padding:3.5em 0 0}.ftr-grid{grid-template-columns:1fr;gap:1.75em}.ftr-bottom{flex-direction:column;text-align:center}.ftr-bottom-links{flex-direction:column;gap:.625em;align-items:center}}

/* ===== FADE-IN ===== */
/* Gate na .js, zeby przy wylaczonym albo niedzialajacym JS tresc nie zostala na opacity:0. */
.js .fi{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.js .fi.vis{opacity:1;transform:none}
.fi-d1{transition-delay:.1s}
.fi-d2{transition-delay:.2s}
.fi-d3{transition-delay:.3s}
.fi-d4{transition-delay:.4s}
.fi-d5{transition-delay:.5s}
.fi-d6{transition-delay:.6s}
.fi-d7{transition-delay:.7s}
.fi-d8{transition-delay:.8s}
.fi-d9{transition-delay:.9s}
@media(prefers-reduced-motion:reduce){.js .fi{opacity:1;transform:none;transition:none}}

/* ===== INDEX: HERO ===== */
.hero{min-height:100vh;background:#0F2417;display:flex;flex-direction:column;padding-top:70px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 22% 60%,rgba(40,128,77,.07),transparent 48%);pointer-events:none;z-index:0}
.hero-inner{flex:1;display:flex;align-items:center;padding:4.5em 0;position:relative;z-index:2}
.hero-inner .wrap{width:100%;max-width:100%;padding-left:clamp(2em,7vw,100px);padding-right:0}
/* Tekst trzyma się lewej strony, ograniczony do ~500px */
.hero-content{max-width:500px;position:relative;z-index:2}
/* ─── Tag ─── */
/* ─── Heading ─── */
.hero h1{font-size:clamp(2.5rem,4vw,3.875rem);font-weight:900;color:#fff;line-height:1.08;margin-bottom:1.125em;letter-spacing:-.02em}
.hero h1 em{color:#C9A84C;font-style:italic}
/* ─── Lead ─── */
.hero-lead{font-size:1rem;color:rgba(255,255,255,.55);line-height:1.8;max-width:420px;margin-bottom:2.75em}
/* ─── Buttons ─── */
.hero-btns{display:flex;gap:2.5em;align-items:center;flex-wrap:wrap}
.btn-gold-solid{display:inline-flex;align-items:center;background:#C9A452;color:#0F2417;font-size:.75rem;font-weight:700;letter-spacing:.14em;padding:.9em 2.25em;transition:background .2s,transform .15s}
.btn-gold-solid:hover{background:#B89040;transform:translateY(-2px);color:#0F2417}
.btn-text-arrow{display:inline-flex;align-items:center;gap:.625em;color:rgba(255,255,255,.75);font-size:.8125rem;font-weight:700;letter-spacing:.12em;transition:color .15s,gap .2s}
.btn-text-arrow:hover{color:#fff;gap:.9em}
.btn-text-arrow svg{flex-shrink:0;transition:transform .2s}
.btn-text-arrow:hover svg{transform:translateX(3px)}
/* ─── Dekoracyjne kontury budynków — za kołem, między tekstem a kołem ─── */
/* ─── Arch po prawej — lewa strona zaokrąglona jak łuk, prawa prawa prawie płaska ─── */
.hero-arc{position:absolute;right:-20px;top:50%;transform:translateY(-52%);width:55vw;aspect-ratio:1/1;border-radius:50% 12px 12px 50%;overflow:hidden;border:2px solid rgba(212,163,54,.35);z-index:1;box-shadow:0 0 55px 18px rgba(212,163,54,.18),0 0 120px 55px rgba(212,163,54,.09),inset 0 0 40px rgba(212,163,54,.04)}
.hero-arc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.62);will-change:transform,opacity}
/* Segmenty lukow biegnace po obreczy zdjecia. Pudelko pokrywa sie co do piksela
   z .hero-arc, wiec kolo o promieniu 50 w ukladzie 0 0 100 100 lezy na krawedzi kadru. */
.hero-luki{position:absolute;right:-20px;top:50%;transform:translateY(-52%);width:55vw;aspect-ratio:1/1;z-index:2;pointer-events:none}
.hero-luki svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hero-luki circle{fill:none;stroke:#D4A336;stroke-linecap:round;transform-origin:50% 50%}
.hero-luki .hl1{stroke-width:.5;opacity:.8;stroke-dasharray:22 78;animation:hl-obrot 34s linear infinite}
.hero-luki .hl2{stroke-width:.34;opacity:.55;stroke-dasharray:12 88;animation:hl-obrot-wstecz 46s linear infinite}
.hero-luki .hl3{stroke-width:.24;opacity:.4;stroke-dasharray:30 70;animation:hl-obrot 58s linear infinite}
.hero-luki .hl4{stroke-width:.16;opacity:.22;stroke-dasharray:8 92;animation:hl-obrot-wstecz 72s linear infinite}
/* Piata kreska. Pozostale obracaja sie wolno i najdluzej stoja poza kadrem po
   prawej, wiec przy wejsciu na strone ruch bywa niewidoczny. Ta jedzie tym samym
   ruchem co reszta, w kolko i ze stala widocznoscia, bez pojawiania sie i znikania.
   Rozni ja tylko punkt startu i tempo.
   Kolo zaczyna sie na godzinie trzeciej i idzie zgodnie z ruchem wskazowek, wiec
   przy pathLength 100 dol wypada na 25, lewa krawedz na 50, a gora na 75.
   Przesuniecie minus dwadziescia piec stawia kreske na dole, a obrot zgodny
   z ruchem wskazowek prowadzi ja stamtad w gore po lewej krawedzi zdjecia,
   czyli po stronie tekstu. */
.hero-luki .hl5{stroke-width:.9;opacity:.85;stroke-dasharray:13 87;stroke-dashoffset:-25;animation:hl-obrot 16s linear infinite}
@keyframes hl-obrot{to{transform:rotate(360deg)}}
@keyframes hl-obrot-wstecz{to{transform:rotate(-360deg)}}
@media(prefers-reduced-motion:reduce){.hero-luki circle{animation:none}}
.hero-arc img:nth-child(1){animation:hero-kb1 14s ease-in-out infinite}
.hero-arc img:nth-child(2){animation:hero-kb2 14s ease-in-out infinite,hero-crossfade 14s ease-in-out infinite}
@keyframes hero-kb1{0%{transform:scale(1) translate(0%,0%)}100%{transform:scale(1.13) translate(-2%,1%)}}
@keyframes hero-kb2{0%{transform:scale(1.11) translate(2%,-1%)}100%{transform:scale(1) translate(0%,0%)}}
@keyframes hero-crossfade{0%,7%{opacity:0}40%,60%{opacity:1}93%,100%{opacity:0}}
.hero-arc::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,rgba(8,22,14,.55) 0%,rgba(8,22,14,.1) 60%,transparent 100%);pointer-events:none;z-index:1}
.hero-arc .photo-ph{position:absolute;inset:0;border:none;background:rgba(255,255,255,.05)}
/* ─── Photo placeholder ─── */
.photo-ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.875em;background:rgba(255,255,255,.04);border:2px dashed rgba(40,128,77,.35);position:absolute;inset:0}
.photo-ph-icon{opacity:.4}
.photo-ph-icon svg{width:48px;height:48px;fill:none;stroke:#96D4AC;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.photo-ph-lbl{font-size:.8125rem;font-weight:600;color:rgba(255,255,255,.4);letter-spacing:.1em}
.photo-ph-sub{font-size:.75rem;color:rgba(255,255,255,.25)}
/* photo placeholder — jasne tła */
.photo-ph--light{background:#EDE8DE;border:2px dashed #DEDEDB;position:static;width:100%;height:100%}
.photo-ph--light .photo-ph-icon{opacity:.5}
.photo-ph--light .photo-ph-icon svg{stroke:#DEDEDB}
.photo-ph--light .photo-ph-lbl{color:#8C8A85}
.photo-ph--light .photo-ph-sub{color:#B0AAA0}
/* ─── Hero bottom bar — z-index:2 i tło żeby przykrywało arch ─── */
.hero-bar{border-top:1px solid rgba(255,255,255,.1);position:relative;z-index:2;background:#0F2417}
.hero-bar-inner{max-width:1160px;margin:0 auto;padding:0 2em;display:grid;grid-template-columns:repeat(4,1fr)}
.hero-stat{padding:1.75em 2em;border-right:1px solid rgba(255,255,255,.08)}
.hero-stat:first-child{padding-left:0}
.hero-stat:last-child{border-right:none}
.hero-stat-num{font-size:2.25rem;font-weight:900;color:#C9A452;display:block;line-height:1;margin-bottom:.35em}
.hero-stat-lbl{font-size:.875rem;color:rgba(255,255,255,.72);line-height:1.4}
@media(max-width:1100px){.hero-arc{width:54vw}}
/* Na telefonie zdjecie nie znika, tylko staje sie tlem calego hero.
   Wczesniej bylo chowane i zostawal sam tekst na zielonym tle. */
@media(max-width:820px){
  .hero{min-height:auto}
  .hero-luki{display:none}
  .hero-content{max-width:100%}
  .hero-arc{right:0;top:0;bottom:0;left:0;width:auto;height:auto;aspect-ratio:auto;transform:none;border-radius:0;border:none;box-shadow:none;z-index:0}
  .hero-arc img{filter:brightness(.4)}
  .hero-arc::after{background:linear-gradient(to bottom,rgba(8,22,14,.82) 0%,rgba(8,22,14,.7) 45%,rgba(8,22,14,.92) 100%)}
  .hero-inner{padding:5em 0 4em}
  .hero-inner .wrap{padding-left:2em;padding-right:2em}
}
@media(max-width:900px){.hero-bar-inner{grid-template-columns:repeat(2,1fr)}.hero-stat{padding:1.25em 1.5em}.hero-stat:nth-child(2){border-right:none}.hero-stat:first-child{padding-left:1.5em}}
@media(max-width:600px){.hero-inner{padding:3.5em 0 2.5em}.hero-inner .wrap{padding-left:1em;padding-right:1em}.hero h1{font-size:clamp(1.875rem,8vw,2.5rem)}.hero-btns{flex-direction:column;align-items:stretch;gap:1em}.hero-btns .btn-gold-solid{text-align:center}.hero-bar-inner{grid-template-columns:repeat(2,1fr)}.hero-stat{padding:1.25em 1em}.hero-stat:first-child{padding-left:1em}.hero-stat-num{font-size:1.75rem}}

/* ===== INDEX: LOGOS ===== */
/* ===== ZAUFALI NAM, karuzela logotypow =====
   Wczesniej byly to same nazwy firm pisane tekstem. Teraz prawdziwe logotypy
   pobrane z witryn klientow, jadace w petli. Tasma zawiera ten sam zestaw dwa
   razy, wiec przesuniecie o polowe jej szerokosci wraca na pozycje startowa
   i sklejenie jest niewidoczne. Bez JavaScriptu, samym CSS. */
.zaufali{background:#fff;padding:3.5em 0 3.25em;border-top:1px solid #DEDEDB;border-bottom:1px solid #DEDEDB}
.zaufali-hdr{text-align:center;margin-bottom:2.5em}
.zaufali-hdr h2{font-size:clamp(1.25rem,2.2vw,1.5rem);font-weight:800;color:#1C1E1B;line-height:1.15;letter-spacing:-.02em}
.zaufali-hdr h2::after{content:'';display:block;width:52px;height:3px;background:linear-gradient(90deg,#D4A336,#C9A452);margin:.7em auto 0}
.zaufali-hdr p{font-size:.9375rem;color:#5D605A;line-height:1.8;max-width:560px;margin:.875em auto 0}
.zaufali-okno{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.zaufali-tasma{display:flex;width:max-content;animation:zaufali-jazda 48s linear infinite}
.zaufali-okno:hover .zaufali-tasma{animation-play-state:paused}
.zaufali-grupa{display:flex;align-items:center;gap:3.5em;padding-right:3.5em}
.zaufali-poz{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:150px;height:62px;filter:grayscale(1);opacity:.6;transition:filter .3s,opacity .3s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.zaufali-poz:hover{filter:grayscale(0);opacity:1;transform:translateY(-4px)}
.zaufali-poz img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@keyframes zaufali-jazda{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:600px){
  .zaufali{padding:2.5em 0}
  .zaufali-hdr{margin-bottom:1.75em}
  .zaufali-grupa{gap:2.25em;padding-right:2.25em}
  .zaufali-poz{width:112px;height:50px}
}
/* Bez ruchu tasma staje i zwija sie w wysrodkowany rzad, a duplikat znika,
   zeby czytnik ekranu i oko nie dostaly tej samej listy dwa razy. */
@media(prefers-reduced-motion:reduce){
  .zaufali-tasma{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .zaufali-grupa{flex-wrap:wrap;justify-content:center;padding-right:0;gap:2em}
  .zaufali-grupa+.zaufali-grupa{display:none}
  .zaufali-okno{-webkit-mask-image:none;mask-image:none}
  .zaufali-poz{transition:none;filter:grayscale(0);opacity:.85}
  .zaufali-poz:hover{transform:none}
}

/* ===== INDEX: PROBLEMS ===== */
.problems{background:#F5F6F4;padding:6em 0;border-top:1px solid #DEDEDB}
.prob-header{max-width:680px;margin-bottom:3.5em}
.prob-header h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:800;color:#1C1E1B;line-height:1.15;margin-bottom:.875em;letter-spacing:-.02em}
.prob-header p{font-size:.9375rem;color:#5D605A;line-height:1.8}
.prob-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5em}
.prob-card{background:#fff;border:1px solid #DEDEDB;border-top:3px solid #DEDEDB;padding:2em;display:flex;flex-direction:column;transition:border-top-color .2s}
.prob-card:hover{border-top-color:#28804D}
.prob-card-metric{font-size:3.75rem;font-weight:900;color:#28804D;line-height:1;letter-spacing:-.04em;margin-bottom:.2em}
.prob-card-metric-lbl{font-size:.6875rem;font-weight:700;letter-spacing:.12em;color:#8C8A85;margin-bottom:1.75em;padding-bottom:1.5em;border-bottom:1px solid #EAEAEA}
.prob-card h3{font-size:1rem;font-weight:800;color:#1C1E1B;margin-bottom:.625em}
.prob-card-body{font-size:1rem;color:#3D4039;line-height:1.85;flex:1;margin-bottom:.5em}
.prob-card-fix{background:#F5F6F4;border-left:3px solid #28804D;padding:.875em 1em;margin-top:auto}
.prob-card-fix-lbl{font-size:.6rem;font-weight:700;letter-spacing:.14em;color:#28804D;margin-bottom:.375em}
.prob-card-fix-text{font-size:.8125rem;color:#5D605A;line-height:1.65}
@media(max-width:900px){.prob-cards{grid-template-columns:1fr}}
@media(max-width:600px){.problems{padding:4em 0}.prob-card{padding:1.5em}}

/* ===== INDEX: SERVICES (cards) ===== */
.services{background:#fff;padding:6em 0;border-top:1px solid #DEDEDB}
.sec-hdr h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:800;color:#1C1E1B;line-height:1.15;margin-bottom:0;letter-spacing:-.02em}
.sec-hdr{margin-bottom:0}
.srv-intro{display:grid;grid-template-columns:1fr 1fr;gap:4em;align-items:end;margin-bottom:3.5em}
.srv-intro-desc{font-size:.9375rem;color:#5D605A;line-height:1.8}
.srv-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5em}
/* Subgrid wyrownuje tytul, opis, liste i stopke miedzy wszystkimi kartami w rzedzie.
   Bez tego kazda karta uklada sie sama i teksty stoja na roznych wysokosciach. */
.srv-card{grid-row:span 5;display:grid;grid-template-rows:subgrid;border:1px solid #DEDEDB;background:#fff;transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .45s cubic-bezier(.34,1.56,.64,1)}
.srv-card-body{grid-row:span 4;display:grid;grid-template-rows:subgrid;padding:1.75em;gap:0}
@supports not (grid-template-rows:subgrid){
  .srv-card{grid-row:auto;display:flex;flex-direction:column}
  .srv-card-body{grid-row:auto;display:flex;flex-direction:column;flex:1}
  .srv-card-desc{min-height:7.5em}
}
/* Plakietka w prawym gornym rogu kadru, ikona w lewym dolnym. Plakietka MUSI
   byc bezposrednim dzieckiem .srv-card-top, bo tylko ten element ma
   position:relative na calej szerokosci kadru. Wczesniej lezala w srodku
   .srv-card-top-right, czyli w pudelku wielkosci samej ikony, wiec kotwiczyla
   sie do rogu ikony i wychodzila poza karte. */
.srv-card-top{background:#0F2417;padding:1.5em;min-height:120px;display:flex;justify-content:flex-start;align-items:flex-end;position:relative;overflow:hidden}
.srv-card-top-right{position:relative;z-index:1;display:flex;align-items:flex-end}
.srv-badge-top{position:absolute;top:0;right:0;z-index:3;font-size:.625rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:#C9A452;color:#0F2417;padding:.55em .9em;white-space:nowrap}
.srv-badge-top--gold{background:#C9A452;color:#0F2417}
.srv-card-desc{font-size:1rem;color:#3D4039;line-height:1.85;margin-bottom:1.25em}
.srv-card-list{list-style:none;display:flex;flex-direction:column;gap:.5em;margin-bottom:1.5em;padding-bottom:1.5em;border-bottom:1px solid #EAEAEA;align-self:start}
.srv-card-foot{display:flex;align-items:center;justify-content:space-between;gap:.75em;align-self:end}
@media(max-width:1000px){.srv-cards{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.srv-cards{grid-template-columns:1fr;gap:1.25em}.srv-card{grid-row:auto;display:flex;flex-direction:column}.srv-card-body{grid-row:auto;display:flex;flex-direction:column;flex:1}.srv-card-desc{min-height:0}.srv-intro{grid-template-columns:1fr;gap:1.25em}}
@media(max-width:600px){.services{padding:2em 0}.srv-card-top{padding:1em;min-height:96px}.srv-card-body{padding:1em}}
.srv-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.08)}
/* Karta na pelna szerokosc rzedu. Przy siedmiu uslugach w siatce trojkolumnowej
   ostatnia zostawalaby sama w rzedzie i robila dokladnie te pusta polowe sekcji,
   ktorej nie chcemy. Wychodzi z subgrid, bo rzadzi sie wlasnym ukladem. */
.srv-card--szeroka{grid-column:1/-1;grid-row:auto;display:grid;grid-template-columns:260px minmax(0,1fr);grid-template-rows:auto}
.srv-card--szeroka .srv-card-top{min-height:100%;align-items:flex-start}
.srv-card--szeroka .srv-card-body{grid-row:auto;display:flex;flex-direction:column;gap:0}
.srv-card--szeroka .srv-card-list{flex-direction:row;flex-wrap:wrap;gap:.5em 2em;align-self:stretch}
.srv-card--szeroka .srv-card-list li{flex:0 0 auto}
@media(max-width:760px){
  .srv-card--szeroka{grid-template-columns:1fr}
  .srv-card--szeroka .srv-card-list{flex-direction:column;gap:.5em}
}
/* Po zdjeciu numeru zostal jeden element, wiec kotwiczymy go do prawej,
   inaczej ikona wedruje na lewa strone kadru. */
.srv-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3;filter:saturate(.55);transition:opacity .45s cubic-bezier(.34,1.56,.64,1),transform .45s cubic-bezier(.34,1.56,.64,1);z-index:0}
.srv-card:hover .srv-photo{opacity:.46;transform:scale(1.06)}
@media(prefers-reduced-motion:reduce){.srv-photo{transition:none}.srv-card:hover .srv-photo{transform:none}}
/* Plakietka siedzi w prawym gornym rogu i nie spycha ikony w dol. */
.srv-card-icon{width:44px;height:44px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.srv-card-icon svg{width:22px;height:22px;fill:none;stroke:#96D4AC;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.srv-card-title{font-size:1.0625rem;font-weight:800;color:#1C1E1B;line-height:1.3;margin-bottom:.625em;letter-spacing:-.01em}
.srv-card-list li{font-size:.9375rem;color:#3D4039;display:flex;align-items:baseline;gap:.625em}
.srv-card-list li::before{content:'—';color:#28804D;flex-shrink:0;font-weight:700}
.srv-card-foot a{font-size:.875rem;font-weight:700;color:#28804D;display:inline-flex;align-items:center;gap:.4em;transition:gap .2s;white-space:nowrap}
.srv-card-foot a:hover{gap:.75em}
.srv-card-foot a svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.srv-badge-foot{font-size:.6875rem;font-weight:600;letter-spacing:.08em;color:#8C8A85;white-space:nowrap}
.srv-cta-row{margin-top:3em;display:flex;justify-content:center}

/* ===== INDEX: STATS ===== */
.stats{background:#0F2417;padding:5em 0;border-top:1px solid rgba(40,128,77,.2);border-bottom:1px solid rgba(40,128,77,.2)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-left:1px solid rgba(40,128,77,.4)}
.stat-item{padding:2.5em 2em;border-right:1px solid rgba(40,128,77,.4)}
.stat-num{font-size:clamp(2.25rem,4.5vw,3.5rem);font-weight:900;color:#28804D;line-height:1;margin-bottom:.35em;display:block}
.stat-lbl{font-size:.875rem;color:rgba(255,255,255,.45);line-height:1.5}
@media(max-width:900px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.stats{padding:3.5em 0}.stat-item{padding:1.75em 1.25em}}

/* ===== INDEX: HOW WE WORK ===== */
.howwework{background:#fff;padding:6em 0;border-top:1px solid #DEDEDB}
/* Prawa kolumna zdjeta razem z wymyslona karta pomiaru, filary ida na pelna szerokosc. */
.hww-grid{display:block}
.hww-left h2,.hww-left>p{max-width:760px}
.hww-left h2{font-size:clamp(1.5rem,3vw,2.125rem);font-weight:800;color:#1C1E1B;line-height:1.15;margin-bottom:1em;letter-spacing:-.02em}
.hww-left p{font-size:.9375rem;color:#5D605A;line-height:1.8;margin-bottom:2em}
.hww-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1em}
@media(max-width:900px){.hww-pillars{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.hww-pillars{grid-template-columns:1fr}}
.hww-pill{background:#F5F6F4;padding:1.5em;border-left:3px solid transparent;transition:background .2s,border-color .2s}
.hww-pill:hover{background:#EAEAEA;border-left-color:#28804D}
.hww-pill-icon{width:40px;height:40px;background:#E8F5EE;display:flex;align-items:center;justify-content:center;margin-bottom:.875em}
.hww-pill-icon svg{width:20px;height:20px;color:#28804D;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hww-pill-title{font-size:.9375rem;font-weight:700;color:#1C1E1B;margin-bottom:.3em}
.hww-pill-desc{font-size:.8125rem;color:#5D605A;line-height:1.65}
@media(max-width:1050px){.tv-header{flex-wrap:wrap}.tv-score-row{margin-left:0;width:100%;justify-content:space-between;gap:.75em}}
@media(prefers-reduced-motion:reduce){.tv-bar-fill{transition:none}}
@media(max-width:900px){.hww-grid{grid-template-columns:1fr;gap:3em}.hww-right{display:none}}
@media(max-width:600px){.howwework{padding:4em 0}.hww-pillars{grid-template-columns:1fr}}

/* ===== INDEX: PROCESS ===== */
.process{background:#F5F6F4;padding:6em 0;border-top:1px solid #DEDEDB;border-bottom:1px solid #DEDEDB}
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25em;margin-top:3em}
.proc-step{padding:2.25em 1.75em;background:#fff;border-top:3px solid #28804D;position:relative}
.proc-num{width:44px;height:44px;background:#28804D;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:900;margin:0 0 1.25em;position:relative}
.proc-title{font-size:.9375rem;font-weight:700;color:#1C1E1B;margin-bottom:.5em}
.proc-desc{font-size:.875rem;color:#5D605A;line-height:1.65}
@media(max-width:768px){.proc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.proc-grid{grid-template-columns:1fr}}
@media(max-width:600px){.process{padding:4em 0}.proc-step{padding:1.75em 1.25em}}

/* ===== INDEX: TESTIMONIAL ===== */
@media(max-width:600px){.testi-inner{border-left:none;padding-left:0;border-top:3px solid #28804D;padding-top:2em}}

/* ===== INDEX: LEAD MAGNET ===== */
.leadmag{background:#fff;padding:6em 0;border-top:1px solid #DEDEDB}
.lm-box{background:#0F2417;padding:3.5em;display:grid;grid-template-columns:1fr 1fr;gap:4em;align-items:center;border-left:3px solid #28804D}
.lm-box h2{font-size:clamp(1.375rem,2.5vw,1.875rem);font-weight:800;color:#fff;line-height:1.2;margin-bottom:.875em;letter-spacing:-.02em}
.lm-box p{font-size:.9375rem;color:rgba(255,255,255,.55);line-height:1.8}
.lm-checklist{list-style:none;display:flex;flex-direction:column;gap:.625em;margin-top:1.375em}
.lm-checklist li{display:flex;align-items:flex-start;gap:.75em;font-size:.875rem;color:rgba(255,255,255,.6)}
.lm-checklist li::before{content:'✓';width:18px;height:18px;background:rgba(40,128,77,.25);display:inline-flex;align-items:center;justify-content:center;font-size:.625rem;font-weight:800;color:#28804D;flex-shrink:0;margin-top:.1em}
.lm-form{background:rgba(255,255,255,.04);border:1px solid rgba(40,128,77,.25);padding:2em}
.lm-form-title{font-size:1rem;font-weight:700;color:#fff;margin-bottom:1.375em}
.lm-input{width:100%;padding:.8em 1em;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;font-family:inherit;font-size:.9375rem;outline:none;transition:border-color .2s;margin-bottom:.875em}
.lm-input::placeholder{color:rgba(255,255,255,.3)}
.lm-input:focus{border-color:#28804D}
.lm-submit{width:100%;background:#28804D;color:#fff;border:none;padding:.875em;font-size:.9375rem;font-weight:700;cursor:pointer;transition:background .2s;font-family:inherit}
.lm-submit:hover{background:#1F6B40}
.lm-privacy{font-size:.75rem;color:rgba(255,255,255,.28);text-align:center;margin-top:.875em}
@media(max-width:900px){.lm-box{grid-template-columns:1fr;gap:2.5em;padding:2em}}
@media(max-width:600px){.leadmag{padding:4em 0}.lm-box{padding:1.5em}}

/* ===== FORMS (globalne) ===== */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.25em}
.form-group{display:flex;flex-direction:column;gap:.5em;margin-bottom:1.25em}
.form-label{font-size:.8125rem;font-weight:700;color:#1C1E1B;letter-spacing:.01em}
.form-label .req{color:#EF4444;margin-left:.2em}
.form-input,.form-select,.form-textarea{width:100%;padding:.75em 1em;border:1px solid #DEDEDB;background:#fff;font-family:inherit;font-size:.9375rem;color:#1C1E1B;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;border-radius:0}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:#28804D;box-shadow:0 0 0 3px rgba(40,128,77,.1)}
.form-input::placeholder,.form-textarea::placeholder{color:#B0AAA0}
.form-textarea{min-height:130px;resize:vertical;line-height:1.6}
.form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235D605A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1em center;padding-right:2.5em;cursor:pointer}
.form-privacy{display:flex;align-items:flex-start;gap:.75em;margin:1.5em 0 1.75em}
.form-privacy input[type=checkbox]{width:18px;height:18px;flex-shrink:0;margin-top:.15em;accent-color:#28804D;cursor:pointer}
.form-privacy label{font-size:.8125rem;color:#5D605A;line-height:1.6;cursor:pointer}
.form-privacy a{color:#28804D;text-decoration:underline}
.btn-submit{width:100%;padding:1em 2em;background:#28804D;color:#fff;border:none;font-family:inherit;font-size:1rem;font-weight:800;letter-spacing:.01em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.75em;transition:background .2s}
.btn-submit:hover{background:#1F6B40}
.btn-submit svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.form-note{text-align:center;font-size:.75rem;color:#8C8A85;margin-top:.875em}
.form-success{display:none;background:#F0FDF4;border:1px solid #A7D9B8;padding:1.5em;margin-bottom:1.5em}
.form-success h3{font-size:1rem;font-weight:800;color:#28804D;margin-bottom:.375em}
.form-success p{font-size:.9375rem;color:#3D4039}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}

/* ===== FAQ ACCORDION (współdzielony) ===== */
.faq-item{border-bottom:1px solid #DEDEDB}
.faq-item:first-child{border-top:1px solid #DEDEDB}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:1.25em 0;cursor:pointer;font-size:.9375rem;font-weight:700;color:#1C1E1B;background:none;border:none;width:100%;text-align:left;font-family:inherit;transition:color .2s}
.faq-q:hover,.faq-item.open .faq-q{color:#28804D}
.faq-q svg{flex-shrink:0;width:18px;height:18px;fill:none;stroke:#28804D;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.faq-item.open .faq-q svg{transform:rotate(180deg)}
/* Bez JS odpowiedzi zostaja widoczne, bo przycisk sam nic nie rozwinie.
   Chowanie i animacja wysokosci wchodza dopiero pod klasa .js na <html>.
   Padding siedzi na wewnetrznym .faq-a-in, ktory dokłada skrypt, bo przy
   wysokosci zero wlasny padding kontenera zostawia widoczny pasek. */
.faq-a{padding:0 0 1.25em;font-size:.9375rem;color:#3D4039;line-height:1.85}
html.js .faq-a{height:0;padding:0;overflow:hidden;transition:height .34s cubic-bezier(.4,0,.2,1)}
html.js .faq-a-in{padding:0 0 1.25em}
@media(prefers-reduced-motion:reduce){
  html.js .faq-a{transition:none}
  .faq-q svg{transition:none}
}

/* ===== OFERTA: TRUST STRIP ===== */

/* ===== PODSTRONA OFERTOWA =====
   Jeden uklad dla szesciu podstron pod rozdzielone frazy. Kazda ma wlasny
   adres, tytul, opis i adres kanoniczny, wiec konkuruje w wyszukiwarce
   osobno, czego sekcja z kotwica na jednej stronie nie potrafi. */
.usl-dlakogo{background:#fff;padding:5em 0;border-bottom:1px solid #DEDEDB}
.usl-dk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25em}
.usl-dk-karta{background:#F5F6F4;border-left:3px solid #C9A452;padding:1.75em;transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .45s cubic-bezier(.34,1.56,.64,1)}
.usl-dk-karta:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(40,128,77,.12)}
.usl-dk-tytul{font-size:1rem;font-weight:800;color:#1C1E1B;line-height:1.3;margin-bottom:.625em}
.usl-dk-opis{font-size:.9375rem;color:#3D4039;line-height:1.75}

.usl-zakres{background:#fff;padding:5em 0;border-bottom:1px solid #DEDEDB}
.usl-zakres-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:4em;align-items:start}
.usl-zakres-tekst h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:800;color:#1C1E1B;line-height:1.15;letter-spacing:-.02em}
.usl-zakres-tekst p{font-size:1rem;color:#3D4039;line-height:1.85;margin:1.25em 0 2em;max-width:52ch}
.usl-zakres-lista{list-style:none;display:flex;flex-direction:column;gap:0;border-top:1px solid #DEDEDB}
.usl-zakres-lista li{display:flex;align-items:flex-start;gap:.9em;font-size:.9375rem;color:#3D4039;line-height:1.7;padding:1em 0;border-bottom:1px solid #EAEAEA}
.usl-zakres-lista li::before{content:'';flex-shrink:0;width:9px;height:2px;margin-top:.72em;background:#28804D}
.usl-zakres-lista a{color:#28804D;font-weight:600;border-bottom:1px solid rgba(40,128,77,.35)}
.usl-zakres-lista a:hover{color:#1F6B40;border-bottom-color:#1F6B40}

.usl-faq{background:#F5F6F4;padding:5em 0;border-bottom:1px solid #DEDEDB}
.usl-faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:4em;align-items:start}
.usl-faq-lewa h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:800;color:#1C1E1B;line-height:1.15;letter-spacing:-.02em}
.usl-faq-lewa p{font-size:.9375rem;color:#5D605A;line-height:1.8;margin-top:1.25em}
.usl-faq-lewa a{color:#28804D;font-weight:700}

.usl-powiazane{background:#fff;padding:5em 0}
.usl-pow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25em}
.usl-pow-karta{display:flex;flex-direction:column;gap:.75em;background:#fff;border:1px solid #DEDEDB;padding:1.75em;transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .45s cubic-bezier(.34,1.56,.64,1),border-color .45s cubic-bezier(.34,1.56,.64,1)}
.usl-pow-karta:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(40,128,77,.12);border-color:#C9A452}
.usl-pow-etykieta{font-size:.6875rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8C8A85}
.usl-pow-tytul{font-size:1rem;font-weight:700;color:#1C1E1B;line-height:1.4;flex:1}
.usl-pow-dalej{display:inline-flex;align-items:center;gap:.4em;font-size:.875rem;font-weight:700;color:#28804D;transition:gap .2s}
.usl-pow-karta:hover .usl-pow-dalej{gap:.75em}
.usl-pow-dalej svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

@media(prefers-reduced-motion:reduce){
  .usl-dk-karta,.usl-pow-karta{transition:none}
  .usl-dk-karta:hover,.usl-pow-karta:hover{transform:none}
}
@media(max-width:1000px){
  .usl-dk-grid,.usl-pow-grid{grid-template-columns:1fr 1fr}
  .usl-zakres-grid,.usl-faq-grid{grid-template-columns:1fr;gap:2em}
}
@media(max-width:660px){.usl-dk-grid,.usl-pow-grid{grid-template-columns:1fr}}
@media(max-width:600px){
  .usl-dlakogo,.usl-zakres,.usl-faq,.usl-powiazane{padding:2em 0}
  .usl-dk-karta,.usl-pow-karta{padding:1em}
}

/* ===== OFERTA, TABELA PORÓWNAWCZA =====
   Jedyna tabela w serwisie. Wchodzi tutaj, bo tresc realnie zestawia szesc
   opcji wedlug tych samych kryteriow, a to jest jedyny kontekst, w ktorym
   tabela ma sens. Szeroka tresc przewija sie we wlasnym oknie, zeby strona
   nigdy nie przewijala sie w poziomie. */
.of-porownanie{background:#F5F6F4;padding:5em 0;border-bottom:1px solid #DEDEDB}
/* Zestawienie rozwiazan. Wiersze sa osobnymi kartami zamiast siatki w ramce,
   naglowek nie ma ciemnego paska, tylko zlota linie pod etykietami. */
.of-tabela-okno{overflow-x:auto}
.of-tabela{width:100%;border-collapse:separate;border-spacing:0 .85em;min-width:760px;text-align:left}
.of-tabela thead th{padding:0 1.5em .8em;font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#28804D;border-bottom:2px solid #C9A452;white-space:nowrap}
.of-tabela thead th:first-child{width:32%}
.of-tabela tbody th,.of-tabela tbody td{background:#fff;padding:1.4em 1.5em;vertical-align:top;border-top:1px solid #DEDEDB;border-bottom:1px solid #DEDEDB;transition:border-color .3s,background .3s}
.of-tabela tbody th{border-left:1px solid #DEDEDB;box-shadow:inset 3px 0 0 #C9A452;font-weight:800;color:#1C1E1B;font-size:.9375rem;line-height:1.4}
.of-tabela tbody td:last-child{border-right:1px solid #DEDEDB}
.of-tabela tbody tr:hover th,.of-tabela tbody tr:hover td{border-color:#28804D;background:#FAFCFA}
.of-tabela-glowa{display:flex;align-items:center;gap:.85em}
.of-tabela-nr{display:inline-flex;align-items:center;justify-content:center;width:2.1em;height:2.1em;flex-shrink:0;background:#0F2417;color:#C9A452;font-size:.75rem;font-weight:800;letter-spacing:.04em}
.of-tabela tbody th a{color:#1C1E1B;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.of-tabela tbody th a:hover{color:#28804D;border-bottom-color:#28804D}
.of-tabela td{font-size:.9375rem;color:#3D4039;line-height:1.7}
@media(max-width:600px){.of-porownanie{padding:2em 0}.of-tabela th,.of-tabela td{padding:1em}}

/* ===== OFERTA, SPIS BOCZNY I OPISY =====
   Uklad z przyklejonym spisem po lewej zamiast szesciu jednakowych sekcji
   naprzemiennych. Czytelnik caly czas widzi, gdzie jest i co jeszcze zostalo.
   Aktywna pozycje zaznacza skrypt przez IntersectionObserver, ale bez niego
   spis dalej dziala jako zwykle kotwice. */
.of-uslugi{background:#fff;padding:5em 0}
.of-uslugi-grid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:5em;align-items:start}
.of-spis{position:sticky;top:100px}
.of-spis-tyt{font-size:.6875rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8C8A85;padding-bottom:1em;border-bottom:1px solid #DEDEDB;margin-bottom:.5em}
.of-spis-lista{list-style:none}
.of-spis-lista a{display:flex;align-items:baseline;gap:.75em;padding:.875em 0 .875em 1em;border-left:2px solid transparent;font-size:.9375rem;font-weight:600;color:#5D605A;line-height:1.35;transition:color .25s,border-color .25s,padding-left .25s}
.of-spis-lista a:hover{color:#1C1E1B;border-left-color:#DEDEDB}
.of-spis-lista a.akt{color:#1C1E1B;font-weight:800;border-left-color:#C9A452}
.of-spis-nr{font-size:.6875rem;font-weight:800;color:#C9A452;letter-spacing:.08em;flex-shrink:0}
.of-spis-cta{display:inline-flex;align-items:center;gap:.5em;margin-top:1.75em;font-size:.875rem;font-weight:700;color:#28804D;transition:gap .2s}
.of-spis-cta:hover{gap:.85em}
.of-spis-cta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

.of-usluga+.of-usluga{margin-top:5em;padding-top:5em;border-top:1px solid #DEDEDB}
.of-usluga{scroll-margin-top:100px}
.of-usluga-glowa{display:flex;align-items:baseline;gap:1em;margin-bottom:.875em}
.of-usluga-nr{font-size:.75rem;font-weight:800;color:#C9A452;letter-spacing:.12em;flex-shrink:0}
.of-usluga h2{font-size:clamp(1.5rem,2.75vw,2rem);font-weight:800;color:#1C1E1B;line-height:1.15;letter-spacing:-.02em;margin:0}
.of-usluga-lead{font-size:1rem;color:#3D4039;line-height:1.85;max-width:64ch}
.of-usluga-foto{position:relative;margin:2.25em 0;border:1px solid #DEDEDB;background:#0F2417;overflow:hidden}
.of-usluga-foto img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.of-usluga-foto:hover img{transform:scale(1.03)}
.of-usluga-foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:2em 1.5em 1em;font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:linear-gradient(to top,rgba(8,22,14,.88),transparent)}
.of-usluga-dol{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:3.5em;align-items:start}
.of-usluga-tekst p{font-size:1rem;color:#3D4039;line-height:1.85;margin-bottom:1.75em}
.of-usluga-akcje{display:flex;align-items:center;gap:1.75em;flex-wrap:wrap}
.of-usluga-wiecej{display:inline-flex;align-items:center;gap:.45em;font-size:.9375rem;font-weight:700;color:#28804D;transition:gap .2s}
.of-usluga-wiecej:hover{gap:.8em}
.of-usluga-wiecej svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.of-usluga-cechy{background:#F5F6F4;border-left:3px solid #C9A452;padding:1.75em}
.of-usluga-cechy-tyt{font-size:.6875rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8C8A85;margin-bottom:1.125em}
.of-usluga-cechy ul{list-style:none;display:flex;flex-direction:column;gap:.875em}
.of-usluga-cechy li{display:flex;align-items:flex-start;gap:.75em;font-size:.9375rem;color:#3D4039;line-height:1.65}
.of-usluga-cechy li::before{content:'';flex-shrink:0;width:9px;height:2px;margin-top:.72em;background:#28804D}
@media(prefers-reduced-motion:reduce){.of-usluga-foto img{transition:none}.of-usluga-foto:hover img{transform:none}}
@media(max-width:1040px){
  .of-uslugi-grid{grid-template-columns:1fr;gap:2.5em}
  .of-spis{position:static}
  .of-spis-lista{display:flex;flex-wrap:wrap;gap:.25em 1.5em}
  .of-spis-lista a{padding:.5em 0;border-left:none;border-bottom:2px solid transparent}
  .of-spis-lista a:hover{border-left:none;border-bottom-color:#DEDEDB}
  .of-spis-lista a.akt{border-left:none;border-bottom-color:#C9A452}
}
@media(max-width:820px){.of-usluga-dol{grid-template-columns:1fr;gap:2em}}
@media(max-width:600px){
  .of-uslugi{padding:2em 0}
  .of-usluga+.of-usluga{margin-top:3em;padding-top:3em}
  .of-usluga-cechy{padding:1em}
  .of-usluga-foto img{aspect-ratio:3/2}
}

/* Blok .srv-section, .srv-sec-inner, .srv-sec-features, .srv-foto oraz .srv-wide
   usuniety razem z poprzednim ukladem oferty. Zadna strona nie uzywa juz tych klas,
   sprawdzone grepem po wszystkich plikach php. Oferta stoi teraz na .of-*. */

/* Blok .pricing usuniety. Cennik zostal skasowany z serwisu i nie wraca,
   wiec reguly nie mialy juz do czego sie odnosic. */
/* ===== O-NAS: STATS BAR ===== */
.st-num{font-size:clamp(2rem,4vw,3rem);font-weight:900;color:#28804D;line-height:1;margin-bottom:.3em;display:block}
.st-lbl{font-size:.875rem;color:rgba(255,255,255,.4);line-height:1.5}
@media(max-width:900px){.stats-bar .stats-grid{grid-template-columns:repeat(2,1fr)}}

/* ===== O-NAS: DNA ===== */
.dna{padding:6em 0;background:#fff}
.dna-grid{display:grid;grid-template-columns:1fr 1fr;gap:6em;align-items:center}
.dna h2{font-size:clamp(1.5rem,2.75vw,2rem);font-weight:800;color:#1C1E1B;line-height:1.15;margin-bottom:1em;letter-spacing:-.02em}
.dna p{font-size:.9375rem;color:#5D605A;line-height:1.8;margin-bottom:1.25em}
.dna-values{display:grid;grid-template-columns:1fr 1fr;gap:1em;margin-top:2em}
.dna-val{background:#F5F6F4;border:1px solid #DEDEDB;padding:1.375em}
.dna-val-icon{width:38px;height:38px;background:#E8F5EE;display:flex;align-items:center;justify-content:center;margin-bottom:.875em}
.dna-val-icon svg{width:18px;height:18px;color:#28804D;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dna-val-title{font-size:.9375rem;font-weight:700;color:#1C1E1B;margin-bottom:.3em}
.dna-val-desc{font-size:.8125rem;color:#5D605A;line-height:1.65}
.dna-vis{background:#fff;border:1px solid #DEDEDB;overflow:hidden}
.dna-vis-top{background:#0F2417;padding:2em}
.dna-vis-top-title{font-size:.6875rem;color:rgba(255,255,255,.4);margin-bottom:.5em;letter-spacing:.1em}
.dna-vis-q{font-size:.9375rem;font-weight:700;color:#fff;line-height:1.55;font-style:italic}
.dna-vis-q::before{content:'\201E'}
.dna-vis-q::after{content:'\201D'}
.dna-vis-author{display:flex;align-items:center;gap:.75em;margin-top:1.25em}
.dva-av{width:36px;height:36px;background:#28804D;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8125rem;color:#fff;flex-shrink:0}
.dva-name{font-size:.875rem;font-weight:700;color:#fff}
.dva-role{font-size:.75rem;color:rgba(255,255,255,.4)}
.dna-vis-bottom{padding:1.5em}
.dna-process{display:flex;flex-direction:column;gap:0;border-top:1px solid #EAEAEA}
.dp-item{display:flex;align-items:center;gap:.875em;padding:.875em 0;border-bottom:1px solid #EAEAEA}
.dp-step{width:26px;height:26px;background:#28804D;display:flex;align-items:center;justify-content:center;font-size:.6875rem;font-weight:800;color:#fff;flex-shrink:0}
.dp-label{font-size:.875rem;font-weight:600;color:#1C1E1B}
@media(max-width:900px){.dna-grid{grid-template-columns:1fr;gap:3em}.dna-vis{display:none}}
@media(max-width:600px){.dna{padding:4em 0}.dna-values{grid-template-columns:1fr}}

/* ===== O-NAS: TEAM ===== */
.team{background:#F5F6F4;padding:6em 0}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25em;margin-top:3em}
.team-card{background:#fff;border:1px solid #DEDEDB;border-top:3px solid #28804D;overflow:hidden;transition:background .2s}
.team-card:hover{background:#F8F5EE}
.team-avatar{background:#0F2417;height:180px;display:flex;align-items:center;justify-content:center;position:relative}
.ta-circle{width:76px;height:76px;background:#28804D;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:900;color:#fff;position:absolute}
.team-info{padding:1.375em}
.team-name{font-size:1rem;font-weight:800;color:#1C1E1B;margin-bottom:.2em}
.team-role{font-size:.8125rem;color:#28804D;font-weight:600;margin-bottom:.75em}
.team-desc{font-size:.8125rem;color:#5D605A;line-height:1.65;margin-bottom:.875em}
.team-skills{display:flex;flex-wrap:wrap;gap:.375em}
.team-skill{background:#E8F5EE;color:#28804D;font-size:.6875rem;font-weight:600;padding:.25em .625em}
@media(max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.team-grid{grid-template-columns:1fr}.team{padding:4em 0}}

/* ===== O-NAS: TECHNOLOGIES ===== */
.tech{background:#fff;padding:6em 0}
.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25em;margin-top:3em}
.tech-card{background:#F5F6F4;border:1px solid #DEDEDB;padding:1.75em;display:flex;gap:1em;align-items:flex-start;transition:background .2s}
.tech-card:hover{background:#EAEAEA}
.tech-icon{width:44px;height:44px;background:#E8F5EE;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tech-icon svg{width:22px;height:22px;color:#28804D;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tech-name{font-size:.9375rem;font-weight:700;color:#1C1E1B;margin-bottom:.3em}
.tech-desc{font-size:.8125rem;color:#5D605A;line-height:1.65}
@media(max-width:900px){.tech-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.tech-grid{grid-template-columns:1fr}.tech{padding:4em 0}}

/* ===== REALIZACJE: CASES ===== */
.cases-section{background:#F5F6F4;padding:6em 0}
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25em;margin-top:3em}
.case-card{background:#fff;border:1px solid #DEDEDB;overflow:hidden;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.case-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.08)}
.case-visual{height:180px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.case-initials{font-size:4rem;font-weight:900;color:rgba(255,255,255,.07)}
.case-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.case-badge{position:absolute;top:1em;left:1em;background:rgba(0,0,0,.35);color:rgba(255,255,255,.8);font-size:.6875rem;font-weight:700;padding:.3em .75em;letter-spacing:.05em}
.case-result{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.7));padding:.875em 1.125em;font-size:.8125rem;font-weight:700;color:#fff}
.case-body{padding:1.375em;flex:1;display:flex;flex-direction:column}
.case-client{font-size:.75rem;color:#8C8A85;margin-bottom:.2em;letter-spacing:.06em}
.case-name{font-size:1rem;font-weight:800;color:#1C1E1B;margin-bottom:.25em}
.case-city{font-size:.8125rem;color:#28804D;margin-bottom:1em;font-weight:500}
.case-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em;margin-bottom:1.25em}
.cm-item{background:#F5F6F4;border:1px solid #DEDEDB;padding:.625em .5em;text-align:center}
.cm-num{font-size:1rem;font-weight:900;color:#28804D}
.cm-lbl{font-size:.625rem;color:#8C8A85;margin-top:.1em}
.case-cta{display:inline-flex;align-items:center;gap:.4em;color:#28804D;font-size:.875rem;font-weight:700;margin-top:auto;transition:gap .2s}
.case-cta:hover{gap:.75em}
@media(max-width:900px){.cases-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.cases-grid{grid-template-columns:1fr}.cases-section{padding:4em 0}}

/* ===== REALIZACJE: BANNER + PROCESS ===== */
.case-banner{background:#fff;border:1px solid #DEDEDB;border-left:3px solid #28804D;padding:2.5em;display:flex;align-items:center;gap:2em;flex-wrap:wrap;margin-top:3em}
.cb-text h3{font-size:1.25rem;font-weight:800;color:#1C1E1B;margin-bottom:.4em;letter-spacing:-.01em}
.cb-text p{font-size:.9375rem;color:#5D605A;line-height:1.7;max-width:500px}
.cb-btn{flex-shrink:0}
@media(max-width:700px){.case-banner{flex-direction:column;padding:1.5em}}
.process-section{background:#fff;padding:6em 0}
@media(max-width:600px){.process-section{padding:4em 0}}

/* ===== RESPONSIVE: UZUPEŁNIENIA ===== */

/* ─── 900px: naprawy borderów na siatkach 2-kolumnowych ─── */
@media(max-width:900px){
  /* Hero bar — items 2 i 4 bez prawego bordera, items 3 i 4 z górnym */
  .hero-stat:nth-child(2),.hero-stat:nth-child(4){border-right:none}
  .hero-stat:nth-child(3),.hero-stat:nth-child(4){border-top:1px solid rgba(255,255,255,.08)}
  /* Stats section — ta sama logika */
  .stat-item:nth-child(2),.stat-item:nth-child(4){border-right:none}
  .stat-item:nth-child(3),.stat-item:nth-child(4){border-top:1px solid rgba(40,128,77,.4)}
  /* Stats bar (o-nas) */
  /* Pricing — właściwy gap zamiast 1px */
  .price-grid{gap:1.25em}
  /* Oferta: ukryj dekoracyjny duży numer */
  /* Form row na tablecie zostaje 2-col — OK */
}

/* ─── 768px: tablet portrait ─── */
@media(max-width:768px){
  /* Padding sekcji — krok pośredni między 6em a 4em */
  .services,.problems,.stats,.howwework,.process,.leadmag,
  .testimonial,.of-porownanie,.of-uslugi,
  .dna,.team,.tech,.cases-section,.process-section{padding:4.5em 0}
  /* Hero bar — mniejszy */
  .hero-stat{padding:1.25em 1.25em}
  .hero-stat:first-child{padding-left:1.25em}
  .hero-stat-num{font-size:1.875rem}
  .hero-stat-lbl{font-size:.75rem}
  /* Form row → 1 col na tablecie */
  .form-row{grid-template-columns:1fr}
  /* Prob metryki */
  .prob-card-metric{font-size:3rem}
  /* Realizacje — 1 karta pod drugą */
  .cases-grid{grid-template-columns:1fr}
  /* Stats bar padding */
  /* Page hero padding */
  .ph{padding:7.5em 0 3.5em}
  /* DNA values → 1 col */
  .dna-values{grid-template-columns:1fr}
}

/* ─── 600px: telefon — uzupełnienia do istniejących reguł ─── */
@media(max-width:600px){
  /* Hero */
  .hero h1{font-size:clamp(2rem,9vw,2.75rem)}
  .hero-lead{font-size:.9375rem;max-width:100%}
  .hero-bar-inner{padding:0 1em}
  .hero-stat{padding:1.125em 1em}
  .hero-stat:first-child{padding-left:1em}
  .hero-stat-num{font-size:1.625rem}
  .hero-stat-lbl{font-size:.6875rem}
  /* Services */
  /* Prob */
  .prob-card-metric{font-size:2.5rem;letter-spacing:-.03em}
  .prob-card-metric-lbl{font-size:.625rem;margin-bottom:1.375em;padding-bottom:1.25em}
  /* Stats */
  .stat-num{font-size:clamp(2rem,9vw,3rem)}
  .stat-item{padding:1.5em 1.25em}
  /* Stats bar */
  .st-num{font-size:clamp(1.75rem,8vw,2.5rem)}
  /* Process */
  .proc-num{width:38px;height:38px;font-size:.875rem;margin-bottom:1em}
  /* CTA */
  .cta-btns .btn-blue,.cta-btns .btn-ghost{width:100%;justify-content:center}
  /* Page hero */
  .ph h1{font-size:clamp(1.75rem,7vw,2.375rem)}
  .ph-lead{font-size:.9375rem}
  /* Lead magnet form */
  .lm-form{padding:1.375em}
  /* FAQ */
  .faq-q{font-size:.875rem}
  /* Realizacje case banner */
  .case-banner{flex-direction:column;padding:1.5em}
  /* Cases metrics */
  .case-metrics{gap:.375em}
}

/* ─── 480px: mały telefon ─── */
@media(max-width:480px){
  html{font-size:13px}
  /* Header */
  .hdr-in{height:60px;padding:0 1em}
  .nav .nav-cta a{padding:.5em .875em;font-size:.8125rem}
  /* Hero */
  .hero h1{font-size:clamp(1.875rem,10vw,2.5rem)}
  .hero-stat-num{font-size:1.375rem}
  .hero-stat-lbl{font-size:.625rem;display:none}
  /* Prob */
  .prob-card-metric{font-size:2rem}
  .prob-card-fix{padding:.75em .875em}
  /* Services */
  /* Process */
  .proc-step{padding:1.375em 1em}
  .proc-num{width:32px;height:32px;font-size:.8125rem;margin-bottom:.875em}
  /* Lead magnet */
  .lm-box{padding:1.25em}
  .lm-form{padding:1.125em}
  /* Footer */
  .ftr-grid{gap:1.25em}
  /* Team */
  .team-info{padding:1em}
  /* Contact */
  .contact-item{padding:.875em}
  /* Page hero */
  .ph h1{font-size:clamp(1.625rem,8vw,2.125rem)}
}

/* ===== SEKCJA TYTUL (h2) ===== */
.sec-hdr-block{margin-bottom:3.5em}
.sec-hdr-block h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:800;color:#1C1E1B;line-height:1.15;letter-spacing:-.02em}
.sec-hdr-block p{font-size:1.0625rem;color:#3D4039;max-width:560px;margin-top:.75em;line-height:1.85}

/* ===== SERVICES: H2 ===== */
.srv-h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:800;color:#1C1E1B;line-height:1.15;letter-spacing:-.02em}

/* ===== TESTIMONIALS (2-col grid) ===== */
@media(max-width:768px){.testi-grid{grid-template-columns:1fr}}
@media(max-width:600px){.testimonials{padding:4em 0}.testi-card{padding:1.5em}}
@media(max-width:768px){.testi-track .testi-card{flex:0 0 100%}}


/* ===== O-NAS PAGE ===== */

/* Siatka mialа cztery kolumny przy trzech elementach, wiec czwarta zostawala pusta
   i pasek rozjezdzal sie w prawo. Trzy rowne kolumny, jednolite wyrownanie. */
.onas-stats{background:#0F2417;padding:3.5em 0}
.onas-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.onas-stat{padding:.5em 2em;border-right:1px solid rgba(255,255,255,.12);text-align:center;display:flex;flex-direction:column;justify-content:flex-start}
.onas-stat:last-child{border-right:none}
.onas-stat-num{font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:900;color:#C9A452;line-height:1.05;margin-bottom:.45em;letter-spacing:-.03em;white-space:nowrap}
.onas-stat-lbl{font-size:.875rem;color:rgba(255,255,255,.66);line-height:1.55}
@media(max-width:700px){.onas-stats{padding:2em 0}.onas-stats-grid{grid-template-columns:1fr;gap:1.75em}.onas-stat{border-right:none;padding:0}}

.onas-historia{background:#F5F6F4;padding:6em 0;border-bottom:1px solid #DEDEDB}
.onas-historia-grid{display:grid;grid-template-columns:1fr 1fr;gap:6em;align-items:start}
.onas-historia-text h2{font-size:clamp(1.5rem,2.8vw,2.125rem);font-weight:800;color:#1C1E1B;line-height:1.2;letter-spacing:-.02em;margin-bottom:1.25em}
.onas-historia-text p{font-size:1rem;color:#3D4039;line-height:1.85;margin-bottom:1.125em}
.onas-historia-text p:last-child{margin-bottom:0}
.onas-timeline{display:flex;flex-direction:column;gap:0}
.ot-row{display:grid;grid-template-columns:60px 1fr;gap:1.25em;align-items:start;padding:1.5em 0;border-bottom:1px solid #DEDEDB}
.ot-row:last-child{border-bottom:none}
.ot-year{font-size:.8125rem;font-weight:800;color:#28804D;letter-spacing:.04em;padding-top:.25em}
.ot-title{font-size:.9375rem;font-weight:800;color:#1C1E1B;margin-bottom:.3em}
.ot-desc{font-size:.9375rem;color:#5D605A;line-height:1.7}
@media(max-width:900px){.onas-historia-grid{grid-template-columns:1fr;gap:3em}.onas-historia{padding:4em 0}}

.onas-wartosci{background:#fff;padding:6em 0;border-bottom:1px solid #DEDEDB}
.onas-wartosci-intro{display:grid;grid-template-columns:1fr 1fr;gap:4em;align-items:end;margin-bottom:3.5em}
.onas-wartosci-intro h2{font-size:clamp(1.5rem,2.8vw,2.125rem);font-weight:800;color:#1C1E1B;line-height:1.2;letter-spacing:-.02em}
.onas-wartosci-intro p{font-size:1rem;color:#3D4039;line-height:1.85}
.wartosci-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2em}
.wart-card{padding:2.25em;background:#F5F6F4;border-top:3px solid #28804D}
.wart-icon{width:44px;height:44px;background:#28804D;display:flex;align-items:center;justify-content:center;margin-bottom:1.5em}
.wart-icon svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wart-title{font-size:1rem;font-weight:800;color:#1C1E1B;margin-bottom:.625em;letter-spacing:-.01em}
.wart-desc{font-size:.9375rem;color:#3D4039;line-height:1.8}
@media(max-width:900px){.onas-wartosci-intro{grid-template-columns:1fr;gap:1.5em}.wartosci-grid{grid-template-columns:1fr;gap:1.5em}.onas-wartosci{padding:4em 0}}

.onas-team{background:#F5F6F4;padding:6em 0;border-bottom:1px solid #DEDEDB}
.team-list{display:flex;flex-direction:column;gap:0;margin-top:3em}
.tl-row{display:grid;grid-template-columns:72px 1fr auto;gap:2.5em;align-items:center;padding:2em 0;border-bottom:1px solid #DEDEDB}
.tl-row:last-child{border-bottom:none}
.tl-avatar{width:72px;height:72px;background:#0F2417;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tl-initials{font-size:1rem;font-weight:900;color:#96D4AC;letter-spacing:.04em}
.tl-name{font-size:1.0625rem;font-weight:800;color:#1C1E1B;margin-bottom:.2em}
.tl-role{font-size:.875rem;font-weight:600;color:#28804D;margin-bottom:.5em;text-transform:uppercase;letter-spacing:.06em}
.tl-desc{font-size:.9375rem;color:#3D4039;line-height:1.75}
.tl-skills{display:flex;flex-wrap:wrap;gap:.5em;margin-top:.875em}
.tl-skill{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#28804D;background:#F0FAF4;padding:.3em .75em;border:1px solid #A7D9B8}
.tl-exp{text-align:right;flex-shrink:0;min-width:90px}
.tl-exp-num{font-size:1.75rem;font-weight:900;color:#28804D;line-height:1}
.tl-exp-lbl{font-size:.75rem;color:#8C8A85;margin-top:.25em}
@media(max-width:800px){.tl-row{grid-template-columns:56px 1fr;gap:1.5em}.tl-exp{display:none}.onas-team{padding:4em 0}}
@media(max-width:500px){.tl-row{grid-template-columns:1fr;gap:1em}.tl-avatar{display:none}}

.onas-cytat{background:#0F2417;padding:6em 0}
.onas-cytat-inner{max-width:760px;margin:0 auto;text-align:center}
.onas-cytat-mark{font-size:4rem;line-height:.8;color:#28804D;margin-bottom:.5em}
.onas-cytat-text{font-size:clamp(1.125rem,2.2vw,1.4375rem);font-weight:500;color:rgba(255,255,255,.9);line-height:1.65;letter-spacing:-.01em;margin-bottom:2em;font-style:italic}
.onas-cytat-author{display:flex;align-items:center;justify-content:center;gap:1.25em}
.ocat-av{width:48px;height:48px;background:#28804D;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:900;color:#fff}
.ocat-name{font-size:.9375rem;font-weight:700;color:#fff;text-align:left}
.ocat-role{font-size:.8125rem;color:rgba(255,255,255,.5);text-align:left}

/* ===== REALIZACJE PAGE ===== */

.types-section{background:#F5F6F4;padding:6em 0;border-top:1px solid #DEDEDB;border-bottom:1px solid #DEDEDB}
.types-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25em;margin-top:2.75em}
.type-card{background:#fff;border:1px solid #DEDEDB;border-top:3px solid #28804D;padding:2.25em}
.type-card-name{font-size:1.125rem;font-weight:800;color:#1C1E1B;margin-bottom:.875em;letter-spacing:-.01em}
.type-card-desc{font-size:.875rem;color:#5D605A;line-height:1.75;margin-bottom:1.375em}
.type-card-feats{list-style:none;display:flex;flex-direction:column;gap:.4em}
.type-card-feats li{display:flex;align-items:flex-start;gap:.625em;font-size:.8125rem;color:#3D4039}
.type-card-feats li::before{content:'';width:6px;height:6px;background:#28804D;border-radius:50%;flex-shrink:0;margin-top:.45em}
.type-card-price{margin-top:1.5em;padding-top:1.25em;border-top:1px solid #DEDEDB;font-size:.8125rem;color:#8C8A85}
.type-card-price strong{color:#1C1E1B;font-weight:700}
@media(max-width:900px){.types-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.types-grid{grid-template-columns:1fr}.types-section{padding:4em 0}}

.portfolio-section{background:#fff;padding:6em 0;border-bottom:1px solid #DEDEDB}
.portfolio-section .sec-hdr-block{margin-bottom:2.75em}
.portfolio-section .case-banner{background:#F5F6F4;border-left:none;padding:2.5em 3em;justify-content:space-between;margin-top:2em}
.case-cta--soon{color:#8C8A85;font-size:.875rem;font-weight:600;font-style:italic}
@media(max-width:700px){.portfolio-section .case-banner{flex-direction:column;align-items:flex-start;padding:2em}}
@media(max-width:600px){.portfolio-section{padding:4em 0}}

/* ===== USTAWA PAGE ===== */

.ust-intro{background:#fff;padding:6em 0;border-top:1px solid #DEDEDB;border-bottom:1px solid #DEDEDB}
.ust-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:6em;align-items:start}
.ust-intro-text h2{font-size:clamp(1.375rem,2.5vw,1.875rem);font-weight:800;color:#1C1E1B;line-height:1.2;margin-bottom:.875em;letter-spacing:-.02em}
.ust-intro-text p{font-size:1rem;color:#3D4039;line-height:1.85;margin-bottom:1em}
.ust-law-box{background:#0F2417;border-left:3px solid #28804D;padding:1.625em 1.875em}
.ust-law-box+.ust-law-box{margin-top:1.25em}
.ust-law-text{font-size:.9375rem;color:rgba(255,255,255,.75);line-height:1.85;font-style:italic}
@media(max-width:900px){.ust-intro-grid{grid-template-columns:1fr;gap:3em}}
@media(max-width:600px){.ust-intro{padding:4em 0}}

.ust-obligations{background:#F5F6F4;padding:6em 0;border-bottom:1px solid #DEDEDB}
/* Trzy kolumny, nie dwie. Przy trzech kafelkach uklad dwukolumnowy zostawial
   pusta polowe rzedu, a przy szesciu dawal dwa rzedy waskich prostokatow.
   Numer siedzi nad tytulem, bo w wezszej kolumnie badge z boku zjadal szerokosc. */
.ust-obl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25em;margin-top:3em}
.ust-obl-card{background:#fff;border:1px solid #DEDEDB;padding:1.75em;display:flex;flex-direction:column;align-items:flex-start;gap:1.125em;transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .45s cubic-bezier(.34,1.56,.64,1),border-color .45s cubic-bezier(.34,1.56,.64,1)}
.ust-obl-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(40,128,77,.12);border-color:#C9A452}
.ust-obl-num{min-width:40px;height:40px;background:#28804D;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:900;flex-shrink:0}
.ust-obl-title{font-size:1rem;font-weight:700;color:#1C1E1B;line-height:1.3;margin-bottom:.5em}
.ust-obl-desc{font-size:.9375rem;color:#3D4039;line-height:1.8}
/* Akapit domykajacy sekcje nie mial zadnych wlasnych regul, wiec bral pelna
   szerokosc kontenera i przylegal do kafelkow oraz do przycisku pod spodem. */
/* Jedna miara dla obu akapitow w tej sekcji. Wczesniej lead pod naglowkiem mial
   560px, akapit domykajacy 820px, a kafelki szly na pelne 1160px, wiec w jednej
   sekcji stały trzy rozne szerokosci i tekst wygladal na przypadkowo zlamany. */
.ust-obligations .sec-hdr-block p{max-width:780px}
p.ust-intro-text{max-width:780px;margin-top:3em;font-size:1rem;color:#3D4039;line-height:1.9}
p.ust-intro-text+.btn-blue{margin-top:2.5em}
@media(prefers-reduced-motion:reduce){.ust-obl-card{transition:none}.ust-obl-card:hover{transform:none}}
@media(max-width:1000px){.ust-obl-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.ust-obl-grid{grid-template-columns:1fr}}
@media(max-width:600px){.ust-obligations{padding:4em 0}p.ust-intro-text{margin-top:2em}p.ust-intro-text+.btn-blue{margin-top:1.75em}}

/* ===== BLOK TEKSTOWY SEO =====
   Dlugi tekst czytelny tylko w wezszej kolumnie, wiec kolumna ma wlasna miare,
   a nie pelne 1160px kontenera. Naglowki siedza w tej samej kolumnie co akapity,
   inaczej h2 idzie na cala szerokosc i widac schodek. */
.seo-blok{background:#fff;padding:6em 0;border-bottom:1px solid #DEDEDB}
.seo-blok--szare{background:#F5F6F4}
/* Kolumna tekstu wysrodkowana w kontenerze. Wczesniej byla dosunieta do lewej
   i przy kontenerze tysiac sto szescdziesiat zostawiala po prawej pusty pas,
   przez co caly blok wygladal na przesuniety. */
.seo-tresc{max-width:960px;margin-inline:auto}
.seo-tresc h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:800;color:#1C1E1B;line-height:1.15;letter-spacing:-.02em;margin-bottom:.8em}
.seo-tresc h2::after{content:'';display:block;width:52px;height:3px;background:linear-gradient(90deg,#D4A336,#C9A452);margin-top:.7em}
.seo-tresc h3{font-size:1.125rem;font-weight:700;color:#1C1E1B;line-height:1.3;margin:2.5em 0 .875em}
.seo-tresc p{font-size:1rem;color:#3D4039;line-height:1.9;margin-bottom:1.375em}
.seo-tresc p:last-child{margin-bottom:0}
.seo-tresc strong{color:#1C1E1B;font-weight:700}
.seo-tresc a{color:#28804D;font-weight:600;border-bottom:1px solid rgba(40,128,77,.35);transition:color .2s,border-color .2s}
.seo-tresc a:hover{color:#1F6B40;border-bottom-color:#1F6B40}
.seo-tresc ul{list-style:none;margin:0 0 1.5em}
.seo-tresc li{font-size:1rem;color:#3D4039;line-height:1.8;display:flex;align-items:baseline;gap:.7em;margin-bottom:.5em}
.seo-tresc li::before{content:'—';color:#28804D;font-weight:700;flex-shrink:0}
@media(max-width:600px){.seo-blok{padding:4em 0}.seo-tresc h3{margin-top:2em}}

.ust-deadlines{background:#fff;padding:6em 0;border-bottom:1px solid #DEDEDB}
/* Os pozioma na pelna szerokosc. Wczesniej lista miala max-width 800px w
   kontenerze 1160px, wiec prawa czesc sekcji stala pusta. Pieciu pozycjom
   odpowiada piec kolumn, wiec nigdy nie zostaje niepelny rzad. Ponizej
   tysiaca pikseli ta sama lista staje sie osia pionowa, tez na pelna szerokosc. */
.ust-dl-list{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:0 1.5em;margin-top:3.5em;max-width:none}
.ust-dl-list::before{content:'';position:absolute;left:5px;right:5px;top:5px;height:1px;background:#DEDEDB}
.ust-dl-row{position:relative;padding:2.25em 0 0}
.ust-dl-row::before{content:'';position:absolute;left:0;top:0;width:11px;height:11px;background:#28804D}
.ust-dl-when{font-size:.8125rem;font-weight:800;color:#28804D;letter-spacing:.06em;text-transform:uppercase;line-height:1.35;margin-bottom:.875em;min-height:2.7em}
.ust-dl-what{font-size:.9375rem;color:#3D4039;line-height:1.8}
.ust-dl-what strong{color:#1C1E1B;font-weight:700}
@media(max-width:1000px){
  .ust-dl-list{grid-template-columns:1fr;gap:0}
  .ust-dl-list::before{left:5px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
  .ust-dl-row{padding:0 0 2.25em 2.5em}
  .ust-dl-row:last-child{padding-bottom:0}
  .ust-dl-row::before{top:6px}
  .ust-dl-when{min-height:0;margin-bottom:.5em}
  .ust-dl-what{font-size:1rem}
}
@media(max-width:600px){.ust-deadlines{padding:4em 0}}

.ust-penalties{background:#F5F6F4;padding:6em 0;border-bottom:1px solid #DEDEDB}
.ust-pen-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25em;margin-top:3em}
.ust-pen-card{background:#fff;border:1px solid #DEDEDB;border-top:3px solid #B91C1C;padding:2em}
.ust-pen-card--alt{border-top-color:#B45309}
.ust-pen-amount{font-size:2rem;font-weight:900;color:#B91C1C;line-height:1;margin-bottom:.375em}
.ust-pen-card--alt .ust-pen-amount{color:#B45309}
.ust-pen-title{font-size:1rem;font-weight:700;color:#1C1E1B;margin-bottom:.625em}
.ust-pen-desc{font-size:.9375rem;color:#3D4039;line-height:1.8}
@media(max-width:700px){.ust-pen-grid{grid-template-columns:1fr}}
@media(max-width:600px){.ust-penalties{padding:4em 0}}

/* Bez dolnej krechy. Pod spodem stoi blok kontaktowy, ktory ma wlasny zloty
   pasek u gory, a obie sekcje maja to samo ciemne tlo. Dwie cienkie linie
   w dwoch roznych kolorach jedna nad druga wygladaly jak usterka. */
.ust-dfg{background:#0F2417;padding:6em 0;border-top:1px solid rgba(40,128,77,.2)}
.ust-dfg-grid{display:grid;grid-template-columns:1fr 1fr;gap:6em;align-items:center}
.ust-dfg h2{font-size:clamp(1.375rem,2.5vw,1.875rem);font-weight:800;color:#fff;line-height:1.2;margin-bottom:.875em;letter-spacing:-.02em}
.ust-dfg p{font-size:1rem;color:rgba(255,255,255,.72);line-height:1.85;margin-bottom:1em}
.ust-dfg .btn-blue{margin-top:1.5em}
.ust-dfg-stats{display:flex;flex-direction:column;gap:0;border-top:1px solid rgba(40,128,77,.25)}
.ust-dfg-stat{padding:1.5em 0;border-bottom:1px solid rgba(40,128,77,.2);display:grid;grid-template-columns:100px 1fr;gap:1.5em;align-items:center}
.ust-dfg-stat-num{font-size:1.75rem;font-weight:900;color:#fff;line-height:1}
.ust-dfg-stat-lbl{font-size:.9375rem;color:rgba(255,255,255,.68);line-height:1.6}
@media(max-width:900px){.ust-dfg-grid{grid-template-columns:1fr;gap:3em}}
@media(max-width:600px){.ust-dfg{padding:4em 0}}

/* ===== WTYCZKI PAGE ===== */

.ustawa-callout{background:#F5F6F4;padding:4em 0;border-top:1px solid #DEDEDB;border-bottom:1px solid #DEDEDB}
.ustawa-callout-inner{display:grid;grid-template-columns:1fr auto;gap:3em;align-items:center;background:#fff;border:1px solid #DEDEDB;border-left:4px solid #28804D;padding:2.25em 2.5em}
.ustawa-callout-title{font-size:1.125rem;font-weight:800;color:#1C1E1B;margin-bottom:.5em;letter-spacing:-.01em}
.ustawa-callout-desc{font-size:1rem;color:#3D4039;line-height:1.8}
@media(max-width:700px){.ustawa-callout-inner{grid-template-columns:1fr;gap:1.5em}.ustawa-callout{padding:3em 0}}

.how-it-works{background:#fff;padding:6em 0;border-bottom:1px solid #DEDEDB}

.plugin-features{background:#F5F6F4;padding:6em 0;border-bottom:1px solid #DEDEDB}

/* ===== KONTAKT PAGE ===== */

.ktk-section{background:#fff;padding:6em 0;border-bottom:1px solid #DEDEDB}
.ktk-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:6em;align-items:start}
.ktk-info-title{font-size:clamp(1.25rem,2.4vw,1.625rem);font-weight:800;color:#1C1E1B;line-height:1.25;letter-spacing:-.02em;margin-bottom:.875em}
.ktk-info-lead{font-size:1rem;color:#3D4039;line-height:1.85;margin-bottom:2.5em}
.ktk-item{display:flex;align-items:flex-start;gap:1.125em;margin-bottom:1.75em}
.ktk-item:last-of-type{margin-bottom:0}
.ktk-icon{width:44px;height:44px;background:#F5F6F4;border:1px solid #DEDEDB;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ktk-icon svg{width:18px;height:18px;fill:none;stroke:#28804D;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ktk-item-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#8C8A85;margin-bottom:.25em}
.ktk-item-val{font-size:1rem;font-weight:700;color:#1C1E1B;margin-bottom:.2em}
.ktk-item-val a{color:inherit;transition:color .2s}
.ktk-item-val a:hover{color:#28804D}
.ktk-item-sub{font-size:.875rem;color:#5D605A}
.ktk-divider{border:none;border-top:1px solid #EAEAEA;margin:2.5em 0}
.ktk-firma{font-size:.75rem;color:#8C8A85;line-height:2}
.ktk-firma strong{color:#3D4039;font-weight:600}
.ktk-form-wrap{background:#F5F6F4;padding:2.75em;border-top:3px solid #28804D}
.ktk-form-title{font-size:1.25rem;font-weight:800;color:#1C1E1B;letter-spacing:-.02em;margin-bottom:.375em}
.ktk-form-sub{font-size:.9375rem;color:#5D605A;line-height:1.7;margin-bottom:2em}
.ktk-faq{background:#F5F6F4;padding:6em 0}
.ktk-faq-grid{display:grid;grid-template-columns:1fr 2fr;gap:6em;align-items:start}
.ktk-faq-left h2{font-size:clamp(1.375rem,2.5vw,1.875rem);font-weight:800;color:#1C1E1B;line-height:1.2;letter-spacing:-.02em;margin-bottom:.875em}
.ktk-faq-left p{font-size:1rem;color:#3D4039;line-height:1.85;margin-bottom:1.75em}
.ktk-faq-tel{display:inline-flex;align-items:center;gap:.625em;font-size:.9375rem;font-weight:700;color:#28804D;transition:gap .2s}
.ktk-faq-tel:hover{gap:1em}
.ktk-faq-tel svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1000px){.ktk-grid{grid-template-columns:1fr;gap:3em}.ktk-section{padding:4em 0}}
@media(max-width:900px){.ktk-faq-grid{grid-template-columns:1fr;gap:2.5em}.ktk-faq{padding:4em 0}}
@media(max-width:600px){.ktk-form-wrap{padding:1.75em}}

/* ===== CASE STUDY PAGE ===== */
/* Hero case study. Wczesniej pasek liczb mial siatke na trzy kolumny przy
   czterech pozycjach, wiec czwarta spadala do osobnego rzedu, a wielkie liczby
   trzymaly cale slowa typu „Sto dwanascie m2" i lamaly sie na trzy wiersze.
   Wielkosc dyplaya zostala zaprojektowana pod krotkie metryki, ktore usunieto
   razem z wymyslonymi wynikami. Teraz pasek jest elastyczny i przyjmuje dowolna
   liczbe pozycji, a wartosc jest normalnym tekstem, nie liczba wyswietlana. */
.cs-hero{background:#0F2417;padding:9em 0 0;position:relative;overflow:hidden;background-size:cover;background-position:center}
.cs-hero-lead{font-size:1.0625rem;color:rgba(255,255,255,.72);line-height:1.85;max-width:640px;margin-bottom:3em}
.cs-hero::before{content:'';position:absolute;inset:0;background:rgba(8,22,14,.82);pointer-events:none;z-index:0}
.cs-hero .wrap{position:relative;z-index:1}
.cs-hero h1{font-size:clamp(2rem,4vw,3rem);font-weight:900;color:#fff;line-height:1.1;letter-spacing:-.02em;margin-bottom:.625em;max-width:820px}
.cs-hero h1 em{color:#C9A452;font-style:normal}
.cs-hero-result{font-size:clamp(1rem,2vw,1.25rem);font-weight:700;color:#28804D;margin-bottom:2em}
.cs-hero-result span{color:rgba(255,255,255,.4);font-weight:400;font-size:.9em;margin-left:.5em}
.cs-hero-badges{display:flex;gap:.5em;flex-wrap:wrap;margin-bottom:3.5em}
.cs-hero-badge{display:inline-flex;align-items:center;gap:.4em;background:rgba(255,255,255,.05);border:1px solid rgba(40,128,77,.3);color:rgba(255,255,255,.55);font-size:.8125rem;font-weight:500;padding:.375em .875em}
.cs-hero-badge svg{width:12px;height:12px;fill:none;stroke:#28804D;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.cs-hero-bar{display:flex;border-top:1px solid rgba(40,128,77,.2);margin-top:0;position:relative;z-index:1}
.cs-hero-stat{flex:1 1 0;min-width:0;padding:1.75em 2em;border-right:1px solid rgba(40,128,77,.15)}
.cs-hero-stat:first-child{padding-left:0}
.cs-hero-stat:last-child{border-right:none;padding-right:0}
.cs-hero-stat-num{font-size:1.0625rem;font-weight:800;color:#C9A452;line-height:1.3;margin-bottom:.5em;display:block;letter-spacing:-.01em}
.cs-hero-stat-lbl{font-size:.8125rem;color:rgba(255,255,255,.62);line-height:1.5}
@media(max-width:860px){
  .cs-hero-bar{flex-wrap:wrap}
  .cs-hero-stat{flex:1 1 44%;border-right:none;border-bottom:1px solid rgba(40,128,77,.15);padding:1.25em 0}
  .cs-hero-stat:nth-child(odd){padding-right:1.5em}
}
@media(max-width:768px){.cs-hero-bar{grid-template-columns:1fr 1fr}.cs-hero-stat:nth-child(2){border-right:none}.cs-hero-stat:nth-child(3){grid-column:1/-1;border-right:none;border-top:1px solid rgba(40,128,77,.15)}}
@media(max-width:600px){.cs-hero{padding:7em 0 0}.cs-hero-stat{padding:1.5em 0}}
.cs-section{padding:5em 0;border-bottom:1px solid #DEDEDB}
.cs-section--cream{background:#F5F6F4}
.cs-section--white{background:#fff}
.cs-section--dark{background:#0F2417;border-bottom:1px solid rgba(40,128,77,.2)}
.cs-section--dark .srv-h2{color:#fff}
@media(max-width:600px){.cs-section{padding:3.5em 0}}
.cs-client-grid{display:grid;grid-template-columns:1fr 360px;gap:5em;align-items:start}
.cs-client-text p{font-size:.9375rem;color:#5D605A;line-height:1.8;margin-top:1.125em}
.cs-info-box{background:#0F2417;border-top:3px solid #28804D}
.cs-info-row{display:flex;align-items:center;gap:1em;padding:1em 1.5em;border-bottom:1px solid rgba(40,128,77,.12)}
.cs-info-row:last-child{border-bottom:none}
.cs-info-icon{width:32px;height:32px;background:rgba(40,128,77,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cs-info-icon svg{width:14px;height:14px;fill:none;stroke:#28804D;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cs-info-lbl{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.3);margin-bottom:.15em}
.cs-info-val{font-size:.9375rem;font-weight:600;color:#fff}
@media(max-width:900px){.cs-client-grid{grid-template-columns:1fr;gap:2.5em}}
.cs-problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25em;margin-top:2.75em}
.cs-problem-card{background:#fff;border:1px solid #DEDEDB;border-top:3px solid #DEDEDB;padding:2em;transition:border-top-color .25s}
.cs-problem-card:hover{border-top-color:#28804D}
.cs-problem-num{font-size:3.5rem;font-weight:900;color:#EAEAEA;line-height:1;margin-bottom:.25em;letter-spacing:-.04em}
.cs-problem-title{font-size:.9375rem;font-weight:700;color:#1C1E1B;margin-bottom:.625em}
.cs-problem-desc{font-size:.875rem;color:#5D605A;line-height:1.8}
@media(max-width:800px){.cs-problem-grid{grid-template-columns:1fr}}
@media(max-width:600px){.cs-problem-card{padding:1.5em}}
.cs-solution-lead{font-size:.9375rem;color:#5D605A;line-height:1.8;max-width:640px;margin-top:1.125em;margin-bottom:2.75em}
.cs-decisions{display:flex;flex-direction:column;gap:1px;background:#DEDEDB}
.cs-decision{background:#fff;border-left:4px solid #28804D;padding:2em 2em 2em 2.25em;display:grid;grid-template-columns:120px 1fr;gap:2em;align-items:start}
.cs-decision-num{font-size:.6875rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#28804D;padding-top:.2em;white-space:nowrap}
.cs-decision-title{font-size:1rem;font-weight:700;color:#1C1E1B;margin-bottom:.5em}
.cs-decision-desc{font-size:.9375rem;color:#5D605A;line-height:1.8}
@media(max-width:700px){.cs-decision{grid-template-columns:1fr;gap:.625em;padding:1.5em 1.5em 1.5em 1.75em}}
.cs-results-lead{font-size:.9375rem;color:rgba(255,255,255,.45);max-width:520px;margin-top:.875em;line-height:1.75}
.cs-results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25em;margin-top:3em}
/* Kafle wynikow. Ta sama historia co w pasku hero. Rozmiar dyplaya powstal pod
   krotkie metryki, a dzis stoja tu etykiety typu „Metraz domu", wiec cztery
   rem robily z nich olbrzymie naglowki. Teraz to tytul karty, nie liczba. */
.cs-result-block{background:rgba(255,255,255,.04);border:1px solid rgba(40,128,77,.2);border-top:3px solid rgba(201,164,82,.4);padding:2em;text-align:left}
.cs-result-num{font-size:1.125rem;font-weight:800;color:#C9A452;line-height:1.3;margin-bottom:.75em;display:block;letter-spacing:-.01em}
.cs-result-lbl{font-size:.9375rem;color:rgba(255,255,255,.72);line-height:1.7;margin-bottom:.625em}
.cs-result-note{font-size:.75rem;color:rgba(255,255,255,.25);font-style:italic}
@media(max-width:700px){.cs-results-grid{grid-template-columns:1fr}}
@media(max-width:600px){.cs-result-block{padding:2em 1.5em}}
.cs-testi{padding:5.5em 0;background:#fff;border-bottom:1px solid #DEDEDB}
.cs-testi-grid{display:grid;grid-template-columns:1fr 240px;gap:5em;align-items:center}
.cs-testi-qmark{font-size:5rem;font-weight:900;color:#EAEAEA;line-height:.75;margin-bottom:.625em}
.cs-testi-text{font-size:clamp(1rem,2.25vw,1.25rem);font-weight:600;color:#1C1E1B;line-height:1.7;font-style:italic;margin-bottom:2em}
.cs-testi-author{display:flex;align-items:center;gap:.875em}
.cs-testi-avatar{width:48px;height:48px;background:#0F2417;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9375rem;color:#28804D;flex-shrink:0}
.cs-testi-name{font-weight:700;color:#1C1E1B}
.cs-testi-role{font-size:.875rem;color:#5D605A;margin-top:.15em}
.cs-testi-photo{background:#F5F6F4;border:1px solid #DEDEDB;aspect-ratio:3/4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75em}
.cs-testi-photo svg{width:36px;height:36px;fill:none;stroke:#DEDEDB;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cs-testi-photo-lbl{font-size:.75rem;color:#B0AAA0;text-align:center;line-height:1.5}
@media(max-width:800px){.cs-testi-grid{grid-template-columns:1fr}.cs-testi-photo{display:none}}
@media(max-width:600px){.cs-testi{padding:3.5em 0}}
/* Sekcja z odnosnikiem do zywej strony. Wczesniej byl to waski pasek na bialym
   tle, ktory przylegal do ciemnego bloku CTA i wygladal jak urwany fragment.
   Teraz ma tlo kremowe, wlasna miare i odstepy zgodne z reszta sekcji. */
.cs-live-inner{max-width:820px}
.cs-live-inner p{font-size:1rem;color:#3D4039;line-height:1.85;margin:1.25em 0 2em;max-width:62ch}

.cs-nav{background:#F5F6F4;padding:3em 0;border-top:1px solid #DEDEDB}
.cs-nav-inner{display:flex;align-items:center;justify-content:space-between;gap:2em;flex-wrap:wrap}
.cs-nav-link{display:flex;flex-direction:column;gap:.3em}
.cs-nav-link-dir{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#8C8A85;display:flex;align-items:center;gap:.375em}
.cs-nav-link-dir svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cs-nav-link-name{font-size:.9375rem;font-weight:700;color:#1C1E1B;transition:color .2s}
.cs-nav-link:hover .cs-nav-link-name{color:#28804D}
.cs-nav-link-type{font-size:.8125rem;color:#5D605A}
.cs-nav-link--right{text-align:right}
.cs-nav-link--right .cs-nav-link-dir{justify-content:flex-end}
@media(max-width:600px){.cs-nav-inner{flex-direction:column;gap:1.5em}.cs-nav-link--right{text-align:left}.cs-nav-link--right .cs-nav-link-dir{justify-content:flex-start}}

/* ===== ZŁOTA PIERWSZA LITERA SEKCJI ===== */
h2::first-letter{color:#D4A336}

/* ===== NORMALIZACJA PADDINGU SEKCJI ===== */
/* Desktop: 4em góra / 4em dół. Boki (2em) daje .wrap. Ruszamy tylko pion, by nie zaburzyć siatek. */
.cs-section,.cs-testi,.cta-section,.services,.problems,.howwework,.process,.testimonials,.testimonial,.cases-section,.ustawa-callout,.how-it-works,.plugin-features,.onas-stats,.onas-historia,.onas-wartosci,.onas-team,.onas-cytat,.ktk-section,.ktk-faq,.blog-list-section,.ust-intro,.ust-obligations,.ust-deadlines,.ust-penalties,.ust-dfg,.of-porownanie,.of-uslugi,.types-section,.portfolio-section{padding-top:4em;padding-bottom:4em}
/* Telefon: 2em góra / 2em dół. Boki (1em) daje .wrap. */
@media(max-width:600px){
  .cs-section,.cs-testi,.cta-section,.services,.problems,.howwework,.process,.testimonials,.testimonial,.cases-section,.ustawa-callout,.how-it-works,.plugin-features,.onas-stats,.onas-historia,.onas-wartosci,.onas-team,.onas-cytat,.ktk-section,.ktk-faq,.blog-list-section,.ust-intro,.ust-obligations,.ust-deadlines,.ust-penalties,.ust-dfg,.of-porownanie,.of-uslugi,.types-section,.portfolio-section{padding-top:2em;padding-bottom:2em}
}

/* ===== TYPOGRAFIA: JEDNOLITA SKALA (caly serwis, jeden font Inter) ===== */
/* Ustawiamy tylko metryki (rozmiar/grubosc/interlinia/tracking). Kolory zostaja z regul komponentow. */
.hero h1,.ph h1,.cs-hero h1{font-size:clamp(2rem,4.5vw,3rem);font-weight:900;line-height:1.1;letter-spacing:-.02em}
.cta-section h2,.prob-header h2,.sec-hdr h2,.hww-left h2,.lm-box h2,.dna h2,.sec-hdr-block h2,.srv-h2,.testi-hdr h2,.onas-historia-text h2,.onas-wartosci-intro h2,.ust-intro-text h2,.ust-dfg h2,.ktk-info-title,.ktk-faq-left h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:800;line-height:1.15;letter-spacing:-.02em}
.prob-card h3,.cb-text h3,.form-success h3{font-size:1.125rem;font-weight:800;line-height:1.3;letter-spacing:-.01em}

/* ===== ANIMACJA 1: reveal (plynne wejscie przy scrollu) ===== */
/* Gated .js: bez JS tresc jest w pelni widoczna. Klase .reveal dodaje skrypt. */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.js .reveal.is-visible{opacity:1;transform:none}

/* ===== ANIMACJA 2: lift (jednolity hover na kartach) ===== */
.prob-card,.srv-card,.proc-step,.hww-pill,.dna-val,.team-card,.tech-card,.case-card,.price-card,.testi-card,.type-card,.blog-card{transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease,border-color .2s,background .2s}
.prob-card:hover,.srv-card:hover,.proc-step:hover,.hww-pill:hover,.dna-val:hover,.team-card:hover,.tech-card:hover,.case-card:hover,.price-card:hover,.testi-card:hover,.type-card:hover,.blog-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(15,36,23,.13)}

/* Szacunek dla preferencji ograniczenia ruchu */
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .prob-card,.srv-card,.proc-step,.hww-pill,.dna-val,.team-card,.tech-card,.case-card,.price-card,.testi-card,.type-card,.blog-card{transition:none}
  .prob-card:hover,.srv-card:hover,.proc-step:hover,.hww-pill:hover,.dna-val:hover,.team-card:hover,.tech-card:hover,.case-card:hover,.price-card:hover,.testi-card:hover,.type-card:hover,.blog-card:hover{transform:none;box-shadow:none}
}

/* ===== CTA z formularzem szybkiego oddzwonienia (globalne) ===== */
.cta-form{background:#0F2417;padding:4em 0;position:relative;overflow:hidden}
/* Okrag dekoracyjny wyciszony. Gdy blok kontaktowy stoi pod inna ciemna sekcja,
   krawedz kola rysowala sie twardo i czytala jak przypadkowa plama. */
.cta-form::before{content:'';position:absolute;top:-30%;right:-8%;width:520px;height:520px;border-radius:50%;background:rgba(40,128,77,.09);pointer-events:none}
.cta-form::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#C9A452,#28804D);pointer-events:none}
.cta-form .wrap{position:relative;z-index:1}
/* Numer telefonu nad naglowkiem i nad formularzem. Zloty, z powolnym polyskiem.
   Kolor bazowy jest ustawiony osobno, wiec przy braku obslugi background-clip
   numer nadal jest widoczny, a nie przezroczysty. */
.cta-tel{display:flex;align-items:baseline;gap:clamp(.6em,2vw,1.4em);flex-wrap:wrap;padding-bottom:1.5em;margin-bottom:2em;border-bottom:1px solid rgba(255,255,255,.14)}
.cta-tel-lbl{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.62)}
.cta-tel-num{display:inline-block;font-size:clamp(2.5rem,7vw,4.5rem);font-weight:900;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;text-decoration:none;color:#C9A452;background-image:linear-gradient(100deg,#C9A452 0%,#C9A452 38%,#F6E6B4 50%,#C9A452 62%,#C9A452 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:cta-polysk 6s linear infinite}
.cta-tel-num:hover{background-image:linear-gradient(100deg,#D4A336 0%,#D4A336 38%,#FFF3D0 50%,#D4A336 62%,#D4A336 100%)}
.cta-tel-godz{font-size:.8125rem;color:rgba(255,255,255,.55)}
@keyframes cta-polysk{from{background-position:130% 0}to{background-position:-30% 0}}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.cta-tel-num{-webkit-text-fill-color:#C9A452;background-image:none}}
@media(prefers-reduced-motion:reduce){.cta-tel-num{animation:none;background-position:50% 0}}
@media(max-width:600px){.cta-tel{padding-bottom:1em;margin-bottom:1.5em}}
.cta-form-box{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5em,4vw,3.5em);align-items:center}
.cta-form h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:#fff;margin-bottom:.55em}
.cta-form p{color:rgba(255,255,255,.85);max-width:46ch;margin-bottom:1.25em;line-height:1.8}
.cta-form-perks{display:flex;gap:1.5em;flex-wrap:wrap;color:#fff;font-size:.875rem;font-weight:600}
.cta-form-el{background:rgba(255,255,255,.05);border:1px solid rgba(201,164,82,.3);padding:clamp(1.5em,3vw,2em);display:flex;flex-direction:column;gap:.75em}
.cta-form-el input{padding:.95em 1.1em;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);font-family:inherit;font-size:.9375rem;color:#fff;outline:none;transition:border-color .2s,background .2s}
.cta-form-el input::placeholder{color:rgba(255,255,255,.45)}
.cta-form-el input:focus{border-color:#C9A452;background:rgba(255,255,255,.09)}
.cta-form-el .btn-blue{justify-content:center;padding:1em 2em}
.cta-form-note{font-size:.75rem;color:rgba(255,255,255,.5);text-align:center;line-height:1.5}
.cta-form-consent{display:flex;align-items:flex-start;gap:.6em;font-size:.75rem;color:rgba(255,255,255,.62);line-height:1.55;cursor:pointer}
.cta-form-consent input{flex-shrink:0;margin-top:.15em;width:16px;height:16px;accent-color:#C9A452;background:transparent}
.cta-form-consent a{color:#C9A452;text-decoration:underline}
.cta-form .btn-blue{background:#C9A452;color:#0F2417;font-weight:800}
.cta-form .btn-blue:hover{background:#D4A336}
/* ===== BANER COOKIES ===== */
.ck-bar{position:fixed;left:0;right:0;bottom:0;z-index:300;background:#0F2417;border-top:2px solid #28804D;box-shadow:0 -8px 30px rgba(0,0,0,.25);transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1)}
.ck-bar[hidden]{display:none}
.ck-bar.ck-open{transform:translateY(0)}
.ck-in{display:flex;align-items:center;justify-content:space-between;gap:2em;padding-top:1.25em;padding-bottom:1.25em}
.ck-title{color:#fff;font-size:1rem;font-weight:800;letter-spacing:-.01em;margin-bottom:.4em}
.ck-desc{color:rgba(255,255,255,.72);font-size:.8125rem;line-height:1.7;max-width:78ch}
.ck-desc a{color:#96D4AC;text-decoration:underline}
.ck-btns{display:flex;gap:.75em;flex-shrink:0}
.ck-btn{font-family:inherit;font-size:.875rem;font-weight:700;padding:.85em 1.6em;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.ck-btn-deny{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.ck-btn-deny:hover{background:rgba(255,255,255,.1);border-color:#fff}
.ck-btn-ok{background:#28804D;color:#fff}
.ck-btn-ok:hover{background:#1F6B40}
.ftr-ck-link{background:none;border:0;padding:0;font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;text-decoration:underline}
@media(max-width:760px){.ck-in{flex-direction:column;align-items:stretch;gap:1.25em}.ck-btns{flex-direction:column-reverse}.ck-btn{width:100%}}

/* ===== PRZYKLEJONY PASEK Z TELEFONEM (MOBILE) ===== */
.call-bar{position:fixed;left:0;right:0;bottom:0;z-index:250;display:none;align-items:center;justify-content:center;gap:.6em;background:#28804D;color:#fff;font-size:1rem;font-weight:800;letter-spacing:-.01em;padding:1em;box-shadow:0 -6px 24px rgba(0,0,0,.22);transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.call-bar[hidden]{display:none}
.call-bar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
@media(max-width:700px){.call-bar{display:flex}.call-bar.call-bar-on{transform:translateY(0)}}

/* ===== SLIDER OPINII: NAWIGACJA ===== */
@media(prefers-reduced-motion:reduce){.testi-track{transition:none}.ck-bar,.call-bar{transition:none}}

/* ===== KONTAKT NA STRONIE GLOWNEJ ===== */
/* Krotki blok zamiast kopii calej strony kontaktu. Formularz wyceny
   zyje tylko pod adresem kontaktu, zeby nie dublowac tresci. */
/* Blok .dom-kontakt oraz .dk-* usuniety razem ze skrocona sekcja kontaktowa
   na stronie glownej. Obie strony uzywaja teraz sekcja-kontakt.php i klas .ktk-*. */

/* ===== WPIS BLOGOWY ===== */
.wpis-hero{background:#0F2417;padding:8em 0 3em;position:relative}
.wpis-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#C9A452,#28804D);z-index:2}
/* Zdjecie wpisu stoi jako tlo naglowka. Nakladka jest zielona, ta sama rodzina
   kolorow co reszta serwisu, i ma powolny zoom jak hero podstron. */
.wpis-hero--img{padding-bottom:4em;overflow:hidden}
.wpis-hero--img::before{content:'';position:absolute;top:-6%;left:-6%;right:-6%;bottom:-6%;background:linear-gradient(115deg,rgba(15,36,23,.94) 0%,rgba(15,36,23,.82) 48%,rgba(15,36,23,.9) 100%),linear-gradient(100deg,rgba(40,128,77,.45),rgba(40,128,77,0) 70%),var(--wpis-img,none) center / cover;animation:ph-zoom 14s ease-out infinite alternate;pointer-events:none}
.wpis-hero .wrap{position:relative;z-index:1}
.wpis-powrot{display:inline-flex;align-items:center;gap:.5em;font-size:.8125rem;font-weight:700;color:#96D4AC;margin-bottom:1.75em;transition:gap .2s}
.wpis-powrot:hover{gap:.875em}
.wpis-powrot svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.wpis-kat{display:inline-block;font-size:.625rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:#0F2417;background:#C9A452;padding:.5em .9em;margin-bottom:1.25em}
.wpis-hero h1{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:900;color:#fff;line-height:1.12;letter-spacing:-.02em;max-width:22ch}
.wpis-lead{font-size:1.0625rem;color:rgba(255,255,255,.72);line-height:1.85;max-width:62ch;margin-top:1.25em}
.wpis-meta{display:flex;gap:1.5em;margin-top:1.75em;font-size:.8125rem;color:rgba(255,255,255,.45)}
.wpis-body{background:#fff;padding:4em 0}
.wpis-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:4em;align-items:start}

.wpis-tresc h2{font-size:clamp(1.25rem,2.5vw,1.625rem);font-weight:800;color:#1C1E1B;line-height:1.15;letter-spacing:-.02em;margin:2em 0 .75em}
.wpis-tresc h2:first-child{margin-top:0}
.wpis-tresc h2::after{content:'';display:block;width:44px;height:3px;background:linear-gradient(90deg,#D4A336,#C9A452);margin-top:.6em}
.wpis-tresc h3{font-size:1.0625rem;font-weight:800;color:#1C1E1B;line-height:1.3;margin:1.75em 0 .6em}
.wpis-tresc p{font-size:1rem;color:#3D4039;line-height:1.9;margin-bottom:1.1em}
.wpis-tresc strong{font-weight:800;color:#1C1E1B}
.wpis-tresc a{color:#28804D;font-weight:600;border-bottom:1px solid rgba(40,128,77,.35);transition:border-color .2s,color .2s}
.wpis-tresc a:hover{color:#1F6B40;border-bottom-color:#C9A452}
.wpis-tresc ul{list-style:none;display:flex;flex-direction:column;gap:.6em;margin:0 0 1.5em}
.wpis-tresc ul li{position:relative;padding-left:1.6em;font-size:1rem;color:#3D4039;line-height:1.8}
.wpis-tresc ul li::before{content:'';position:absolute;left:0;top:.72em;width:9px;height:2px;background:#28804D}
.wpis-tresc table{width:100%;border-collapse:collapse;margin:0 0 1.75em;font-size:.9375rem}
.wpis-tresc th{text-align:left;background:#0F2417;color:#fff;font-weight:700;padding:.9em 1em;font-size:.8125rem;letter-spacing:.02em}
.wpis-tresc td{padding:.9em 1em;border-bottom:1px solid #EAEAEA;color:#3D4039;line-height:1.7}
.wpis-tresc tr:last-child td{border-bottom:none}

.wpis-bok{display:flex;flex-direction:column;gap:1.25em;position:sticky;top:96px}
.wpis-box{background:#F5F6F4;border-left:3px solid #C9A452;padding:1.5em}
.wpis-box--ciemny{background:#0F2417;border-left-color:#28804D}
.wpis-box-tytul{font-size:.625rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:#8C8A85;margin-bottom:1em}
.wpis-box--ciemny .wpis-box-tytul{color:#96D4AC}
.wpis-box-lista{list-style:none;display:flex;flex-direction:column;gap:.75em}
.wpis-box-lista a{font-size:.9375rem;font-weight:600;color:#1C1E1B;line-height:1.5;transition:color .2s}
.wpis-box-lista a:hover{color:#28804D}
.wpis-box-tekst{font-size:.9375rem;color:rgba(255,255,255,.7);line-height:1.7;margin-bottom:1.25em}
.wpis-box--ciemny .btn-blue{width:100%;justify-content:center}
.wpis-brak{padding:10em 0 6em;text-align:center}
.wpis-brak h1{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;color:#1C1E1B;margin-bottom:.75em}
.wpis-brak p{color:#5D605A;margin-bottom:1.75em}

@media(max-width:960px){.wpis-grid{grid-template-columns:1fr;gap:2.5em}.wpis-bok{position:static}}
@media(max-width:600px){.wpis-hero{padding:6em 0 2em}.wpis-body{padding:2em 0}.wpis-box{padding:1em}.wpis-tresc table{display:block;overflow-x:auto;white-space:nowrap}}

/* ===== KAFELKI CASE STUDY ===== */
/* Uproszczone na prosbe wlasciciela: zdjecie, tytul, opis, przycisk.
   Bez plakietek na zdjeciu i bez kafelkow ze statystykami. */
.cs-lista{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5em}
.cs-kafel{display:flex;flex-direction:column;background:#fff;border:1px solid #DEDEDB;overflow:hidden;transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .45s cubic-bezier(.34,1.56,.64,1),border-color .3s}
.cs-kafel:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(15,36,23,.13);border-color:#28804D}
.cs-kafel-foto{display:block;position:relative;aspect-ratio:3/2;background:#0F2417;overflow:hidden}
.cs-kafel-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.cs-kafel:hover .cs-kafel-foto img{transform:scale(1.05)}
/* Zastepstwo dla realizacji bez zdjecia strony. Wczesniej stały tu dwie litery
   nazwy, teraz prawdziwy logotyp klienta pobrany z jego witryny. */
   Tlo jest jasne, nie ciemne, bo czesc logotypow jest bialym napisem na czarnym
   kafelku i na zieleni zniknelaby albo wymagalaby odwrocenia barw. */
.cs-kafel-logo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:2em;background:#F5F6F4}
.cs-kafel-logo img{max-width:62%;max-height:62%;width:auto;height:auto;object-fit:contain}
.cs-kafel-tresc{display:flex;flex-direction:column;gap:.75em;padding:1.75em;flex:1}
.cs-kafel-tytul{font-size:1.25rem;font-weight:800;color:#1C1E1B;line-height:1.15;letter-spacing:-.02em}
.cs-kafel-tytul::after{display:none}
.cs-kafel-tytul a{color:inherit;transition:color .2s}
.cs-kafel-tytul a:hover{color:#28804D}
.cs-kafel-opis{font-size:.9375rem;color:#5D605A;line-height:1.8;flex:1}
.cs-kafel-btn{align-self:flex-start;margin-top:.5em}
@media(max-width:900px){.cs-lista{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cs-lista{grid-template-columns:1fr;gap:1.25em}.cs-kafel-tresc{padding:1em}}
@media(prefers-reduced-motion:reduce){.cs-kafel{transition:none}.cs-kafel:hover{transform:none}.cs-kafel:hover .cs-kafel-foto img{transform:none}}

/* ===== O NAS: CZYM SIE ZAJMUJEMY ===== */
.onas-czym{background:#fff;padding:4em 0;border-bottom:1px solid #DEDEDB}
.onas-real{background:#F5F6F4;padding:4em 0;border-bottom:1px solid #DEDEDB}
.czym-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25em}
.czym-card{background:#F5F6F4;border-left:3px solid #C9A452;padding:2em}
.czym-icon{width:44px;height:44px;background:#0F2417;display:flex;align-items:center;justify-content:center;margin-bottom:1.25em}
.czym-icon svg{width:21px;height:21px;fill:none;stroke:#96D4AC;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.czym-title{font-size:1rem;font-weight:800;color:#1C1E1B;line-height:1.15;margin-bottom:.65em;letter-spacing:-.01em}
.czym-desc{font-size:.9375rem;color:#3D4039;line-height:1.8}
@media(max-width:900px){.czym-grid{grid-template-columns:1fr}}
@media(max-width:600px){.onas-czym,.onas-real{padding:2em 0}.czym-card{padding:1em}}

/* ===== LISTA PRAWDZIWYCH REALIZACJI ===== */
.real-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25em;margin-top:3em}
.real-item{display:flex;flex-direction:column;background:#fff;border:1px solid #DEDEDB;overflow:hidden;transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .45s cubic-bezier(.34,1.56,.64,1),border-color .3s}
.real-item:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(15,36,23,.13);border-color:#28804D}
.real-item-foto{display:block;position:relative;aspect-ratio:3/2;background:#0F2417;overflow:hidden}
.real-item-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.real-item:hover .real-item-foto img{transform:scale(1.05)}
.real-item-logo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:2em;background:#F5F6F4}
.real-item-logo img{max-width:62%;max-height:62%;width:auto;height:auto;object-fit:contain}
.real-item-tresc{display:flex;flex-direction:column;gap:.5em;padding:1.5em;flex:1}
.real-item-nazwa{font-size:1.125rem;font-weight:800;color:#1C1E1B;letter-spacing:-.01em}
.real-item-opis{font-size:.9375rem;color:#5D605A;line-height:1.7;flex:1}
.real-item-domena{display:inline-flex;align-items:center;gap:.5em;margin-top:.75em;padding-top:.9em;border-top:2px solid #C9A452;font-size:.8125rem;font-weight:700;color:#28804D}
.real-item-domena svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.home-real-cta{display:flex;justify-content:center;margin-top:3em}
@media(max-width:900px){.real-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.real-list{grid-template-columns:1fr;margin-top:2em}.real-item{padding:1em}}
@media(prefers-reduced-motion:reduce){.real-item{transition:none}.real-item:hover{transform:none}}

.form-alert{background:#FEF2F2;border-bottom:2px solid #B91C1C;color:#7F1D1D;font-size:.9375rem;font-weight:600;padding:1em 0;margin-top:70px}
.form-alert a{color:#B91C1C;text-decoration:underline}
.cta-form-done{background:rgba(255,255,255,.05);border:1px solid rgba(201,164,82,.3);padding:clamp(1.5em,3vw,2em);display:flex;flex-direction:column;gap:.5em;text-align:center}
.cta-form-done strong{font-size:1.125rem;font-weight:800;color:#fff;letter-spacing:-.01em}
.cta-form-done span{font-size:.9375rem;color:rgba(255,255,255,.65);line-height:1.7}
@media(max-width:760px){.cta-form-box{grid-template-columns:1fr}}
@media(max-width:600px){.cta-form{padding:2em 0}}

/* ===== Podgląd gotowej strony w case study ===== */
.cs-shot{background:#F5F6F4;padding:4em 0}
.cs-shot-fig{max-width:1000px;margin:0 auto}
.cs-shot-fig img{width:100%;height:auto;display:block;box-shadow:0 24px 60px rgba(15,36,23,.12)}
@media(max-width:600px){.cs-shot{padding:2em 0}}

/* ===== Oferta: realne zrzuty w ramce przeglądarki (zamiast atrap) ===== */

/* ===== Strona główna: Wybrane realizacje ===== */
.home-real{background:#fff;padding:4em 0;border-top:1px solid #DEDEDB}
.home-real-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5em;margin-bottom:2.5em}
.home-real-card{display:block;border:1px solid #DEDEDB;overflow:hidden;background:#F5F6F4;transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease}
.home-real-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(15,36,23,.13)}
.home-real-card img{width:100%;height:auto;display:block}
.home-real-cta{text-align:center}
@media(max-width:800px){.home-real-grid{grid-template-columns:1fr}}
@media(max-width:600px){.home-real{padding:2em 0}}

/* ===== Strona główna: sekcja Kontakt (koniec) ===== */
.home-kontakt{background:#0F2417;padding:4em 0;border-top:2px solid #C9A452}
.home-kontakt-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5em,4vw,3.5em);align-items:center}
.home-kontakt h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:#fff;margin-bottom:.55em}
.home-kontakt p{color:rgba(255,255,255,.75);max-width:44ch;margin-bottom:1.75em;line-height:1.8}
.home-kontakt-list{list-style:none;display:flex;flex-direction:column;gap:1em}
.home-kontakt-list li{display:flex;align-items:center;gap:.75em;color:#fff;font-size:1rem;font-weight:600}
.home-kontakt-list svg{width:20px;height:20px;flex-shrink:0;fill:none;stroke:#C9A452;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.home-kontakt-list a{color:#fff}
.home-kontakt-list a:hover{color:#96D4AC}
@media(max-width:760px){.home-kontakt-grid{grid-template-columns:1fr}}
@media(max-width:600px){.home-kontakt{padding:2em 0}}

/* ===== Złote akcenty: podkreślenie pod nagłówkami sekcji (cały serwis) ===== */
.sec-hdr-block h2::after,.srv-h2::after,.of-usluga h2::after,.prob-header h2::after,.hww-left h2::after,.dna h2::after,.onas-historia-text h2::after,.onas-wartosci-intro h2::after,.ust-intro-text h2::after,.ust-dfg h2::after,.ktk-info-title::after,.ktk-faq-left h2::after,.home-kontakt h2::after,.cta-form h2::after{content:'';display:block;width:52px;height:3px;background:linear-gradient(90deg,#D4A336,#C9A452);margin-top:.7em}
/* Złote akcenty: obramowania i hover */
.home-real-card:hover{border-color:#C9A452}
.cs-shot-fig img{border:1px solid rgba(201,164,82,.35)}
.case-card{border-top:3px solid #C9A452}