/* =========================================================================
   Audyt PPC (03.09.2026)

   HERO JEST WLASNE (.apc-*). Audyt SEO pokazuje w hero skan witryny, bo tego
   dotyczy. Audyt PPC dotyczy budzetu, wiec hero pokazuje, jak budzet rozchodzi
   sie na trzy strumienie i ktory z nich wraca sprzedaza. Inna kompozycja,
   inna animacja, ten sam brand.

   Zasady ruchu: animujemy transform, opacity i stroke-dashoffset. Jedno wejscie
   przy zaladowaniu, bez petli, zeby nie rozpraszalo przy czytaniu. Krzywa
   ease-out bez odbicia. Calosc wylacza sie przy prefers-reduced-motion.
   ========================================================================= */

body.netim-audyt-ppc{ --apc-eout: cubic-bezier(.16,1,.3,1) }

/* ---------- HERO: lista kontrolna obszarow konta ----------
   Wariant W3, wybrany przez Marcina 03.09.2026. Powielamy choreografie z hero
   audytu SEO, zeby obie strony byly rodzenstwem: linia skanujaca przechodzi przez
   karte, wiersze wjezdzaja co 0,12 s, znaczniki wyskakuja, podsumowanie na koncu,
   a status zmienia sie na "zakonczono". Roznica: tam skanujemy elementy witryny,
   tu obszary konta reklamowego, wiec doszla numeracja i plakietki z werdyktem.
   Uklad, karta i lewa kolumna pochodza z service.css i nie sa ruszane. */

/* karta ma 8 wierszy w dwoch grupach, wiec skan ma dluzsza droge niz na audycie SEO */
body.netim-audyt-ppc .ah-card--ppc{ padding-bottom:16px }
body.netim-audyt-ppc .ah-sbar--ppc{ padding:12px 18px; margin-bottom:11px }
body.netim-audyt-ppc .ah-sbar--ppc .u{ font-size:17px }
body.netim-audyt-ppc .ah-sbar--ppc .mag{ color:#1a4d8f }

/* Linia skanujaca jedzie LINIOWO, a nie ease-out, i to jest celowe: wiersze sa
   rozstawione rowno co ~47 px, wiec tylko staly ruch trafia w kolejne wiersze
   dokladnie w momencie, w ktorym zmieniaja stan. Przy ease-out linia wyprzedza
   dol listy o pol sekundy i ruch rozjezdza sie z trescia. */
body.netim-audyt-ppc .ah-card--ppc .ah-scan{
  animation-name:pkScan; animation-duration:1.16s; animation-delay:.97s;
  animation-timing-function:linear;
}
@keyframes pkScan{
  0%   { opacity:0; transform:translateY(0) }
  9%   { opacity:1 }
  86%  { opacity:1 }
  100% { opacity:0; transform:translateY(466px) }
}

/* ---------- lista obszarow ----------
   Kazdy wiersz ma jedna zmienna --t: moment wejscia. Wszystko inne liczy sie
   od niej (rozstrzygniecie +.44 s, plakietka +.50 s), wiec przesuniecie
   choreografii to zmiana dziewieciu liczb, a nie trzydziestu opoznien. */
body.netim-audyt-ppc .pk-lista{ list-style:none; margin:0; padding:0; display:grid; gap:5px }

body.netim-audyt-ppc .pk-r{
  display:flex; align-items:center; gap:11px;
  padding:9px 13px; border-radius:11px;
  font:600 13px/1.3 'Montserrat',sans-serif; color:#4b5878;
  background:rgba(9,16,54,.028);
  opacity:0; transform:translateX(10px);
  animation:ahRowIn .55s var(--eout,cubic-bezier(.16,1,.3,1)) var(--t) forwards;
}
/* wiersz z bledem jest ciezszy: ciemniejszy tekst, wiecej powietrza w pionie,
   wieksza plakietka. Tak samo rozroznia je hero audytu SEO, wiec obie strony
   czyta sie tym samym odruchem. */
body.netim-audyt-ppc .pk-zle{
  background:rgba(239,74,82,.08); color:#050a30; font-weight:700;
  padding-top:12px; padding-bottom:12px;
  box-shadow:inset 0 0 0 1px rgba(239,74,82,.14);
}
/* kontrast numerow byl 2,49 przy wymaganych 4,5 (pomiar 03.09.2026) */
body.netim-audyt-ppc .pk-n{
  font:800 10.5px/1 'Montserrat',sans-serif; color:#6b7290; min-width:17px;
  font-variant-numeric:tabular-nums;
}
body.netim-audyt-ppc .pk-t{ flex:1; min-width:0 }

/* ---------- znacznik: najpierw czeka, potem rozstrzyga ----------
   Poprzednia wersja rodzila wiersze juz ocenione, wiec karta wygladala na
   liste, ktora wjezdza, a nie na analize, ktora trwa. Teraz kazdy obszar
   pojawia sie z krecacym sie pierscieniem i dopiero przejscie linii skanujacej
   zamienia go w ptaszka albo krzyzyk. To jedyna petla w tym hero i gasnie
   po 2 sekundach. */
body.netim-audyt-ppc .pk-mk{
  width:21px; height:21px; border-radius:50%; flex:none; position:relative;
  background:rgba(5,10,48,0);
  transform:scale(.5); opacity:0;
  animation:
    ahMarkPop .42s var(--eout,cubic-bezier(.16,1,.3,1)) var(--t) forwards,
    pkRozstrzyg .46s var(--eout,cubic-bezier(.16,1,.3,1)) calc(var(--t) + .44s) forwards;
}
body.netim-audyt-ppc .pk-zle .pk-mk{ width:25px; height:25px }
body.netim-audyt-ppc .pk-ok  { --mkc:#1fbf6a; --mksh:rgba(31,191,106,.45) }
body.netim-audyt-ppc .pk-zle { --mkc:#ef4a52; --mksh:rgba(239,74,82,.55) }

body.netim-audyt-ppc .pk-mk > i{
  position:absolute; inset:0; border-radius:50%;
  border:1.7px solid rgba(5,10,48,.13); border-top-color:#26a7f0;
  animation:
    pkKreci .8s linear infinite,
    pkCzekaKoniec .26s linear calc(var(--t) + .44s) forwards;
}
@keyframes pkKreci{ to{ transform:rotate(360deg) } }
@keyframes pkCzekaKoniec{ to{ opacity:0 } }
@keyframes pkRozstrzyg{
  0%  { background:rgba(5,10,48,0); box-shadow:none; transform:scale(1) }
  52% { transform:scale(1.16) }
  60% { background:var(--mkc) }
  100%{ background:var(--mkc); box-shadow:0 4px 10px -3px var(--mksh); transform:scale(1) }
}

/* ptaszek i krzyzyk wchodza razem z wypelnieniem, nie przed nim */
body.netim-audyt-ppc .pk-mk::before,
body.netim-audyt-ppc .pk-mk::after{
  opacity:0; animation:pkGlif .3s var(--eout,cubic-bezier(.16,1,.3,1)) calc(var(--t) + .56s) forwards;
}
@keyframes pkGlif{ to{ opacity:1 } }
body.netim-audyt-ppc .pk-ok .pk-mk::after{
  content:""; position:absolute; left:7px; top:5px; width:5px; height:9px;
  border:solid #fff; border-width:0 2.4px 2.4px 0; transform:rotate(42deg);
}
body.netim-audyt-ppc .pk-zle .pk-mk::before,
body.netim-audyt-ppc .pk-zle .pk-mk::after{
  content:""; position:absolute; left:11.7px; top:6.5px; width:2.4px; height:12px;
  background:#fff; border-radius:2px;
}
body.netim-audyt-ppc .pk-zle .pk-mk::before{ transform:rotate(45deg) }
body.netim-audyt-ppc .pk-zle .pk-mk::after { transform:rotate(-45deg) }

body.netim-audyt-ppc .pk-b{
  font:800 9px/1 'Montserrat',sans-serif; letter-spacing:.09em; text-transform:uppercase;
  color:#c1373e; background:rgba(239,74,82,.13); padding:5px 8px; border-radius:6px;
  opacity:0; transform:scale(.88);
  animation:pkPlakietka .34s var(--eout,cubic-bezier(.16,1,.3,1)) calc(var(--t) + .50s) forwards;
}
@keyframes pkPlakietka{ to{ opacity:1; transform:none } }

/* wiersz konczacy liste: kontrast podniesiony z 3,08 do progu czytelnosci */
body.netim-audyt-ppc .pk-dalej{
  display:block; text-align:center; padding:9px 13px; border-radius:11px;
  background:none; color:#5b6385; font:600 12px/1.3 'Montserrat',sans-serif;
  border:1px dashed rgba(5,10,48,.18);
  opacity:0; animation:ahRowIn .55s var(--eout,cubic-bezier(.16,1,.3,1)) var(--t) forwards;
}

/* ---------- naglowek platformy ----------
   Audyt realnie dzieli sie na Google Ads i Meta Ads, wiec karta tez. Kreska
   miedzy nazwa a liczba obszarow wiaze oba konce wiersza, zeby liczba nie
   wisiala sama przy prawej krawedzi. Wczesniej Meta miala fiolet #7a3ea8,
   ktorego nie ma w brandbooku; zostaje jeden kolor dla obu grup. */
body.netim-audyt-ppc .pk-grupa{
  display:flex; align-items:center; gap:10px;
  padding:9px 4px 3px;
  opacity:0; animation:ahRowIn .5s var(--eout,cubic-bezier(.16,1,.3,1)) var(--t) forwards;
}
body.netim-audyt-ppc .pk-grupa.g1{ padding-top:2px }
body.netim-audyt-ppc .pk-grupa span{
  font:800 10.5px/1 'Montserrat',sans-serif; letter-spacing:.11em;
  text-transform:uppercase; color:#1a4d8f; flex:none;
}
body.netim-audyt-ppc .pk-hr{ flex:1; height:1px; background:rgba(5,10,48,.10) }
body.netim-audyt-ppc .pk-grupa em{
  font:600 10.5px/1 'Montserrat',sans-serif; font-style:normal; color:#656c8a; flex:none;
}

/* ---------- domkniecie karty: podzial budzetu ----------
   Hero audytu SEO konczy ciemny pasek z ocena /100. Tutaj oceny nie ma, bo
   audyt PPC nie wystawia noty koncie, tylko pokazuje, gdzie ida pieniadze.
   Wiec ten sam ciezar kompozycji, ale wlasna forma: pasek dzieli budzet konta
   na czesc pracujaca i czesc bez przypisanej konwersji. To jest wprost
   odpowiedz na pytanie z naglowka strony. */
body.netim-audyt-ppc .pk-bud{
  margin-top:12px; padding:15px 17px 15px; border-radius:15px;
  background:linear-gradient(180deg,#0a1148,#060c30);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 22px 44px -26px rgba(5,10,48,.75);
  opacity:0; animation:ahRise .7s var(--eout,cubic-bezier(.16,1,.3,1)) 2.10s forwards;
}
body.netim-audyt-ppc .pk-bud-h{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px }
body.netim-audyt-ppc .pk-bud-v small{
  display:block; margin-bottom:7px; text-align:right;
  font:600 9.5px/1 'Montserrat',sans-serif; letter-spacing:.13em;
  text-transform:uppercase; color:#9fb3d8;
}
body.netim-audyt-ppc .pk-bud-num{ display:flex; align-items:baseline }
body.netim-audyt-ppc .pk-bud-lab{ font:600 13.5px/1.25 'Montserrat',sans-serif; color:#c8d3ea }
body.netim-audyt-ppc .pk-bud-lab small{
  display:block; margin-bottom:7px;
  font:600 9.5px/1 'Montserrat',sans-serif; letter-spacing:.13em;
  text-transform:uppercase; color:#9fb3d8;
}
/* motyw ustawia globalnie b,strong{color:var(--body-font-bold-color)} = #333,
   wiec kazde <b> na ciemnym tle musi miec kolor podany wprost, inaczej znika */
body.netim-audyt-ppc .pk-bud-lab b{
  font:900 19px/1 'Montserrat',sans-serif; color:#fff; letter-spacing:-.02em;
  margin-right:2px; font-variant-numeric:tabular-nums;
}
body.netim-audyt-ppc .pk-bud-v{ display:flex; flex-direction:column; align-items:flex-end; flex:none; color:#e8983a }
body.netim-audyt-ppc .pk-bud-v b{
  font:900 31px/1 'Montserrat',sans-serif; letter-spacing:-.03em; color:#e8983a;
  font-variant-numeric:tabular-nums;
}
body.netim-audyt-ppc .pk-bud-v .pr{ font:900 17px/1 'Montserrat',sans-serif; margin-left:1px }

body.netim-audyt-ppc .pk-bud-bar{
  position:relative; height:14px; margin:14px 0 11px; border-radius:999px;
  background:rgba(255,255,255,.08); overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(5,10,48,.55);
}
/* podzialka co 25%: pasek ma czytac sie jak przyrzad pomiarowy, a nie jak
   pasek postepu. Rysowana nad wypelnieniem, wiec dziala na obu segmentach. */
body.netim-audyt-ppc .pk-bud-bar::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:999px;
  background:repeating-linear-gradient(90deg,
    transparent 0 calc(25% - 1.5px), rgba(5,10,48,.30) calc(25% - 1.5px) 25%);
}
body.netim-audyt-ppc .pk-bud-bar span{
  position:absolute; top:0; bottom:0; border-radius:999px;
  transform:scaleX(0); transform-origin:left center;
  animation:pkPasek .78s var(--eout,cubic-bezier(.16,1,.3,1)) forwards;
}
/* granica pada dokladnie na kreske podzialki (75%), wiec czyta sie jak odczyt
   z przyrzadu, a nie jak przypadkowe miejsce. Zaokraglenie tylko od zewnatrz,
   inaczej oba segmenty nachodza na siebie soczewkami w miejscu styku. */
body.netim-audyt-ppc .pk-bud-bar .ok { left:0;   width:75%; animation-delay:2.24s;
  border-radius:999px 0 0 999px;
  background:linear-gradient(180deg,#4ccb7c,#34ae62) }
body.netim-audyt-ppc .pk-bud-bar .zle{ left:75%; width:25%; animation-delay:2.66s; overflow:hidden;
  border-radius:0 999px 999px 0;
  background:linear-gradient(180deg,#f0a44a,#dd8b2c) }
/* skos w czesci przepalanej: jedyny powolny ruch, ktory zostaje po wejsciu.
   Ma czytac sie jak ubytek, wiec plynie w prawo, poza pasek. */
body.netim-audyt-ppc .pk-bud-bar .zle::after{
  content:""; position:absolute; inset:0; width:200%;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.11) 0 2px,rgba(255,255,255,0) 2px 7px);
  animation:pkUbytek 4.6s linear 3.4s infinite;
}
@keyframes pkPasek{ to{ transform:scaleX(1) } }
@keyframes pkUbytek{ from{ transform:translateX(-8px) } to{ transform:translateX(0) } }

body.netim-audyt-ppc .pk-bud-leg{ display:flex; justify-content:space-between; gap:12px }
body.netim-audyt-ppc .pk-bud-leg span{
  position:relative; padding-left:13px;
  font:600 10.5px/1.3 'Montserrat',sans-serif; color:#b9c6e2;
}
body.netim-audyt-ppc .pk-bud-leg span::before{
  content:""; position:absolute; left:0; top:4px; width:7px; height:7px; border-radius:50%;
}
body.netim-audyt-ppc .pk-bud-leg .l-ok::before { background:#3dbd6e }
body.netim-audyt-ppc .pk-bud-leg .l-zle::before{ background:#e8983a }

/* ---------- czasy ----------
   Wiersze co 0,11 s. Linia skanujaca przechodzi przez wiersz mniej wiecej
   0,44 s po jego wejsciu i wtedy znacznik sie rozstrzyga. */
body.netim-audyt-ppc .g1{ --t:.60s }
body.netim-audyt-ppc .k1{ --t:.72s }
body.netim-audyt-ppc .k2{ --t:.84s }
body.netim-audyt-ppc .k3{ --t:.97s }
body.netim-audyt-ppc .k4{ --t:1.09s }
body.netim-audyt-ppc .k5{ --t:1.20s }
body.netim-audyt-ppc .g2{ --t:1.30s }
body.netim-audyt-ppc .k6{ --t:1.40s }
body.netim-audyt-ppc .k7{ --t:1.52s }
body.netim-audyt-ppc .k9{ --t:1.63s }

/* ---------- waski ekran ----------
   Hero mialo 1500 px przy ekranie 844 px, czyli prawie dwa ekrany (pomiar
   03.09.2026). Hero audytu SEO ma tam 1226 px, wiec schodzimy w te okolice:
   dwa ostatnie wiersze grupy Google ida do sekcji "Co sprawdzamy" nizej, a
   reszta karty sie zageszcza. Chowamy KONCOWE wiersze grupy, nie srodkowe,
   zeby numeracja zostala ciagla (01-02-03, potem 09-10) i nie wygladala na blad. */
@media (max-width: 900px){
  body.netim-audyt-ppc .pk-mob{ display:none }
  body.netim-audyt-ppc .pk-r{ padding:8px 12px; gap:9px; font-size:12.5px }
  body.netim-audyt-ppc .pk-zle{ padding-top:10px; padding-bottom:10px }
  body.netim-audyt-ppc .pk-lista{ gap:5px }
  body.netim-audyt-ppc .pk-grupa{ padding:9px 4px 3px }
  body.netim-audyt-ppc .pk-dalej{ padding:8px 12px; font-size:11.5px }
  body.netim-audyt-ppc .pk-bud{ margin-top:11px; padding:13px 14px 12px }
  body.netim-audyt-ppc .pk-bud-v b{ font-size:27px }
  body.netim-audyt-ppc .pk-bud-lab b{ font-size:19px }
  /* skan konczy bieg na dole krotszej karty, zeby nie wyjezdzal poza nia */
  /* numer konta byl obcinany do "123-456" (pasek ma nowrap+overflow:hidden) */
  body.netim-audyt-ppc .ah-sbar--ppc{ padding:11px 15px }
  body.netim-audyt-ppc .ah-sbar--ppc .u{ font-size:14px }
  body.netim-audyt-ppc .ah-sbar--ppc .mag{ width:20px; height:20px }
  /* plakietki zjadaly szerokosc i tytuly lamaly sie na dwie i trzy linie */
  body.netim-audyt-ppc .pk-r{ font-size:12px; gap:8px }
  body.netim-audyt-ppc .pk-n{ font-size:10px; min-width:15px }
  body.netim-audyt-ppc .pk-b{ font-size:8px; padding:4px 6px; letter-spacing:.06em }
  body.netim-audyt-ppc .pk-mk{ width:19px; height:19px }
  body.netim-audyt-ppc .pk-zle .pk-mk{ width:22px; height:22px }
  body.netim-audyt-ppc .pk-ok .pk-mk::after{ left:6px; top:4.5px; width:4.5px; height:8px }
  body.netim-audyt-ppc .pk-zle .pk-mk::before,
  body.netim-audyt-ppc .pk-zle .pk-mk::after{ left:10.2px; top:5.5px; height:10.5px }
  body.netim-audyt-ppc .pk-bud-leg{ gap:10px }
  body.netim-audyt-ppc .pk-bud-leg span{ font-size:10px }
  body.netim-audyt-ppc .ah-card--ppc .ah-scan{ animation-duration:1.16s }
}

/* Ponizej 380 px plakietki nie miesza sie juz obok tytulu: przy 360 px wiersz
   "Pixel i Conversion API" lamal sie na trzy linie, a numer konta byl obcinany
   (pomiar 03.09.2026). Werdykt niesie sam znacznik, a konkretne liczby zostaja
   na szerszych ekranach i w sekcji "Co sprawdzamy" nizej. */
@media (max-width: 379px){
  body.netim-audyt-ppc .pk-b{ display:none }
  body.netim-audyt-ppc .ah-sbar--ppc .u{ font-size:12px }
}

@media (prefers-reduced-motion: reduce){
  body.netim-audyt-ppc .pk-r,
  body.netim-audyt-ppc .pk-mk,
  body.netim-audyt-ppc .pk-mk::before,
  body.netim-audyt-ppc .pk-mk::after,
  body.netim-audyt-ppc .pk-b,
  body.netim-audyt-ppc .pk-grupa,
  body.netim-audyt-ppc .pk-dalej,
  body.netim-audyt-ppc .pk-bud,
  body.netim-audyt-ppc .pk-bud-bar span,
  body.netim-audyt-ppc .pk-bud-bar .zle::after{
    animation:none; opacity:1; transform:none;
  }
  body.netim-audyt-ppc .pk-mk{ background:var(--mkc); box-shadow:0 4px 10px -3px var(--mksh) }
  body.netim-audyt-ppc .pk-mk > i{ display:none }
  body.netim-audyt-ppc .ah-card--ppc .ah-scan{ display:none }
}

/* ---------- pasek szkicu ---------- */
body.netim-audyt-ppc .ap-draft{
  text-align: center;
  font: 700 12px/1.4 'Montserrat', sans-serif; letter-spacing: .04em;
  color: #4a2c00; background: #e8983a; padding: 10px 18px;
}

/* ---------- kafelki korzysci ---------- */
body.netim-audyt-ppc .ap-grid{
  display: grid; gap: 18px; margin-top: 26px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
body.netim-audyt-ppc .ap-tile{
  border: 1.5px solid rgba(5,10,48,.10); border-radius: 16px; padding: 22px 20px 20px;
  background: #fbfcff;
  box-shadow: 0 1px 0 rgba(5,10,48,.04), 0 30px 56px -40px rgba(5,10,48,.40);
  transition: transform .3s var(--apc-eout), box-shadow .3s;
}
body.netim-audyt-ppc .ap-tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(5,10,48,.05), 0 40px 72px -44px rgba(5,10,48,.46);
}
body.netim-audyt-ppc .ap-tile b{
  display: block; font: 800 12px/1 'Montserrat', sans-serif;
  letter-spacing: .12em; color: #1e5e9f; margin-bottom: 12px;
}
body.netim-audyt-ppc .ap-tile h3{
  font: 800 clamp(17px,1.5vw,19px)/1.28 'Montserrat', sans-serif;
  letter-spacing: -.015em; color: #050a30; margin: 0 0 8px;
}
body.netim-audyt-ppc .ap-tile p{
  font: 500 14.5px/1.62 'Montserrat', sans-serif; color: #5b6385; margin: 0;
}

/* ---------- lista zakresu ---------- */
body.netim-audyt-ppc .ap-list{
  list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
body.netim-audyt-ppc .ap-list li{
  position: relative; padding: 13px 16px 13px 42px; border-radius: 12px;
  background: #fbfcff; border: 1.5px solid rgba(5,10,48,.10);
  font: 600 14.5px/1.45 'Montserrat', sans-serif; color: #2a3150;
}
body.netim-audyt-ppc .ap-list li::before{
  content: ""; position: absolute; left: 16px; top: 50%;
  width: 12px; height: 12px; margin-top: -6px; border-radius: 4px; background: #80dfa0;
}

/* ---------- kiedy potrzebujesz audytu ---------- */
body.netim-audyt-ppc .ap-when{
  display: grid; gap: 12px; margin-top: 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
body.netim-audyt-ppc .ap-when li{
  list-style: none; position: relative; padding: 16px 18px 16px 52px;
  border-radius: 14px; background: #fff; border: 1.5px solid rgba(5,10,48,.10);
  font: 600 14.5px/1.5 'Montserrat', sans-serif; color: #2a3150;
}
body.netim-audyt-ppc .ap-when li::before{
  content: "?"; position: absolute; left: 16px; top: 15px;
  width: 24px; height: 24px; border-radius: 8px;
  display: grid; place-items: center;
  font: 800 13px/1 'Montserrat', sans-serif; color: #c1373e; background: rgba(239,74,82,.12);
}

/* ---------- co dostajesz ---------- */
body.netim-audyt-ppc .ap-out{
  display: grid; gap: 16px; margin-top: 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
body.netim-audyt-ppc .ap-out article{
  border-radius: 16px; padding: 22px 20px;
  background: linear-gradient(180deg, #0a1148, #070d33); color: #fff;
  box-shadow: 0 30px 56px -40px rgba(5,10,48,.6);
}
body.netim-audyt-ppc .ap-out h3{
  margin: 0 0 8px; font: 800 17px/1.3 'Montserrat', sans-serif; letter-spacing: -.015em;
}
body.netim-audyt-ppc .ap-out p{ margin: 0; font: 500 14px/1.6 'Montserrat', sans-serif; color: rgba(255,255,255,.72) }
body.netim-audyt-ppc .ap-out em{
  display: block; margin-bottom: 10px; font-style: normal;
  font: 800 11px/1 'Montserrat', sans-serif; letter-spacing: .12em;
  text-transform: uppercase; color: #80dfa0;
}

/* ---------- RWD ---------- */
@media (max-width: 980px){
  body.netim-audyt-ppc .apc-wrap{ grid-template-columns: minmax(0,1fr); gap: 32px }
  body.netim-audyt-ppc .apc-hero h1{ max-width: 22ch }
  body.netim-audyt-ppc .apc-cap{ text-align: left }
  body.netim-audyt-ppc .apc-syg{ display: none }
}
@media (prefers-reduced-motion: reduce){
  body.netim-audyt-ppc .apc-s{ stroke-dashoffset: 0 }
  body.netim-audyt-ppc .apc-bar{ transform: none }
}

/* ---------- dopisek pod CTA w hero ---------- */
body.netim-audyt-ppc .apc-note{
  flex-basis: 100%;
  font: 500 12.5px/1.5 'Montserrat', sans-serif; color: rgba(255,255,255,.5);
}

/* ---------- blok prozy ---------- */
body.netim-audyt-ppc .ap-proza p{
  max-width: 74ch; margin: 0 0 16px;
  font: 500 16px/1.72 'Montserrat', sans-serif; color: #4a5273;
}

/* ---------- jak pracujemy: dane z API ---------- */
body.netim-audyt-ppc .ap-api-box{
  border-radius: 22px; padding: clamp(26px, 3.4vw, 44px);
  background: linear-gradient(158deg, #0a1148, #070d33 60%, #04081d);
  color: #fff; position: relative; overflow: hidden;
  box-shadow: 0 40px 80px -50px rgba(5,10,48,.8);
}
body.netim-audyt-ppc .ap-api-lab{
  display: inline-block; margin-bottom: 12px;
  font: 800 11px/1 'Montserrat', sans-serif; letter-spacing: .13em;
  text-transform: uppercase; color: #80dfa0;
}
body.netim-audyt-ppc .ap-api-box h2{
  margin: 0 0 16px;
  font: 900 clamp(24px,2.6vw,36px)/1.14 'Montserrat', sans-serif;
  letter-spacing: -.025em; color: #fff;
}
body.netim-audyt-ppc .ap-api-box p{
  max-width: 76ch; margin: 0 0 14px;
  font: 500 15.5px/1.7 'Montserrat', sans-serif; color: rgba(255,255,255,.78);
}
body.netim-audyt-ppc .ap-api-cyt{
  margin: 20px 0 0 !important; padding: 16px 20px;
  border-left: 3px solid #80dfa0; border-radius: 0 12px 12px 0;
  background: rgba(128,223,160,.08);
  font-style: italic; color: rgba(255,255,255,.9) !important;
}

/* ---------- podtytul platformy ---------- */
body.netim-audyt-ppc .ap-podtyt{ margin: 34px 0 0 }
body.netim-audyt-ppc .ap-plat{
  display: inline-block; padding: 8px 16px; border-radius: 999px;
  font: 800 13px/1 'Montserrat', sans-serif; letter-spacing: .02em;
  color: #1a4d8f; background: rgba(38,167,240,.14);
}
body.netim-audyt-ppc .ap-plat--meta{ color: #7a3ea8; background: rgba(138,80,204,.14) }
body.netim-audyt-ppc .ap-list li b{ color: #050a30; font-weight: 800 }
body.netim-audyt-ppc .ap-list{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)) }
body.netim-audyt-ppc .ap-list li{ padding-left: 44px; font-weight: 500; line-height: 1.55 }
body.netim-audyt-ppc .ap-list li::before{ top: 21px; margin-top: 0 }

/* ---------- kroki procesu ---------- */
body.netim-audyt-ppc .ap-kroki{
  counter-reset: k; list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
body.netim-audyt-ppc .ap-kroki li{
  counter-increment: k; position: relative;
  padding: 46px 20px 20px; border-radius: 16px;
  background: #fbfcff; border: 1.5px solid rgba(5,10,48,.10);
  font: 500 14.5px/1.6 'Montserrat', sans-serif; color: #5b6385;
}
body.netim-audyt-ppc .ap-kroki li b{ display: block; margin-bottom: 6px; color: #050a30; font-weight: 800 }
body.netim-audyt-ppc .ap-kroki li::before{
  content: counter(k, decimal-leading-zero);
  position: absolute; top: 18px; left: 20px;
  font: 800 12px/1 'Montserrat', sans-serif; letter-spacing: .1em; color: #1e5e9f;
}

/* ---------- callout ---------- */
body.netim-audyt-ppc .ap-callout{
  border-radius: 20px; padding: clamp(24px,3vw,38px);
  background: #f2f7ff; border: 1.5px solid rgba(38,167,240,.22);
}
body.netim-audyt-ppc .ap-callout h2{
  margin: 0 0 12px; font: 900 clamp(22px,2.3vw,30px)/1.16 'Montserrat', sans-serif;
  letter-spacing: -.025em; color: #050a30;
}
body.netim-audyt-ppc .ap-callout p{
  margin: 0; max-width: 78ch; font: 500 15.5px/1.72 'Montserrat', sans-serif; color: #4a5273;
}

/* ---------- FAQ ---------- */
/* FAQ korzysta teraz ze STANDARDOWEGO modulu serwisu (.f8-grid + .faq-list
   + parts/faq-cta), tego samego co /audyty-seo/, /google-ads/ i reszta uslug.
   Wlasny .ap-faq byl bledem: druga implementacja tego samego. Usuniety. */


/* jw.: motyw wymusza color:inherit i font-style:normal na <em> w naglowkach
   regula o wyzszej specyficznosci (zdublowana klasa), wiec dublujemy tez u siebie */
html body.netim-audyt-ppc.netim-audyt-ppc.netim-landing .apc-hero h1 em{
  font-style: italic !important;
  font-weight: 900 !important;
  color: #80dfa0 !important;
}

/* =========================================================================
   SEKCJA 2: "Jak audyt przelozy sie na Twoj biznes?"  (03.09.2026)

   Bylo: cztery identyczne kafelki w siatce auto-fit. To najbardziej zuzyty
   uklad w sieci i nic nie wnosi, bo kazdy kafelek wyglada tak samo wazny.
   Jest: lewa kolumna to lista redakcyjna bez ramek (numer, tytul, akapit,
   rozdzielone wlosowa linia), prawa to karta z fragmentem raportu w tej samej
   rodzinie co karta z hero: ten sam promien, ten sam uklad cieni, ta sama
   krzywa wejscia. Karta nie ilustruje sekcji, tylko dowodzi punktu 03.
   ========================================================================= */

body.netim-audyt-ppc .apk{
  display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(34px,4.4vw,64px); align-items:start; margin-top:clamp(28px,3vw,44px);
}

/* ---------- lewa kolumna: lista korzysci ---------- */
body.netim-audyt-ppc .apk-lista{ list-style:none; margin:0; padding:0 }
body.netim-audyt-ppc .apk-lista li{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(16px,1.6vw,24px);
  padding:clamp(20px,2.1vw,26px) 0; border-top:1px solid rgba(5,10,48,.11);
}
body.netim-audyt-ppc .apk-lista li:first-child{ border-top:0; padding-top:0 }
body.netim-audyt-ppc .apk-n{
  font:900 clamp(26px,2.7vw,34px)/1 'Montserrat',sans-serif;
  letter-spacing:-.03em; color:#7386b2; font-variant-numeric:tabular-nums;
  padding-top:2px;
}
body.netim-audyt-ppc .apk-tx h3{
  margin:0 0 9px; font:800 clamp(17px,1.55vw,20px)/1.3 'Montserrat',sans-serif;
  letter-spacing:-.016em; color:#050a30; text-wrap:balance;
}
body.netim-audyt-ppc .apk-tx p{
  margin:0; font:500 clamp(14px,1.06vw,15px)/1.68 'Montserrat',sans-serif;
  color:#5b6385; max-width:52ch;
}

/* ---------- prawa kolumna: fragment raportu ----------
   Wyglad wziety z NASZYCH realnych dokumentow, nie z wyobrazenia (Dropbox,
   sprawdzone 03.09.2026):
   - okladka audytu konta Google Ads: ciemny pasek z nazwa dokumentu i logo,
     pod nim linia z kontem i zakresem dat
   - numerowane pozycje z nazwa obszaru, tak jak w audycie mediasklep24
   - kafelki wskaznikow z raportow miesiecznych (Ceramika z Bolka): mala
     etykieta, duza liczba, komentarz pod spodem
   - zestawienie "wartosc raportowana kontra rzeczywista" to najmocniejszy
     wzorzec z naszego audytu, gdzie ROAS okazal sie kilkanascie razy nizszy
     od raportowanego. Liczby na karcie sa WYMYSLONE: konto jest przykladowe,
     wiec dane realnego klienta nie moga tu trafic.
   Cienie i promien jak w karcie z hero, zeby obie karty na stronie czytalo
   sie jako jeden przedmiot. */
body.netim-audyt-ppc .apk-karta{
  position:sticky; top:104px; overflow:hidden;
  background:linear-gradient(180deg,#eef3fc,#e7edf9);
  border-radius:22px;
  box-shadow:
    0 2px 0 0 rgba(255,255,255,.7) inset,
    0 60px 100px -58px rgba(5,10,48,.55),
    0 22px 48px -26px rgba(5,10,48,.30),
    0 2px 8px -2px rgba(5,10,48,.14);
}

/* pasek naglowka: odpowiednik okladki naszego audytu */
body.netim-audyt-ppc .apk-top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 20px 15px;
  background:linear-gradient(180deg,#0a1148,#060c30);
}
body.netim-audyt-ppc .apk-top-tx{
  font:800 15px/1.2 'Montserrat',sans-serif; color:#fff; letter-spacing:-.012em;
}
body.netim-audyt-ppc .apk-top-tx small{
  display:block; margin-bottom:5px;
  font:600 9.5px/1 'Montserrat',sans-serif; letter-spacing:.14em;
  text-transform:uppercase; color:#9fb3d8;
}
body.netim-audyt-ppc .apk-top-logo{ width:88px; height:auto; flex:none; opacity:.92 }

body.netim-audyt-ppc .apk-meta{
  display:flex; align-items:center; gap:8px;
  padding:11px 20px; margin:0;
  background:rgba(5,10,48,.045);
  border-bottom:1px solid rgba(5,10,48,.08);
  font:600 10.5px/1 'Montserrat',sans-serif; color:#5c6383;
}
body.netim-audyt-ppc .apk-meta i{
  width:5px; height:5px; border-radius:50%; background:#3dbd6e; flex:none; font-style:normal;
}

body.netim-audyt-ppc .apk-f{
  margin:14px 16px 0; padding:15px 16px 16px; border-radius:14px;
  background:#fff; box-shadow:0 0 0 1px rgba(5,10,48,.055), 0 14px 26px -20px rgba(5,10,48,.42);
}
body.netim-audyt-ppc .apk-f header{
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
}
/* numery z karty raportu usuniete 03.09.2026: kolidowaly ze stala numeracja
   obszarow 01-13, ktorej strona uzywa w hero i w sekcji "Co sprawdzamy".
   Kolejnosc niosa plakietki "Priorytet 1" i "Priorytet 2". */
body.netim-audyt-ppc .apk-f h4{
  margin:0; flex:1; min-width:0;
  font:800 15px/1.32 'Montserrat',sans-serif; letter-spacing:-.012em; color:#050a30;
}
body.netim-audyt-ppc .apk-p{
  flex:none;
  font:800 9px/1 'Montserrat',sans-serif; letter-spacing:.1em; text-transform:uppercase;
  color:#c1373e; background:rgba(239,74,82,.12); padding:5px 8px; border-radius:6px;
}
body.netim-audyt-ppc .apk-p--2{ color:#96590f; background:rgba(232,152,58,.16) }

/* zestawienie wartosci raportowanej i rzeczywistej */
body.netim-audyt-ppc .apk-kpi{
  display:flex; align-items:stretch; gap:10px; margin-bottom:12px;
}
body.netim-audyt-ppc .apk-kpi-c{
  flex:1; min-width:0; padding:11px 12px 10px; border-radius:11px;
  background:rgba(9,16,54,.04);
}
body.netim-audyt-ppc .apk-kpi-c small{
  display:block; margin-bottom:6px;
  font:700 8.5px/1.2 'Montserrat',sans-serif; letter-spacing:.09em;
  text-transform:uppercase; color:#63698a;
}
body.netim-audyt-ppc .apk-kpi-c b{
  display:block; font:900 22px/1 'Montserrat',sans-serif;
  letter-spacing:-.025em; color:#3a4160; font-variant-numeric:tabular-nums;
}
body.netim-audyt-ppc .apk-kpi-c em{
  display:block; margin-top:6px; font-style:normal;
  font:700 9px/1.25 'Montserrat',sans-serif; color:#63698a;
}
body.netim-audyt-ppc .apk-kpi-c--zle em{ color:#96590f }
body.netim-audyt-ppc .apk-kpi-c--zle{ background:rgba(232,152,58,.13) }
body.netim-audyt-ppc .apk-kpi-c--zle b{ color:#050a30 }
body.netim-audyt-ppc .apk-kpi-s{
  width:19px; height:19px; flex:none; align-self:center; color:#63698a;
}
/* prawa wartosc wchodzi po lewej: najpierw czyta sie liczbe z panelu,
   dopiero potem to, ile wynosi naprawde */
body.netim-audyt-ppc.js-reveal .apk-kpi-c--zle,
body.netim-audyt-ppc.js-reveal .apk-kpi-s{
  opacity:0; transform:translateX(-8px);
  transition:opacity .5s var(--ease) .5s, transform .5s var(--ease) .5s;
}
body.netim-audyt-ppc.js-reveal .apk-kpi-s{ transition-delay:.42s }
body.netim-audyt-ppc.js-reveal .apk-karta.in .apk-kpi-c--zle,
body.netim-audyt-ppc.js-reveal .apk-karta.in .apk-kpi-s{ opacity:1; transform:none }

body.netim-audyt-ppc .apk-dow{
  margin:0 0 12px; padding-left:11px; position:relative;
  font:600 12.5px/1.5 'Montserrat',sans-serif; color:#5b6385;
}
body.netim-audyt-ppc .apk-dow::before{
  content:""; position:absolute; left:0; top:4px; bottom:4px; width:2px;
  border-radius:2px; background:rgba(5,10,48,.16);
}
/* motyw ustawia globalnie b,strong{color:#333}, wiec kolor podajemy wprost */
body.netim-audyt-ppc .apk-dow b{ font-weight:800; color:#050a30 }
body.netim-audyt-ppc .apk-rek{
  margin:0; padding-top:11px; border-top:1px dashed rgba(5,10,48,.14);
  font:500 12.5px/1.6 'Montserrat',sans-serif; color:#3a4160;
}
body.netim-audyt-ppc .apk-rek span{
  display:block; margin-bottom:4px;
  font:800 9px/1 'Montserrat',sans-serif; letter-spacing:.11em;
  text-transform:uppercase; color:#1f7a48;
}
body.netim-audyt-ppc .apk-wiecej{
  margin:13px 16px 15px; text-align:center;
  font:600 11.5px/1.4 'Montserrat',sans-serif; color:#5f6684;
}

@media (max-width: 1000px){
  body.netim-audyt-ppc .apk{ grid-template-columns:minmax(0,1fr) }
  body.netim-audyt-ppc .apk-karta{ position:static; max-width:520px }
}

/* ---------- wejscie sekcji przy przewijaniu ----------
   Strona SEO ma to od poczatku, PPC nie mialo wcale i dlatego wszystko ponizej
   hero wygladalo martwo. Stan poczatkowy dla elementow z service.css ustawia
   samo service.css (klasa .netim-audyt.js-reveal); tutaj tylko wlasne elementy
   PPC. UWAGA: skrypt musi obserwowac RowNIEZ selektory z service.css, inaczej
   ukryte przez nia elementy nigdy nie dostana klasy .in i znikna na stale. */
body.netim-audyt-ppc.js-reveal .apk-lista li,
body.netim-audyt-ppc.js-reveal .apk-karta{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
body.netim-audyt-ppc.js-reveal .apk-lista li.in,
body.netim-audyt-ppc.js-reveal .apk-karta.in{ opacity:1; transform:none }
/* wpisy raportu wchodza PO karcie, nie razem z nia, wiec czyta sie to jak
   dwie rzeczy w kolejnosci, a nie jeden blok, ktory podskoczyl */
body.netim-audyt-ppc.js-reveal .apk-karta .apk-f{
  opacity:0; transform:translateY(14px);
  transition:opacity .55s var(--ease) .2s, transform .55s var(--ease) .2s;
}
body.netim-audyt-ppc.js-reveal .apk-karta .apk-f.f2{ transition-delay:.34s }
body.netim-audyt-ppc.js-reveal .apk-karta.in .apk-f{ opacity:1; transform:none }
body.netim-audyt-ppc.js-reveal .apk-karta .apk-wiecej{
  opacity:0; transition:opacity .5s var(--ease) .56s;
}
body.netim-audyt-ppc.js-reveal .apk-karta.in .apk-wiecej{ opacity:1 }

@media (prefers-reduced-motion: reduce){
  body.netim-audyt-ppc.js-reveal .apk-lista li,
  body.netim-audyt-ppc.js-reveal .apk-karta,
  body.netim-audyt-ppc.js-reveal .apk-karta .apk-f,
  body.netim-audyt-ppc.js-reveal .apk-karta .apk-wiecej,
  body.netim-audyt-ppc.js-reveal .apk-kpi-c--zle,
  body.netim-audyt-ppc.js-reveal .apk-kpi-s{
    opacity:1!important; transform:none!important; transition:none!important;
  }
}

/* Naglowki sekcji sa jednobarwne CELOWO: style.css ma regule "DOBICIE
   dwukolorowych akcentow w naglowkach - jeden kolor, jeden styl" z !important.
   Probowalem tu przywrocic kursywe akcentu z brandbooka i wycofalem sie, bo to
   nasza wlasna, swiadoma decyzja, a nie usterka kaskady. Kursywa zostaje
   akcentem w H1 hero (tam regula jej nie lapie), nie w naglowkach sekcji. */

/* =========================================================================
   SEKCJA 3: "Czym jest audyt kampanii PPC?"  (03.09.2026)

   Bylo: dwa akapity prozy na pelnej szerokosci, bez zadnego obrazu.
   Jest: uklad z /pozycjonowanie/ (.story), czyli realne zdjecie zespolu obok
   tekstu. Wartosci przepisane z pozycjonowanie-v2.css, zeby obie strony mialy
   ten sam przedmiot, a nie dwa podobne. Zdjecie po lewej, bo karta w sekcji
   wyzej stoi po prawej i uklad ma sie zmieniac.
   ========================================================================= */

body.netim-audyt-ppc .aps{ background:#f1f4fb }
body.netim-audyt-ppc .aps-wrap{
  display:grid; grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);
  gap:clamp(32px,4.6vw,64px); align-items:center;
}
body.netim-audyt-ppc .aps-foto{
  position:relative; margin:0; border-radius:24px; overflow:hidden;
  box-shadow:0 50px 90px -50px rgba(5,10,48,.5);
}
body.netim-audyt-ppc .aps-foto img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
}
body.netim-audyt-ppc .aps-foto figcaption{
  position:absolute; left:16px; bottom:16px;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:999px;
  background:rgba(5,10,48,.72);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:#fafbff; font:700 italic 11.5px/1 'Montserrat',sans-serif;
}
body.netim-audyt-ppc .aps-foto figcaption i{
  width:7px; height:7px; border-radius:50%; background:#80dfa0; flex:none;
}
body.netim-audyt-ppc .aps-tx .sec-h{ text-align:left }
body.netim-audyt-ppc .aps-tx p{
  margin:18px 0 0; font:500 15.5px/1.7 'Montserrat',sans-serif; color:#5b6385;
}
body.netim-audyt-ppc .aps-pts{
  display:grid; gap:12px; margin:24px 0 0; padding:0; list-style:none;
}
body.netim-audyt-ppc .aps-pts li{
  display:flex; gap:11px; align-items:flex-start;
  font:600 14.5px/1.45 'Montserrat',sans-serif; color:#1a2046;
}
body.netim-audyt-ppc .aps-pts li svg{
  width:20px; height:20px; flex:none; color:#3dbd6e; margin-top:1px;
}

/* wejscie: zdjecie i kolumna tekstu wchodza osobno, zdjecie pierwsze */
body.netim-audyt-ppc.js-reveal .aps-foto,
body.netim-audyt-ppc.js-reveal .aps-tx{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
body.netim-audyt-ppc.js-reveal .aps-foto.in,
body.netim-audyt-ppc.js-reveal .aps-tx.in{ opacity:1; transform:none }
body.netim-audyt-ppc.js-reveal .aps-pts li{
  opacity:0; transform:translateX(8px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
body.netim-audyt-ppc.js-reveal .aps-tx.in .aps-pts li{ opacity:1; transform:none }
body.netim-audyt-ppc.js-reveal .aps-tx.in .aps-pts li:nth-child(1){ transition-delay:.22s }
body.netim-audyt-ppc.js-reveal .aps-tx.in .aps-pts li:nth-child(2){ transition-delay:.32s }
body.netim-audyt-ppc.js-reveal .aps-tx.in .aps-pts li:nth-child(3){ transition-delay:.42s }

@media (max-width: 1000px){
  body.netim-audyt-ppc .aps-wrap{ grid-template-columns:minmax(0,1fr); gap:28px }
}
@media (prefers-reduced-motion: reduce){
  body.netim-audyt-ppc.js-reveal .aps-foto,
  body.netim-audyt-ppc.js-reveal .aps-tx,
  body.netim-audyt-ppc.js-reveal .aps-pts li{
    opacity:1!important; transform:none!important; transition:none!important;
  }
}

/* =========================================================================
   SEKCJA 4: "Jak pracujemy?" - wariant W6  (03.09.2026)

   Pierwsza wersja miala dwa symetryczne panele z listami. Marcin ja odrzucil:
   to ten sam problem co siatka identycznych kafelkow, tylko w wersji dwoch
   pudelek. Ze strony szkicow wybral W6.

   Zalozenie W6: warstwa danych z API jest NAJWIEKSZA, ciemna i na spodzie,
   a wnioski to maly, jasny wierzcholek lezacy na niej. Czyta sie "pod kazdym
   wnioskiem lezy cale konto", zamiast "mamy trzy rownorzedne etapy". Wnioski
   sa najmniejsze celowo: klient dostaje krotka liste priorytetow, ale stoi
   ona na calym koncie. Sekcja konczy sie twarza specjalisty i prowadzi do
   sekcji zespolu, ktora stoi zaraz nizej.
   ========================================================================= */

body.netim-audyt-ppc .apj-wrap{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4vw,58px); align-items:center;
}
body.netim-audyt-ppc .apj-tx .sec-h{ text-align:left }
body.netim-audyt-ppc .apj-lead{
  margin:18px 0 0; max-width:52ch;
  font:500 clamp(15px,1.15vw,16px)/1.7 'Montserrat',sans-serif; color:#5b6385;
}
body.netim-audyt-ppc .apj-cyt{
  margin:clamp(22px,2.4vw,30px) 0 0; padding:0; border:0; max-width:52ch;
}
body.netim-audyt-ppc .apj-cyt p{
  margin:0; font:600 italic clamp(15px,1.35vw,18px)/1.6 'Montserrat',sans-serif;
  color:#050a30; text-wrap:balance;
}

body.netim-audyt-ppc .apj-stos{ position:relative; padding:10px 0 }

/* warstwa 1: dane. Najwieksza i najciemniejsza, bo to ona niesie przewage */
body.netim-audyt-ppc .apj-dane{
  border-radius:18px; padding:18px 20px 20px;
  background:linear-gradient(180deg,#0a1148,#060c30);
  box-shadow:0 34px 66px -42px rgba(5,10,48,.8);
}
body.netim-audyt-ppc .apj-hd{
  display:flex; align-items:center; gap:9px; padding-bottom:13px; margin-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.10);
  font:800 10.5px/1 'Montserrat',sans-serif; letter-spacing:.12em;
  text-transform:uppercase; color:#9fb3d8;
}
body.netim-audyt-ppc .apj-dot{ width:7px; height:7px; border-radius:50%; background:#26a7f0; flex:none }
body.netim-audyt-ppc .apj-hd em{
  margin-left:auto; font-style:normal; letter-spacing:.04em;
  text-transform:none; font-weight:700; color:#80dfa0;
}
body.netim-audyt-ppc .apj-siatka{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 22px;
}
body.netim-audyt-ppc .apj-siatka li{
  position:relative; padding-left:17px;
  font:600 13px/1.4 'Montserrat',sans-serif; color:#c8d3ea;
}
body.netim-audyt-ppc .apj-siatka li::before{
  content:""; position:absolute; left:0; top:6px; width:7px; height:7px;
  border-radius:2px; background:rgba(38,167,240,.8);
}

/* warstwy 2 i 3 kaskaduja na danych, coraz mniejsze i jasniejsze */
body.netim-audyt-ppc .apj-analiza,
body.netim-audyt-ppc .apj-wnioski{
  position:relative; border-radius:16px; padding:16px 20px 15px;
}
body.netim-audyt-ppc .apj-analiza{
  background:#eef3fc; margin:-12px 34px 0 34px; z-index:2;
  box-shadow:0 0 0 1.5px rgba(5,10,48,.08), 0 22px 44px -32px rgba(5,10,48,.5);
}
body.netim-audyt-ppc .apj-wnioski{
  background:#fff; margin:-12px 68px 0 68px; z-index:3;
  box-shadow:0 0 0 1.5px rgba(5,10,48,.10), 0 28px 52px -34px rgba(5,10,48,.55);
}
body.netim-audyt-ppc .apj-l{
  display:block; margin-bottom:7px;
  font:800 10px/1 'Montserrat',sans-serif; letter-spacing:.13em;
  text-transform:uppercase; color:#1a4d8f;
}
body.netim-audyt-ppc .apj-analiza p,
body.netim-audyt-ppc .apj-wnioski p{
  margin:0; font:600 14px/1.5 'Montserrat',sans-serif; color:#2a3150;
}
body.netim-audyt-ppc .apj-os{
  display:flex; align-items:center; gap:9px; margin:13px 0 0;
  padding-top:12px; border-top:1px solid rgba(5,10,48,.10);
}
body.netim-audyt-ppc .apj-os img{
  width:34px; height:34px; border-radius:50%; object-fit:cover; object-position:center 18%;
}
body.netim-audyt-ppc .apj-os figcaption{
  font:700 11px/1 'Montserrat',sans-serif; letter-spacing:.06em;
  text-transform:uppercase; color:#1f7a48;
}

/* ---- wejscie przy przewijaniu ----
   Na stronie szkicow animacja startowala sama przy zaladowaniu, bo sekcja
   byla u gory. Tutaj sekcja lezy nisko, wiec wejscie musi isc przez ten sam
   obserwator co reszta strony: warstwy wchodza od spodu do gory, a pozycje
   listy danych sypia sie kaskada dopiero po wejsciu ciemnej warstwy. */
body.netim-audyt-ppc.js-reveal .apj-tx,
body.netim-audyt-ppc.js-reveal .apj-dane,
body.netim-audyt-ppc.js-reveal .apj-analiza,
body.netim-audyt-ppc.js-reveal .apj-wnioski{
  opacity:0; transform:translateY(22px);
  transition:opacity .65s var(--ease), transform .65s var(--ease);
}
body.netim-audyt-ppc.js-reveal .apj-tx.in,
body.netim-audyt-ppc.js-reveal .apj-dane.in,
body.netim-audyt-ppc.js-reveal .apj-analiza.in,
body.netim-audyt-ppc.js-reveal .apj-wnioski.in{ opacity:1; transform:none }
body.netim-audyt-ppc.js-reveal .apj-analiza{ transition-delay:.16s }
body.netim-audyt-ppc.js-reveal .apj-wnioski{ transition-delay:.30s }
body.netim-audyt-ppc.js-reveal .apj-siatka li{
  opacity:0; transition:opacity .4s var(--ease);
}
body.netim-audyt-ppc.js-reveal .apj-dane.in .apj-siatka li{ opacity:1 }
body.netim-audyt-ppc.js-reveal .apj-dane.in .apj-siatka li:nth-child(1){ transition-delay:.14s }
body.netim-audyt-ppc.js-reveal .apj-dane.in .apj-siatka li:nth-child(2){ transition-delay:.20s }
body.netim-audyt-ppc.js-reveal .apj-dane.in .apj-siatka li:nth-child(3){ transition-delay:.26s }
body.netim-audyt-ppc.js-reveal .apj-dane.in .apj-siatka li:nth-child(4){ transition-delay:.32s }
body.netim-audyt-ppc.js-reveal .apj-dane.in .apj-siatka li:nth-child(5){ transition-delay:.38s }
body.netim-audyt-ppc.js-reveal .apj-dane.in .apj-siatka li:nth-child(6){ transition-delay:.44s }
body.netim-audyt-ppc.js-reveal .apj-dane.in .apj-siatka li:nth-child(7){ transition-delay:.50s }
body.netim-audyt-ppc.js-reveal .apj-dane.in .apj-siatka li:nth-child(8){ transition-delay:.56s }

@media (max-width: 980px){
  body.netim-audyt-ppc .apj-wrap{ grid-template-columns:minmax(0,1fr); gap:26px }
  body.netim-audyt-ppc .apj-lead,
  body.netim-audyt-ppc .apj-cyt{ max-width:none }
  body.netim-audyt-ppc .apj-siatka{ grid-template-columns:minmax(0,1fr) }
  body.netim-audyt-ppc .apj-analiza{ margin:-12px 16px 0 16px }
  body.netim-audyt-ppc .apj-wnioski{ margin:-12px 32px 0 32px }
}
@media (prefers-reduced-motion: reduce){
  body.netim-audyt-ppc.js-reveal .apj-tx,
  body.netim-audyt-ppc.js-reveal .apj-dane,
  body.netim-audyt-ppc.js-reveal .apj-analiza,
  body.netim-audyt-ppc.js-reveal .apj-wnioski,
  body.netim-audyt-ppc.js-reveal .apj-siatka li{
    opacity:1!important; transform:none!important; transition:none!important;
  }
}

/* =========================================================================
   SEKCJA 5: "Co dokładnie sprawdzamy?"  (03.09.2026)

   Pierwsza proba byla zwykla lista numerowana w dwoch kolumnach i Marcin ja
   sluszne odrzucil: to sciana tekstu, tylko wezsza. Teraz kazdy obszar to
   rozwijana pozycja na natywnym <details>, wiec:
   - zwiniete daja skanowalny spis 13 obszarow zamiast sciany
   - dziala bez JS i jest obslugiwane z klawiatury (to samo co FAQ nizej)
   - caly tekst siedzi w kodzie strony, wiec nic nie ginie dla wyszukiwarki
   Numeracja i naglowki platform sa te same co na karcie w hero.
   Kolumny sa OSOBNE, nie wspolna siatka: inaczej rozwiniecie pozycji po lewej
   rozpychaloby wiersz po prawej.
   ========================================================================= */

body.netim-audyt-ppc .apz{ background:#f1f4fb }
body.netim-audyt-ppc .apz-wrap{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3vw,46px); align-items:start;
  margin-top:clamp(26px,3vw,40px);
}
body.netim-audyt-ppc .apz-grupa{
  display:flex; align-items:center; gap:12px; margin:0 4px 12px;
}
body.netim-audyt-ppc .apz-plat{
  font:800 11.5px/1 'Montserrat',sans-serif; letter-spacing:.13em;
  text-transform:uppercase; color:#1a4d8f; flex:none;
}
body.netim-audyt-ppc .apz-hr{ flex:1; height:1px; background:rgba(5,10,48,.13) }
body.netim-audyt-ppc .apz-grupa em{
  font:600 11.5px/1 'Montserrat',sans-serif; font-style:normal; color:#656c8a; flex:none;
}

body.netim-audyt-ppc .apz-p{
  border-radius:13px; background:#fff; margin-bottom:8px;
  box-shadow:0 0 0 1px rgba(5,10,48,.06), 0 10px 22px -18px rgba(5,10,48,.4);
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
body.netim-audyt-ppc .apz-p[open]{
  background:#fdfeff;
  box-shadow:0 0 0 1px rgba(30,94,159,.18), 0 22px 40px -26px rgba(5,10,48,.5);
}
body.netim-audyt-ppc .apz-p summary{
  display:flex; align-items:center; gap:13px;
  padding:14px 16px; cursor:pointer; list-style:none;
  border-radius:13px;
  transition:background .25s var(--ease);
}
body.netim-audyt-ppc .apz-p summary::-webkit-details-marker{ display:none }
body.netim-audyt-ppc .apz-p summary:hover{ background:rgba(38,167,240,.055) }
body.netim-audyt-ppc .apz-p summary:focus-visible{ outline:3px solid #26a7f0; outline-offset:-3px }
/* numer w kaflu, ktory zmienia kolor po rozwinieciu: jedyny sygnal stanu poza
   znacznikiem, wiec czytelny takze dla kogos, kto nie patrzy na plusik */
body.netim-audyt-ppc .apz-n{
  flex:none; display:grid; place-items:center; width:30px; height:26px; border-radius:8px;
  background:rgba(9,16,54,.05); color:#63698a;
  font:900 11px/1 'Montserrat',sans-serif; font-variant-numeric:tabular-nums;
  transition:background .25s var(--ease), color .25s var(--ease);
}
body.netim-audyt-ppc .apz-p[open] .apz-n{ background:#1e5e9f; color:#fff }
body.netim-audyt-ppc .apz-kol--meta .apz-p[open] .apz-n{ background:#0c4190 }
body.netim-audyt-ppc .apz-t{
  flex:1; min-width:0;
  font:700 14.5px/1.4 'Montserrat',sans-serif; letter-spacing:-.01em; color:#050a30;
}
/* znacznik plus, ktory zamienia sie w minus, tak samo jak w FAQ nizej */
body.netim-audyt-ppc .apz-p summary i{
  position:relative; width:20px; height:20px; flex:none; color:#63698a;
}
body.netim-audyt-ppc .apz-p summary i::before,
body.netim-audyt-ppc .apz-p summary i::after{
  content:""; position:absolute; left:50%; top:50%; background:currentColor;
  border-radius:2px; transition:transform .28s var(--ease);
}
body.netim-audyt-ppc .apz-p summary i::before{ width:13px; height:2px; transform:translate(-50%,-50%) }
body.netim-audyt-ppc .apz-p summary i::after { width:2px; height:13px; transform:translate(-50%,-50%) }
body.netim-audyt-ppc .apz-p[open] summary i{ color:#1e5e9f }
body.netim-audyt-ppc .apz-p[open] summary i::after{ transform:translate(-50%,-50%) scaleY(0) }

body.netim-audyt-ppc .apz-d{ padding:0 16px 16px 59px }
body.netim-audyt-ppc .apz-d p{
  margin:0; padding-top:12px; border-top:1px dashed rgba(5,10,48,.13);
  font:500 14px/1.65 'Montserrat',sans-serif; color:#5b6385;
}
/* tresc wchodzi lagodnie, bo <details> otwiera sie skokowo */
body.netim-audyt-ppc .apz-p[open] .apz-d{ animation:apzOtw .32s var(--ease) both }
@keyframes apzOtw{ from{ opacity:0; transform:translateY(-5px) } to{ opacity:1; transform:none } }

body.netim-audyt-ppc.js-reveal .apz-grupa,
body.netim-audyt-ppc.js-reveal .apz-p{
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease),
             box-shadow .3s var(--ease), background .3s var(--ease);
}
body.netim-audyt-ppc.js-reveal .apz-grupa.in,
body.netim-audyt-ppc.js-reveal .apz-p.in{ opacity:1; transform:none }

@media (max-width: 900px){
  body.netim-audyt-ppc .apz-wrap{ grid-template-columns:minmax(0,1fr); gap:26px }
  body.netim-audyt-ppc .apz-p summary{ padding:12px 14px; gap:11px }
  body.netim-audyt-ppc .apz-t{ font-size:13.5px }
  body.netim-audyt-ppc .apz-d{ padding:0 14px 14px 53px }
}
@media (prefers-reduced-motion: reduce){
  body.netim-audyt-ppc.js-reveal .apz-grupa,
  body.netim-audyt-ppc.js-reveal .apz-p{ opacity:1!important; transform:none!important; transition:none!important }
  body.netim-audyt-ppc .apz-p[open] .apz-d{ animation:none }
}

/* ---------- domkniecie krotszej kolumny ----------
   Kolumna Meta ma 5 pozycji przy 8 w Google, wiec zamiast dziury stoi tu
   karta w naszym stylu: granat, sygnet jako znak wodny wychodzacy poza
   krawedz (ten sam zabieg co w sekcji zespolu), liczba obszarow jako bohater
   i przycisk z etykieta, ktora jest juz w hero. */
body.netim-audyt-ppc .apz-suma{
  position:relative; overflow:hidden; isolation:isolate;
  margin-top:18px; padding:20px 24px 19px; border-radius:18px;
  background:linear-gradient(180deg,#0a1148,#060c30);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 34px 62px -40px rgba(5,10,48,.75);
}
body.netim-audyt-ppc .apz-suma-syg{
  position:absolute; z-index:-1; top:-26px; right:-84px;
  width:260px; height:auto; color:#fff; opacity:.085; pointer-events:none;
}
body.netim-audyt-ppc .apz-suma-n{
  display:flex; align-items:baseline; gap:12px; margin:0;
}
/* motyw ustawia globalnie b,strong{color:#333}, wiec kolor podajemy wprost */
body.netim-audyt-ppc .apz-suma-n b{
  font:900 clamp(38px,3.4vw,46px)/.9 'Montserrat',sans-serif;
  letter-spacing:-.045em; color:#80dfa0; font-variant-numeric:tabular-nums;
}
body.netim-audyt-ppc .apz-suma-n span{
  font:800 15px/1.2 'Montserrat',sans-serif; letter-spacing:-.012em; color:#fff;
}
body.netim-audyt-ppc .apz-suma-rule{
  display:block; width:46px; height:2px; border-radius:2px;
  margin:13px 0 10px; background:#80dfa0; opacity:.55;
}
body.netim-audyt-ppc .apz-suma-t{
  margin:0 0 16px; max-width:34ch;
  font:600 12.5px/1.5 'Montserrat',sans-serif; color:#9fb3d8;
}
body.netim-audyt-ppc .apz-suma-cta{
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 22px; border-radius:999px; text-decoration:none;
  background:#80dfa0; color:#050a30;
  font:800 14px/1 'Montserrat',sans-serif; letter-spacing:-.01em;
  box-shadow:0 14px 30px -16px rgba(128,223,160,.75);
  transition:transform .2s var(--ease), box-shadow .25s var(--ease);
}
body.netim-audyt-ppc .apz-suma-cta .arr{ transition:transform .25s var(--ease) }
body.netim-audyt-ppc .apz-suma-cta:hover{ box-shadow:0 20px 38px -16px rgba(128,223,160,.9) }
body.netim-audyt-ppc .apz-suma-cta:hover .arr{ transform:translateX(4px) }
body.netim-audyt-ppc .apz-suma-cta:active{ transform:scale(.97) }
body.netim-audyt-ppc .apz-suma-cta:focus-visible{ outline:3px solid #26a7f0; outline-offset:3px }

body.netim-audyt-ppc.js-reveal .apz-suma{
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
body.netim-audyt-ppc.js-reveal .apz-suma.in{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){
  body.netim-audyt-ppc.js-reveal .apz-suma{ opacity:1!important; transform:none!important }
}

/* =========================================================================
   SEKCJA 7: "Od zgłoszenia do raportu"  (03.09.2026)

   Bylo: cztery identyczne biale kafelki w rzedzie. Sekcja o KOLEJNOSCI krokow
   nie pokazywala zadnej kolejnosci.
   Jest: os pozioma. Kazdy krok ma wezel z numerem, a miedzy wezlami biegnie
   linia zakonczona grotem, wiec kierunek widac bez czytania. Kafelki znikly,
   tresc lezy wprost na granacie.
   Kolor wezla niesie informacje: mieta to krok po Twojej stronie (zglaszasz,
   decydujesz), blekit po naszej (prowadzimy audyt). To wzmocnienie tego, co
   juz mowia czasowniki w naglowkach, a nie jedyny nosnik znaczenia.
   ========================================================================= */

body.netim-audyt-ppc .apr-tor{
  --apr-gap: clamp(20px,2.4vw,38px);
  list-style:none; margin:clamp(34px,3.6vw,50px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--apr-gap); align-items:start;
}
body.netim-audyt-ppc .apr-k{ position:relative; padding-top:56px }

/* wezel z numerem */
body.netim-audyt-ppc .apr-w{
  position:absolute; top:0; left:0; z-index:2;
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  font:900 13px/1 'Montserrat',sans-serif; font-variant-numeric:tabular-nums;
  background:#0a1148; color:#fff;
  box-shadow:0 0 0 2px currentColor inset;
}
body.netim-audyt-ppc .apr-k--ty .apr-w{ color:#80dfa0 }
body.netim-audyt-ppc .apr-k--my .apr-w{ color:#26a7f0 }

/* linia do nastepnego wezla, przechodzi przez odstep miedzy kolumnami */
body.netim-audyt-ppc .apr-k::before{
  content:""; position:absolute; z-index:1; top:19px; left:48px;
  right:calc(-1 * var(--apr-gap) + 7px); height:2px;
  background:linear-gradient(90deg,rgba(159,179,216,.60),rgba(159,179,216,.28));
  transform-origin:left center; transform:scaleX(0);
  transition:transform .7s var(--ease);
}
/* grot strzalki na koncu linii */
body.netim-audyt-ppc .apr-k::after{
  content:""; position:absolute; z-index:1;
  top:13px; right:calc(-1 * var(--apr-gap) + 7px);
  width:11px; height:11px; border:solid rgba(159,179,216,.8);
  border-width:2.5px 2.5px 0 0; transform:rotate(45deg) scale(.4);
  opacity:0; transition:opacity .4s var(--ease), transform .4s var(--ease);
}
body.netim-audyt-ppc .apr-k:last-child::before,
body.netim-audyt-ppc .apr-k:last-child::after{ display:none }

body.netim-audyt-ppc .apr-k h3{
  margin:0 0 9px; font:800 clamp(16px,1.4vw,18px)/1.3 'Montserrat',sans-serif;
  letter-spacing:-.016em; color:#fff;
}
body.netim-audyt-ppc .apr-k p{
  margin:0; font:500 14px/1.65 'Montserrat',sans-serif; color:#c8d3ea;
}

/* wejscie: wezel, potem linia z grotem, potem tresc */
body.netim-audyt-ppc.js-reveal .apr-k .apr-w,
body.netim-audyt-ppc.js-reveal .apr-k h3,
body.netim-audyt-ppc.js-reveal .apr-k p{
  opacity:0; transform:translateY(12px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
body.netim-audyt-ppc.js-reveal .apr-k.in .apr-w,
body.netim-audyt-ppc.js-reveal .apr-k.in h3,
body.netim-audyt-ppc.js-reveal .apr-k.in p{ opacity:1; transform:none }
body.netim-audyt-ppc.js-reveal .apr-k.in h3{ transition-delay:.12s }
body.netim-audyt-ppc.js-reveal .apr-k.in p { transition-delay:.18s }
body.netim-audyt-ppc.js-reveal .apr-k.in::before{ transform:scaleX(1); transition-delay:.24s }
body.netim-audyt-ppc.js-reveal .apr-k.in::after{
  opacity:1; transform:rotate(45deg) scale(1); transition-delay:.82s;
}
/* bez JS linia i grot maja byc od razu na miejscu */
body.netim-audyt-ppc:not(.js-reveal) .apr-k::before{ transform:scaleX(1) }
body.netim-audyt-ppc:not(.js-reveal) .apr-k::after{ opacity:1; transform:rotate(45deg) scale(1) }

@media (max-width: 900px){
  /* w pionie os biegnie z gory na dol, wiec linia i grot obracaja sie o 90 stopni */
  body.netim-audyt-ppc .apr-tor{ grid-template-columns:minmax(0,1fr); gap:0 }
  body.netim-audyt-ppc .apr-k{ padding:0 0 26px 58px }
  body.netim-audyt-ppc .apr-k:last-child{ padding-bottom:0 }
  body.netim-audyt-ppc .apr-w{ top:0; left:0 }
  body.netim-audyt-ppc .apr-k::before{
    top:48px; bottom:6px; left:19px; right:auto; width:2px; height:auto;
    background:linear-gradient(180deg,rgba(159,179,216,.60),rgba(159,179,216,.28));
    transform-origin:top center; transform:scaleY(0);
  }
  body.netim-audyt-ppc.js-reveal .apr-k.in::before{ transform:scaleY(1) }
  body.netim-audyt-ppc:not(.js-reveal) .apr-k::before{ transform:scaleY(1) }
  body.netim-audyt-ppc .apr-k::after{
    top:auto; bottom:2px; left:15px; right:auto;
    border-width:0 2px 2px 0;
  }
}
@media (prefers-reduced-motion: reduce){
  body.netim-audyt-ppc.js-reveal .apr-k .apr-w,
  body.netim-audyt-ppc.js-reveal .apr-k h3,
  body.netim-audyt-ppc.js-reveal .apr-k p{
    opacity:1!important; transform:none!important; transition:none!important;
  }
  body.netim-audyt-ppc.js-reveal .apr-k::before{ transform:scaleX(1)!important; transition:none }
  body.netim-audyt-ppc.js-reveal .apr-k::after{ opacity:1!important; transform:rotate(45deg)!important; transition:none }
}

/* =========================================================================
   SEKCJA 8: "Dlaczego robimy to za darmo?"  (03.09.2026)

   Tresc ma ksztalt rozwidlenia: zdanie wiodace, dwa warunki, wspolne
   zakonczenie. Pierwsza wersja rysowala klamre odcinkami ustawionymi na 25%
   i 75% szerokosci, a przy dwoch kolumnach z odstepem srodki kart leza gdzie
   indziej, wiec konce klamry nie trafialy w karty. Teraz pozycje licza sie
   z siatki: srodek pierwszej kolumny to (100% - odstep) / 4.
   Galezie roznia sie tlem, nie tylko plakietka, zeby nie byly dwoma takimi
   samymi bialymi pudelkami. Wniosek ma wlasna ciemna karte z sygnetem, wiec
   sekcja konczy sie kotwica, a nie samym pogrubionym zdaniem.
   ========================================================================= */

body.netim-audyt-ppc .apd{ background:#f1f4fb }
body.netim-audyt-ppc .apd-lead{
  max-width:68ch; margin:20px auto 0; text-align:center;
  font:500 clamp(15.5px,1.25vw,17px)/1.72 'Montserrat',sans-serif; color:#3a4160;
}
body.netim-audyt-ppc .apd-fork{
  --apd-gap: clamp(18px,2.4vw,38px);
  max-width:1080px; margin:clamp(30px,3.4vw,46px) auto 0;
}
body.netim-audyt-ppc .apd-galezie{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--apd-gap); align-items:stretch;
}
body.netim-audyt-ppc .apd-g{
  padding:28px 30px 26px; border-radius:18px;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 22px 44px -34px rgba(5,10,48,.5);
}
/* galezie roznia sie tlem, a nie tylko plakietka */
body.netim-audyt-ppc .apd-g--ok {
  background:linear-gradient(180deg,#f4fcf7,#eef9f2);
  box-shadow:0 0 0 1px rgba(61,189,110,.22), 0 22px 44px -34px rgba(5,10,48,.45);
}
body.netim-audyt-ppc .apd-g--zle{
  background:linear-gradient(180deg,#fef9f1,#fdf4e8);
  box-shadow:0 0 0 1px rgba(232,152,58,.28), 0 22px 44px -34px rgba(5,10,48,.45);
}
body.netim-audyt-ppc .apd-war{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:15px;
  font:800 10.5px/1 'Montserrat',sans-serif; letter-spacing:.1em; text-transform:uppercase;
}
body.netim-audyt-ppc .apd-war::before{
  content:""; width:8px; height:8px; border-radius:50%; background:currentColor;
}
body.netim-audyt-ppc .apd-g--ok  .apd-war{ color:#1f7a48 }
body.netim-audyt-ppc .apd-g--zle .apd-war{ color:#96590f }
body.netim-audyt-ppc .apd-g p{
  margin:0; font:600 15.5px/1.62 'Montserrat',sans-serif; color:#050a30;
}

/* ---- klamra: pozycje liczone z siatki, nie zgadywane w procentach ----
   przy dwoch rownych kolumnach i odstepie G srodek pierwszej kolumny lezy
   w (100% - G) / 4, a drugiej symetrycznie od prawej */
body.netim-audyt-ppc .apd-scal{ position:relative; height:72px }
body.netim-audyt-ppc .apd-scal span{ position:absolute; background:#a7b4cf }
body.netim-audyt-ppc .apd-v{ top:0; width:2px; height:28px }
body.netim-audyt-ppc .apd-v1{ left:calc((100% - var(--apd-gap)) / 4 - 1px) }
body.netim-audyt-ppc .apd-v2{ right:calc((100% - var(--apd-gap)) / 4 - 1px) }
body.netim-audyt-ppc .apd-h{
  top:26px; height:2px; border-radius:2px;
  left:calc((100% - var(--apd-gap)) / 4); right:calc((100% - var(--apd-gap)) / 4);
}
body.netim-audyt-ppc .apd-down{ top:26px; left:calc(50% - 1px); width:2px; height:46px }
/* grot wchodzacy w ciemna karte */
body.netim-audyt-ppc .apd-scal::after{
  content:""; position:absolute; left:calc(50% - 7px); bottom:-1px;
  width:14px; height:14px; background:#0a1148;
  clip-path:polygon(50% 100%, 0 0, 100% 0);
}

/* ---- wniosek: wlasna ciemna karta ---- */
body.netim-audyt-ppc .apd-koniec{
  position:relative; overflow:hidden; isolation:isolate;
  padding:34px 34px 36px; border-radius:20px; text-align:center;
  background:linear-gradient(180deg,#0a1148,#060c30);
  box-shadow:0 34px 62px -40px rgba(5,10,48,.75);
}
body.netim-audyt-ppc .apd-syg{
  position:absolute; z-index:-1; top:-52px; right:-70px;
  width:210px; height:auto; color:#fff; opacity:.07; pointer-events:none;
}
body.netim-audyt-ppc .apd-koniec-l{
  display:block; margin-bottom:12px;
  font:600 10px/1 'Montserrat',sans-serif; letter-spacing:.16em;
  text-transform:uppercase; color:#80dfa0;
}
body.netim-audyt-ppc .apd-koniec p{
  margin:0 auto; max-width:34ch;
  font:800 clamp(19px,1.85vw,25px)/1.38 'Montserrat',sans-serif;
  letter-spacing:-.016em; color:#fff; text-wrap:balance;
}

body.netim-audyt-ppc.js-reveal .apd-g,
body.netim-audyt-ppc.js-reveal .apd-koniec{
  opacity:0; transform:translateY(16px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
body.netim-audyt-ppc.js-reveal .apd-g.in,
body.netim-audyt-ppc.js-reveal .apd-koniec.in{ opacity:1; transform:none }
body.netim-audyt-ppc.js-reveal .apd-koniec{ transition-delay:.18s }
body.netim-audyt-ppc.js-reveal .apd-scal span,
body.netim-audyt-ppc.js-reveal .apd-scal::after{ opacity:0; transition:opacity .5s var(--ease) .28s }
body.netim-audyt-ppc.js-reveal .apd-scal.in span,
body.netim-audyt-ppc.js-reveal .apd-scal.in::after{ opacity:1 }

@media (max-width: 820px){
  body.netim-audyt-ppc .apd-galezie{ grid-template-columns:minmax(0,1fr); gap:12px }
  /* w pionie rozwidlenie nie ma sensu: zostaje sam odcinek ze strzalka */
  body.netim-audyt-ppc .apd-scal{ height:38px }
  body.netim-audyt-ppc .apd-v1,
  body.netim-audyt-ppc .apd-v2,
  body.netim-audyt-ppc .apd-h{ display:none }
  body.netim-audyt-ppc .apd-down{ top:4px; height:34px }
  body.netim-audyt-ppc .apd-koniec{ padding:26px 22px 28px }
}
@media (prefers-reduced-motion: reduce){
  body.netim-audyt-ppc.js-reveal .apd-g,
  body.netim-audyt-ppc.js-reveal .apd-koniec,
  body.netim-audyt-ppc.js-reveal .apd-scal span,
  body.netim-audyt-ppc.js-reveal .apd-scal::after{
    opacity:1!important; transform:none!important; transition:none!important;
  }
}

/* Uklad dwukolumnowy FAQ. Reguly .f8-grid siedza w sklepy-usluga.css pod
   klasa .netim-shop, ktora ma w body /audyty-seo/, a ta podstrona nie. Zamiast
   doklejac obca klase do body (i ciagnac za nia caly arkusz sklepu), powtarzamy
   tu dwie linie, ktorych brakuje. Sam akordeon (.faq-list details) i kafel
   kontaktowy stylizuje service.css, wiec dziala juz teraz. */
body.netim-audyt-ppc .f8-grid{
  display:grid; gap:clamp(24px,3.5vw,48px); align-items:start; margin-top:6px;
  grid-template-columns:1.35fr .65fr;
}
@media (max-width: 900px){
  body.netim-audyt-ppc .f8-grid{ grid-template-columns:minmax(0,1fr) }
}

/* odstepy rozwidlenia: piony byly schowane za kartami (pomiar 03.09.2026) */
body.netim-audyt-ppc .apd-scal{ height:58px }
body.netim-audyt-ppc .apd-v{ height:26px }
body.netim-audyt-ppc .apd-h{ top:24px }
body.netim-audyt-ppc .apd-down{ top:24px; height:26px }
body.netim-audyt-ppc .apd-grot{ top:44px }
@media (max-width: 820px){
  body.netim-audyt-ppc .apd-scal{ height:40px }
  body.netim-audyt-ppc .apd-down{ top:6px; height:20px }
  body.netim-audyt-ppc .apd-grot{ top:20px }
}