/* ==========================================================================
   SEOVLY — wspolna warstwa responsywna

   --------------------------------------------------------------------------
   DWA PROGI, DWIE ROZNE INTENCJE — warto znac roznice przed edycja
   --------------------------------------------------------------------------
   <= 979px  WARSTWA WYDAJNOSCIOWA. Nic tu nie zmienia wygladu. Wylaczone
             backdrop-filter, stale animacje tla, trwale warstwy GPU.
             Obejmuje tablet, bo te koszty sa zbedne wszedzie na dotyku —
             ale poniewaz nic nie widac, tablet wyglada jak wygladal.

   <= 767px  WARSTWA UKLADU I ANIMACJI. Tu zmienia sie wyglad: wysokosc hero,
             skala naglowkow, uproszczone wejscia, zerowanie opoznien.
             TYLKO TELEFON. Tablet zostal celowo poza tym progiem, bo na nim
             wszystko dzialalo poprawnie i nie ma czego naprawiac.

   DESKTOP (>= 980px) nie dostaje ZADNEJ z regul dodanych przy naprawie
   mobile — wszystkie siedza w media query. Poza nimi zostaje tylko garstka
   globalnych zabezpieczen z sekcji 1 (max-width na obrazkach, overflow-x,
   lamanie dlugich slow) i pola dotykowe — to warstwa z pierwszej wersji
   pliku, neutralna dla desktopu. Dopisujac cos nowego trzymaj sie zasady:
   zmiana wygladu = media query.
   --------------------------------------------------------------------------
   Podlaczana w <head> KAZDEJ strony, jako OSTATNI arkusz.
   Dzieki temu nadpisuje style z <style> w naglowku, a przez !important
   takze style wpisane inline w atrybucie style="..." (inaczej sie nie da).

   Nic tu nie wylacza animacji — to wylacznie warstwa layoutu i wydajnosci.
   ========================================================================== */


/* ==========================================================================
   1. TWARDE ZABEZPIECZENIE PRZED POZIOMYM PRZEWIJANIEM
   ========================================================================== */

/* Media nigdy nie rozpychaja kontenera */
img, video, canvas, iframe { max-width: 100%; }
img { height: auto; }
svg { max-width: 100%; }

/* Korzen dokumentu przycina wszystko, co mimo wszystko wystaje w bok.
   Uzywamy 'clip', a nie 'hidden': hidden robi z elementu kontener
   przewijania (co potrafi psuc position:sticky i skakac przy kotwicach),
   clip po prostu przycina. Bez tego przegladarka na telefonie
   ROZSZERZALA viewport pod najszerszy element i oddalala cala strone. */
html, body { overflow-x: clip; }

/* Dlugie slowa, adresy e-mail i URL-e nie rozpychaja layoutu na waskim ekranie */
h1, h2, h3, h4, h5, p, li, a, span, blockquote { overflow-wrap: break-word; }

/* Dzieci gridow i flexow maja domyslnie min-width:auto — to najczestsza,
   niewidoczna przyczyna "czegos, co wystaje poza ekran". Zerujemy.

   Zamkniete w media query CELOWO. Selektory typu [style*="display:grid"]
   dopasowuja PODCIAG w atrybucie, wiec przegladarka musi przy kazdym
   przeliczaniu stylow przejrzec atrybuty wszystkich elementow w dokumencie.
   To jeden z najdrozszych rodzajow selektorow, jakie istnieja, a problem
   z rozpychaniem layoutu dotyczy wylacznie waskich ekranow. */
@media (max-width: 979px) {
  .wrap > *,
  [class*="grid"] > *,
  [class*="row"] > *,
  [style*="display:grid"] > *,
  [style*="display:flex"] > * { min-width: 0; }
}

/* --------------------------------------------------------------------------
   NAJWAZNIEJSZA POPRAWKA UKLADU MOBILNEGO
   --------------------------------------------------------------------------
   Dekoracyjne "bloby" w sekcjach hero maja po 340-640px szerokosci i sa
   pozycjonowane na minusowych offsetach (np. left:-6%), a sekcja hero
   nie miala ani position:relative, ani overflow:hidden.
   Efekt: bloby rozpychaly dokument daleko poza ekran telefonu, a przegladarka
   ratowala sie ODDALENIEM calej strony (viewport rosl z 320px do ~470px).
   Dlatego wszystko wygladalo na za male i "rozjechane", a strona
   przewijala sie na boki.

   Przycinamy je do sekcji. Tylko na mobile — desktop zostaje nietkniety.
   -------------------------------------------------------------------------- */
@media (max-width: 979px) {
  .page-hero, #hero-pin, .hero {
    position: relative;
    overflow: hidden;
  }
  /* blob nie moze byc szerszy niz ekran */
  .page-hero .blob, .hero-blob, .blob {
    max-width: 78vw !important;
    max-height: 78vw !important;
  }
}


/* ==========================================================================
   2. SIATKI — zwijanie kolumn na mobile
   --------------------------------------------------------------------------
   Czesc siatek jest wpisana INLINE (style="grid-template-columns:1fr 1fr").
   Inline wygrywa ze zwyklym media query, wiec te sekcje zostawaly
   dwukolumnowe na telefonie. Stad !important — to jedyny sposob.
   ========================================================================== */

/* Tablet w pionie: uklady 2-kolumnowe z duzym gapem robia sie ciasne */
@media (max-width: 900px) {
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
}

/* Telefon: wszystkie siatki inline na jedna kolumne.
   Przy okazji usuwa to ryzyko przepelnienia z minmax(300px,1fr),
   ktore na ekranach ~320px bylo szersze niz dostepne miejsce. */
@media (max-width: 767px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="gap:60px"] { gap: 30px !important; }
  [style*="gap:24px"] { gap: 18px !important; }
}

/* Bardzo waskie telefony (<=360px) — ostatnia linia obrony */
@media (max-width: 400px) {
  .svc-price-grid { grid-template-columns: 1fr !important; }
  .wrap { padding-left: 14px !important; padding-right: 14px !important; }
}


/* ==========================================================================
   3. TYPOGRAFIA NA MOBILE
   ========================================================================== */

/* Twarde <br> w naglowkach byly ustawiane pod szerokosc desktopu.
   Na telefonie tworzyly rwane, jednowyrazowe linie — niech tekst
   lamie sie naturalnie. Naglowki zostaja, znika tylko wymuszony podzial. */
@media (max-width: 600px) {
  h1 br, h2 br, h3 br { display: none; }
  h1, h2 { text-wrap: balance; }
}

/* Bezpieczne minimum czytelnosci dla zwyklych akapitow tresci.
   Celowo pomijamy akapity z wlasna klasa lub inline font-size —
   to zwykle podpisy, etykiety i drobny druk, ktore maja byc mniejsze. */
@media (max-width: 600px) {
  p:not([class]):not([style*="font-size"]) { font-size: max(0.95rem, 15px); }
}


/* ==========================================================================
   4. ELEMENTY PLYWAJACE — kolizje przy dolnej krawedzi
   --------------------------------------------------------------------------
   Na dole strony spotykaly sie trzy niezalezne elementy:
   #fp (przycisk telefonu), #fcta (pasek CTA) i .cookie-bar.
   Wszystkie mialy pozycje liczona od bottom i nachodzily na siebie,
   zaslaniajac przycisk "Wycen projekt".
   ========================================================================== */

/* Gdy pasek CTA jest widoczny, przycisk telefonu przesuwa sie nad niego.
   Tylko desktop — na dotyku pasek #fcta w ogole nie powstaje (wow.js),
   a :has() jest przeliczane przy kazdej zmianie DOM. Nie ma powodu placic
   za to na telefonie. */
@media (min-width: 980px) {
  body:has(#fcta.show) #fp { bottom: 92px; }
}

/* Baner cookies ma zmienna wysokosc (na waskim ekranie potrafi miec 3 linie
   tekstu + przyciski), wiec zamiast zgadywac offset — chowamy przycisk
   telefonu na czas jego wyswietlania. Wraca automatycznie po zgodzie.
   Dwa plywajace CTA jedno na drugim to i tak zly uklad. */
body:has(.cookie-bar:not(.hidden)) #fp {
  /* !important konieczne: #fp ma animacje fp-in z fill-mode:both,
     a animacje w kaskadzie CSS wygrywaja ze zwyklymi deklaracjami. */
  opacity: 0 !important;
  transform: scale(.5) !important;
  pointer-events: none !important;
}

#fp { transition: transform .25s cubic-bezier(.34,1.56,.64,1), bottom .35s cubic-bezier(.16,1,.3,1), opacity .25s ease; }

@media (max-width: 600px) {
  #fp { width: 52px; height: 52px; right: 18px; bottom: 18px; }

  /* Baner cookies: na telefonie pelna szerokosc i przyciski jeden pod drugim */
  .cookie-bar {
    width: calc(100% - 24px) !important;
    padding: 18px 18px !important;
    gap: 14px !important;
    bottom: 14px !important;
    border-radius: 20px !important;
  }
  .cookie-bar p { font-size: .85rem !important; line-height: 1.55 !important; }
  .cookie-bar-btns { display: flex; width: 100%; gap: 10px; }
  .cookie-bar-btns .cb-btn { flex: 1; min-height: 44px; }
}

/* Pasek CTA nie moze zaslaniac tresci ani byc za niski do kliknięcia */
#fcta { padding: 10px 14px; }
#fcta a { min-height: 44px; display: inline-flex; align-items: center; }


/* ==========================================================================
   5. POLA DOTYKOWE (min. 44x44px — wytyczne WCAG / Apple HIG)
   ========================================================================== */

.burger { min-width: 44px; min-height: 44px; }
.mob-link { min-height: 48px; display: flex; align-items: center; }
.faq-trigger { min-height: 48px; }

@media (max-width: 767px) {
  .btn, .fb-cta, .svc2-link, .cb-btn { min-height: 44px; }
  footer a { display: inline-block; padding: 4px 0; }
}


/* ==========================================================================
   6. WYDAJNOSC RENDEROWANIA NA MOBILE
   --------------------------------------------------------------------------
   Animacje wejsc zostaja bez zmian — tu chodzi wylacznie o to,
   zeby przegladarka nie utrzymywala setek warstw GPU naraz.
   ========================================================================== */

@media (max-width: 979px) {

  /* will-change zostawione na stale tworzy trwala warstwe kompozytora
     dla KAZDEGO elementu. Przy kilkudziesieciu elementach reveal
     to glowna przyczyna szarpanego przewijania na telefonie.
     Animacje dzialaja dalej — transition ich nie potrzebuje. */
  .reveal, .reveal-scale, .reveal-left, .reveal-right,
  .st-tile, .fb-card, .fb-m, .dk-pill, .hero-blob,
  .svc-card, .why-card, .dk-card, .bento-item {
    will-change: auto !important;
  }

  /* Pulsujacy przycisk telefonu animowal box-shadow — czyli przemalowanie
     co klatke, w nieskonczonosc. Zamieniamy na pierscien na transformie,
     ktory obsluguje sam kompozytor. Efekt wizualnie ten sam, koszt zerowy. */
  #fp { animation: fp-in .55s cubic-bezier(.34,1.56,.64,1) .9s both !important;
        box-shadow: 0 6px 28px rgba(110,142,251,.45); position: fixed; }
  #fp::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid var(--accent, #6e8efb);
    animation: fp-ripple 2.8s 1.8s infinite; pointer-events: none;
  }
  @keyframes fp-ripple {
    0%   { transform: scale(1);   opacity: .5; }
    70%  { transform: scale(1.7); opacity: 0; }
    100% { transform: scale(1.7); opacity: 0; }
  }

  /* Ciezkie cienie przeliczane na duzej powierzchni — na mobile lzejsze */
  .st-tile { box-shadow: 0 14px 30px -18px rgba(8,8,10,.22) !important; }
}

/* Blokada przewijania tla, gdy otwarte jest menu mobilne
   (klasa dokladana z cursor.js) */
body.menu-open { overflow: hidden; }
/* menu samo w sobie musi dac sie przewijac, gdy pozycji jest duzo */
.mob-menu { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }


/* ==========================================================================
   7. SZANUJEMY USTAWIENIA DOSTEPNOSCI
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  #fp::after { animation: none !important; }
  #fp { transition: none !important; }
}


/* ==========================================================================
   8. HERO NA MOBILE — WYSOKOSC
   --------------------------------------------------------------------------
   Wczesniej hero na telefonie mial min-height:auto i male paddingi, wiec
   zajmowal ledwie 40-50% ekranu i wygladal jak przypadkowy pasek tekstu.
   Uzywamy svh (small viewport height) — to wysokosc ekranu przy ROZWINIETYM
   pasku adresu przegladarki, wiec sekcja nie skacze przy przewijaniu tak,
   jak robi to vh na iOS/Androidzie. vh zostaje jako fallback dla starszych.
   ========================================================================== */

@media (max-width: 767px) {

  /* strona glowna */
  .hero {
    min-height: 88vh !important;
    min-height: 88svh !important;
    padding: 104px 0 60px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* podstrony */
  .page-hero {
    min-height: 76vh !important;
    min-height: 76svh !important;
    padding: 108px 0 64px !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
  }
  .page-hero > .wrap { width: 100%; }
}

/* Bardzo niskie ekrany (np. telefon w poziomie) — nie wymuszaj pelnej wysokosci,
   bo sam naglowek by sie nie zmiescil i tresc wyjechalaby pod ekran. */
@media (max-width: 767px) and (max-height: 560px) {
  .hero      { min-height: auto !important; padding: 92px 0 48px !important; }
  .page-hero { min-height: auto !important; padding: 92px 0 48px !important; }
}


/* ==========================================================================
   10. DOLNY PASEK CTA (#fcta) — WYLACZONY NA MOBILE
   --------------------------------------------------------------------------
   Wyjezdzal po przescrollowaniu 50% strony, zaslanial tresc i bil sie
   o miejsce z przyciskiem telefonu. Skrypt tez go juz nie tworzy (wow.js),
   ale zostawiamy regule na wypadek cache'u starej wersji pliku.
   ========================================================================== */

@media (max-width: 979px) {
  #fcta { display: none !important; }
}


/* ==========================================================================
   11. BLOBY W HERO STRONY GLOWNEJ — POSWIATA
   --------------------------------------------------------------------------
   Blob to kolorowe kolo, ktorego caly wyglad robi filter:blur(). Bez filtra
   zostaje goly, ostry okrag na tle naglowka — dokladnie to bylo widac.
   (Zrodlem bylo filter:none w trybie testowym; poprawione w cursor.js.)

   Do tego proporcja: na desktopie blob ma 640px i blur 90px. Na mobile
   zjechal do 300px, a blur zostal 90px — czyli rozmycie szersze niz sam
   ksztalt, wiec poswiata robila sie tak rozrzedzona, ze prawie znikala.
   Blur musi byc skalowany razem ze srednica.

   Dotyczy tylko .hero-blob (strona glowna). Bloby podstron (.blob) zostaja.
   ========================================================================== */

@media (max-width: 767px) {
  .hero-blob {
    /* Sekcja 1 ogranicza kazdy blob do 78vw, zeby nie rozpychal dokumentu.
       Dla .hero-blob to juz zbedne — .hero-mesh ma overflow:hidden, wiec
       nic nie wyjedzie poza sekcje. Podnosimy limit, zeby poswiata
       miala z czego powstac. */
    max-width: 96vw !important;
    max-height: 96vw !important;
    /* wieksza srednica = jest z czego robic poswiate */
    width: 380px !important;
    height: 380px !important;
    filter: blur(65px) !important;
    opacity: .95;
  }
  .hero-blob.b2 {
    width: 330px !important;
    height: 330px !important;
    filter: blur(58px) !important;
  }
}


/* ==========================================================================
   12. ANIMACJE WEJSC NA MOBILE — TYLKO POJAWIENIE SIE, ZERO OPOZNIEN
   --------------------------------------------------------------------------
   Zasada: element wjezdza W MOMENCIE, w ktorym wchodzi w ekran. Bez kolejki,
   bez czekania na sasiadow, bez kaskady. Kazdy transition-delay ustawiony
   gdziekolwiek indziej jest tu zerowany.

   Zostaje wylacznie: zanikanie (opacity) + wznoszenie od dolu (transform).
   To jedyne dwie wlasciwosci, ktore przegladarka animuje na kompozytorze,
   czyli bez przemalowywania i bez udzialu glownego watku.

   USUNIETE swiadomie (kazde z nich kosztuje klatki na telefonie):
     - filter: blur() w animacji — przemalowanie CALEJ powierzchni elementu
       w kazdej klatce. To byl najdrozszy element calego zestawu.
     - scale() i rotateX() — wymuszaja przeliczanie i wygladzanie krawedzi,
       na tekscie dodatkowo powoduja rozmyty rendering w trakcie ruchu.
     - stagger / transition-delay — przy dlugiej liscie elementow oznaczal,
       ze kilkanascie animacji nakladalo sie na siebie w tej samej chwili.
   ========================================================================== */

@media (max-width: 767px) {

  /* --- 12.1 TWARDE ZEROWANIE OPOZNIEN ------------------------------------
     Lapie tez delaye wpisane inline przez skrypty w sekcjach strony
     (stad !important — inaczej inline wygrywa). */
  .reveal, .reveal-scale, .reveal-left, .reveal-right,
  .st-tile, .fb-card, .fb-m, .dk-pill, .dk-pill-in,
  .svc-card, .why-card, .dk-card, .bento-item,
  .hero-title .line-i, .page-hero h1 .line-i,
  .hero-sub, .hero-btns, .page-hero .crumb, .page-hero p {
    transition-delay: 0s !important;
  }

  /* Warstwa kompozytora TYLKO na czas animacji — klasa dokladana
     i zdejmowana z cursor.js. Musi byc po sekcji 6, gdzie stoi
     will-change:auto !important. */
  .anim-live { will-change: transform, opacity !important; }

  /* --- 12.2 ELEMENTY REVEAL ---------------------------------------------- */
  .reveal, .reveal-scale, .reveal-left, .reveal-right,
  .st-tile, .fb-card, .fb-m {
    opacity: 0;
    transform: translateY(24px) !important;
    filter: none !important;
    transition: opacity .45s ease-out, transform .45s ease-out !important;
  }

  .reveal.in, .reveal-scale.in, .reveal-left.in, .reveal-right.in,
  .st-tile.in, .fb-card.in, .fb-m.in {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  /* Pigulki w sekcji "dla kogo" animuja swoje wnetrze, nie siebie */
  .dk-pill-in {
    transform: translateY(20px) !important;
    filter: none !important;
    transition: opacity .45s ease-out, transform .45s ease-out !important;
  }
  .dk-pill.in .dk-pill-in { opacity: 1 !important; transform: none !important; }

  /* --- 12.3 HERO ---------------------------------------------------------
     Naglowek, akapit i przyciski pojawiaja sie RAZEM, od razu.
     Maska linii zostaje — to ten efekt "tekstu wjezdzajacego od dolu" —
     ale bez opoznien miedzy liniami. */
  .hero-title .line-i,
  .page-hero h1 .line-i {
    transition: transform .5s ease-out !important;
  }

  .hero-sub, .hero-btns,
  .page-hero .crumb, .page-hero p {
    transition: opacity .45s ease-out, transform .45s ease-out !important;
  }

  #hero-pin:not(.hero-in) .hero-sub,
  #hero-pin:not(.hero-in) .hero-btns,
  #hero-pin:not(.hero-in) .crumb,
  #hero-pin:not(.hero-in) p { transform: translateY(18px) !important; }

  /* Przelot gradientu po <em> to animacja background-position, czyli
     przemalowanie tekstu co klatke. Na telefonie zbedny detal. */
  #hero-pin.hero-in .hero-title em,
  #hero-pin.hero-in h1 em { animation: none !important; }

  /* --- 12.4 KARTY HERO — wchodza razem z reszta, bez opoznien ----------- */
  .hero-card, .hero-card-inner {
    transition: opacity .45s ease-out, transform .45s ease-out !important;
    transition-delay: 0s !important;
    filter: none !important;
  }
  #hero-pin:not(.hero-in) .hero-card { opacity: 0; filter: none !important; }
  #hero-pin:not(.hero-in) .hero-card-1 .hero-card-inner { transform: rotate(-10deg) translateY(20px) !important; }
  #hero-pin:not(.hero-in) .hero-card-2 .hero-card-inner { transform: rotate(8deg) translateY(20px) !important; }
}


/* ==========================================================================
   13. STALE ANIMACJE TLA — WYLACZONE NA MOBILE
   --------------------------------------------------------------------------
   Na kazdej podstronie w tle chodza w nieskonczonosc:
     - 3 bloby w hero (ph-blob1/2/3), kazdy z filter:blur(72px),
     - dryfujaca "mesh" na ::before sekcji (types-mesh, seo-types-mesh,
       aud-mesh, pcmesh, kphone-mesh, mesh-drift, svc-footer-drift),
     - dekoracyjne kola .tv-sh (floaty) i pigulki .hero-pill (pill-float).

   Kazda z nich animuje transform na DUZEJ, rozmytej powierzchni. To znaczy,
   ze przegladarka przemalowuje kawal ekranu ~60 razy na sekunde przez caly
   czas, w ktorym sekcja jest widoczna — niezaleznie od tego, czy uzytkownik
   cokolwiek robi. Na desktopie nie widac tego kosztu, na telefonie to jest
   roznica miedzy plynnym a szarpanym przewijaniem.

   To takze przyczyna "dziwnego dzialania" sekcji pod hero na Strony WWW:
   .types-section::before skaluje sie do 1.08 przez 18s, wiec cale ciemne
   tlo sekcji nieprzerwanie pelznie i przemalowuje sie pod trescia.

   Ksztalty i kolory zostaja — znika wylacznie ich ruch.
   ========================================================================== */

@media (max-width: 979px) {

  .page-hero .blob,
  .page-hero .blob-1, .page-hero .blob-2, .page-hero .blob-3,
  .hero-blob, .hero-blob.b1, .hero-blob.b2, .hero-blob.b3, .hero-blob.b4,
  .types-section::before,
  .seo-types-section::before,
  .seo-cta-section::before,
  .aud-cta-section::before,
  .cta-final-section::before,
  .cta-urgent::before,
  .k-phone-card::before,
  footer.dark::before,
  .tv-sh, .tv-sh.a, .tv-sh.b,
  .hero-pill {
    animation: none !important;
  }

  /* blob-3 na podstronach byl centrowany przez transform w keyframe.
     Po zdjeciu animacji trzeba przywrocic to wysrodkowanie recznie,
     inaczej odjezdza w prawo. */
  .page-hero .blob-3 { transform: translateX(-50%) !important; }
}


/* ==========================================================================
   14. HERO NA PODSTRONACH — WIEKSZY I BARDZIEJ WYRAZISTY NA MOBILE
   --------------------------------------------------------------------------
   Problem: na desktopie hero jest wypelniony — plywajace karty po bokach,
   duzy naglowek, wyrazna poswiata. Na telefonie karty sa chowane, blob
   ledwo widac, a naglowek schodzi do ~2.2rem. Zostaje sam tekst na bialym
   tle i stad wrazenie "nijakosci".

   Rozwiazanie w trzech krokach: powiekszyc typografie, oddac karty
   (przesuniete w rogi, czesciowo poza kadr) i wzmocnic poswiate.
   ========================================================================== */

@media (max-width: 767px) {

  /* --- 14.1 TYPOGRAFIA --------------------------------------------------- */

  /* Naglowek ma byc dominanta ekranu, nie jednym z elementow.
     11vw na 390px daje ~43px. Gorna granica wynika z najdluzszych slow
     w naglowkach ("Porozmawiajmy", "niespodzianek" — po 13 znakow):
     przy wiekszej skali zaczynaja sie lamac w polowie. */
  .page-hero h1 {
    font-size: clamp(2.5rem, 11vw, 3.8rem) !important;
    letter-spacing: -.045em !important;
    line-height: .97 !important;
  }

  .hero-title {
    font-size: clamp(2.8rem, 12vw, 4.1rem) !important;
    letter-spacing: -.05em !important;
    line-height: .96 !important;
  }

  /* Okruszki jako wyrazniejsza pigulka — daja gornej czesci hero punkt
     zaczepienia zamiast pustki nad naglowkiem. */
  .page-hero .crumb {
    font-size: .74rem !important;
    padding: 8px 16px !important;
    margin-bottom: 26px !important;
  }

  /* Akapit lamany na ~34 znaki tworzy zwarty blok pod naglowkiem
     zamiast szerokiej, rzadkiej plachty tekstu. */
  .page-hero p,
  .hero-sub {
    font-size: 1.02rem !important;
    line-height: 1.62 !important;
    max-width: 34ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }


  /* --- 14.2 KARTY DEKORACYJNE — WRACAJA NA TELEFON -----------------------
     To czyste prostokaty z CSS (bez obrazkow), wiec kosztuja tyle co nic.
     Sadzimy je w rogach, czesciowo poza kadrem — hero ma overflow:hidden,
     wiec przyciecie wyglada celowo. Nizsza nieprzezroczystosc i z-index
     pod trescia gwarantuja, ze nie walcza z tekstem o uwage. */

  .hero-card {
    display: block !important;
    opacity: .62;
    z-index: 1 !important;
  }

  .hero-card-1 {
    width: 155px !important;
    height: 104px !important;
    top: 13% !important;
    left: -34px !important;
  }

  .hero-card-2 {
    width: 138px !important;
    height: 92px !important;
    bottom: 8% !important;
    right: -30px !important;
  }

  /* Trzecia karta to juz tloczno na waskim ekranie */
  .hero-card-3 { display: none !important; }

  .hero-card-inner {
    padding: 13px !important;
    gap: 8px !important;
    box-shadow: 0 16px 34px -20px rgba(8,8,10,.28) !important;
  }


  /* --- 14.3 POSWIATA ----------------------------------------------------
     Bloby podstron mialy 480px i blur 72px, ale sekcja 1 przycina je do
     78vw (~300px). Przy tej srednicy blur 72px rozmywa ksztalt niemal do
     zera — stad "nic nie widac". Blur musi byc skalowany razem z rozmiarem,
     dokladnie jak przy blobach strony glownej w sekcji 11. */

  .page-hero .blob {
    max-width: 96vw !important;
    max-height: 96vw !important;
    filter: blur(58px) !important;
  }
  .page-hero .blob-1 { width: 370px !important; height: 370px !important; }
  .page-hero .blob-2 { width: 320px !important; height: 320px !important; }
  .page-hero .blob-3 { width: 300px !important; height: 300px !important; opacity: .8; }
}

/* Bardzo waskie telefony — karty schodza jeszcze glebiej poza kadr,
   zeby nie podchodzily pod tekst. */
@media (max-width: 380px) {
  .hero-card-1 { left: -52px !important; top: 11% !important; }
  .hero-card-2 { right: -48px !important; }
}


/* ==========================================================================
   15. TWARDE ZEROWANIE WSZYSTKICH OPOZNIEN NA MOBILE
   --------------------------------------------------------------------------
   Opoznienia sa rozsiane po calym projekcie w trzech miejscach naraz:
     - w arkuszach w <head> kazdej strony,
     - inline w atrybutach style="transition-delay:.07s" na kartach,
     - dopisywane z JavaScriptu przez skrypty wewnatrz sekcji.

   Wylapywanie ich po jednym selektorze zawsze cos pominie, wiec zerujemy
   globalnie. Regula dotyczy WYLACZNIE opoznien — czasy trwania animacji
   i same animacje zostaja nietkniete.
   ========================================================================== */

@media (max-width: 767px) {
  *, *::before, *::after {
    transition-delay: 0s !important;
    animation-delay: 0s !important;
  }
}


/* ==========================================================================
   16. BACKDROP-FILTER — GLOWNY HAMULEC PRZY PRZEWIJANIU
   --------------------------------------------------------------------------
   To jest najpowazniejsza rzecz z calej listy i dziala na KAZDEJ podstronie.

   .nav-inner (pasek nawigacji) jest position:fixed i ma
   backdrop-filter: saturate(180%) blur(22px). Backdrop-filter oznacza:
   "pobierz to, co jest za tym elementem, rozmyj i nasyc". Dopoki strona
   stoi, liczy sie to raz. Ale w trakcie przewijania tlo za paskiem zmienia
   sie w kazdej klatce, wiec przegladarka musi caly ten efekt przeliczac
   od nowa 60 razy na sekunde — na GPU telefonu to jedna z najdrozszych
   operacji, jakie mozna wywolac.

   Dlatego odczucie bylo takie, ze "hero jest ok, a wszystko pod nim muli":
   dopoki nie zaczniesz przewijac, nic sie nie dzieje. Koszt pojawia sie
   dokladnie w momencie, w ktorym tresc rusza pod przyklejonym paskiem.

   Podmieniamy na niemal kryjace tlo. Pasek i tak wyglada na bialy, wiec
   roznicy praktycznie nie widac, a koszt spada do zera.
   ========================================================================== */

@media (max-width: 979px) {

  .nav-inner {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, .92) !important;
  }

  /* Menu mobilne ma tlo o kryciu .97 — rozmycie tla i tak nie jest przez nie
     widoczne, a tworzy pelnoekranowa warstwe efektu przy kazdym otwarciu. */
  .mob-menu {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, .99) !important;
  }

  /* Pigulki w hero uslug — blur(10px) na kilku elementach naraz */
  .hero-pill {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}


/* ==========================================================================
   17. OSZCZEDZANIE PROCESORA I GPU — TYLKO TELEFON
   --------------------------------------------------------------------------
   Tablet radzil sobie z ta sama strona bez problemu, wiec nie chodzi o blad
   w kodzie tylko o surowy koszt renderowania. Ponizej cztery rzeczy, ktore
   ten koszt realnie obnizaja, uszeregowane od najwiekszej.
   ========================================================================== */


/* --------------------------------------------------------------------------
   17.1 NAJWIEKSZA POZYCJA: NIE RENDERUJ TEGO, CZEGO NIE WIDAC
   --------------------------------------------------------------------------
   Twoje podstrony maja po 7-9 sekcji i ~1300 linii HTML. Domyslnie
   przegladarka liczy uklad i maluje CALA te tresc od razu przy wejsciu,
   lacznie z sekcjami oddalonymi o piec ekranow w dol.

   content-visibility:auto mowi: pomin uklad i malowanie tej sekcji, dopoki
   nie zblizy sie do ekranu. Przegladarka renderuje ja dopiero wtedy, gdy
   jest potrzebna. Na slabym procesorze to zwykle najwieksza pojedyncza
   oszczednosc, jaka mozna uzyskac bez tykania HTML.

   contain-intrinsic-size podaje wstepna wysokosc, zeby pasek przewijania
   nie skakal. Slowo "auto" znaczy: po pierwszym wyrenderowaniu zapamietaj
   prawdziwa wysokosc i uzywaj jej dalej.

   Pierwsza sekcja pod hero jest CELOWO wykluczona (:nth-of-type(1)) —
   uzytkownik dociera do niej po ulamku sekundy, wiec nie ma sensu jej
   odkladac, a to wlasnie ona wywolywala wrazenie opoznienia.

   GDYBY COKOLWIEK ZACZELO SKAKAC przy przewijaniu — usun ten jeden blok,
   reszta optymalizacji dziala niezaleznie.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  body > section:nth-of-type(n+2),
  body > footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
  }
}


/* --------------------------------------------------------------------------
   17.2 KONIEC Z filter:blur() NA BLOBACH
   --------------------------------------------------------------------------
   Blob to kolo z filter:blur(55-72px). Filtr rozmycia dziala tak, ze
   przegladarka najpierw rysuje ksztalt do osobnego bufora, potem przepuszcza
   go przez rozmycie, a przy promieniu 60px bufor musi byc o 120px wiekszy
   w kazda strone. Na telefonie to setki kilobajtow pamieci GPU na jeden blob
   i realny koszt przy pierwszym renderze.

   Ten sam efekt wizualny daje zwykly radial-gradient — kolor gaszony do
   przezroczystosci. Roznica: gradient jest malowany bezposrednio, bez bufora
   posredniego i bez zadnego filtra. Wyglada tak samo, kosztuje ulamek.

   Bloby podstron JUZ SA gradientami (background:radial-gradient), wiec tam
   wystarczy zdjac filtr. Bloby strony glownej maja plaski kolor, wiec
   podmieniamy tlo na gradient o tych samych barwach.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  .hero-blob, .page-hero .blob, .blob {
    filter: none !important;
  }

  /* strona glowna — plaski kolor zamieniony na gradient */
  .hero-blob.b1 {
    background: radial-gradient(circle, rgba(110,142,251,.30) 0%, rgba(110,142,251,.10) 45%, transparent 72%) !important;
  }
  .hero-blob.b2 {
    background: radial-gradient(circle, rgba(167,119,227,.26) 0%, rgba(167,119,227,.09) 45%, transparent 72%) !important;
  }

  /* podstrony — gradient juz jest, poszerzamy tylko zasieg poswiaty,
     bo wczesniej czesc pracy wykonywalo rozmycie */
  .page-hero .blob-1 {
    background: radial-gradient(circle, rgba(110,142,251,.26) 0%, rgba(110,142,251,.09) 45%, transparent 72%) !important;
  }
  .page-hero .blob-2 {
    background: radial-gradient(circle, rgba(167,119,227,.22) 0%, rgba(167,119,227,.08) 45%, transparent 72%) !important;
  }
  .page-hero .blob-3 {
    background: radial-gradient(circle, rgba(110,142,251,.16) 0%, transparent 70%) !important;
  }
}


/* --------------------------------------------------------------------------
   17.3 CIENIE
   --------------------------------------------------------------------------
   box-shadow z promieniem 70-90px na kilkunastu kartach naraz to ta sama
   klasa kosztu co rozmycie — kazdy cien jest osobno rasteryzowany.
   Na ekranie telefonu cien o promieniu 70px i tak zlewa sie w plame,
   wiec nic nie tracimy, skracajac go.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .st-tile, .fb-card, .fb-m, .card,
  .svc-card, .why-card, .dk-card, .bento-item, .hero-card-inner {
    box-shadow: 0 10px 24px -14px rgba(8,8,10,.20) !important;
  }
  .nav-inner { box-shadow: 0 2px 14px rgba(0,0,0,.07) !important; }
}


/* --------------------------------------------------------------------------
   17.4 ANIMACJE, KTORE NIGDY SIE NIE KONCZA
   --------------------------------------------------------------------------
   Pierscien przy przycisku telefonu pulsuje w nieskonczonosc. Dopoki trwa
   jakakolwiek animacja, przegladarka nie moze uspic petli renderowania —
   utrzymuje ja przez caly czas, gdy strona jest otwarta.

   Pierscien ma zwrocic uwage na przycisk, a to zalatwia w kilka sekund.
   Piec powtorzen zamiast nieskonczonosci: efekt zostaje, telefon moze
   przejsc w stan spoczynku.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  #fp::after {
    animation: fp-ripple 2.8s 1.8s 5 !important;
  }
}


/* ==========================================================================
   18. WYJATEK OD ZEROWANIA OPOZNIEN: KARTY CENOWE ("Ile to kosztuje?")
   --------------------------------------------------------------------------
   Sekcja z zakladkami cenowymi (Strony WWW, SEO, Audyty) ma wlasna
   choreografie: po klliknieciu zakladki elementy karty wjezdzaja z lewej
   po kolei — naglowek, kwota, opis, przycisk, potem lista cech. Cala rzecz
   opiera sie na transition-delay od .08s do .58s.

   Sekcja 15 zerowala opoznienia globalnie, wiec na telefonie karta
   pojawiala sie hurtem, bez kaskady. Tutaj przywracamy oryginalne wartosci.

   Dlaczego to wyjatek, a nie niekonsekwencja: sekcja 15 celowala w animacje
   WEJSC przy przewijaniu, gdzie kilkanascie elementow rusza naraz podczas
   gestu — tam opoznienia nakladaly sie na siebie i szarpaly scroll. Tutaj
   animacja odpala sie po dotknieciu zakladki, strona stoi w miejscu,
   a ruszaja elementy jednej karty. To nie kosztuje nic i jest tym,
   co widac na komputerze.

   Specyficznosc (0,3,0) wygrywa z gwiazdka z sekcji 15 (0,0,1),
   wiec zwykle !important tu wystarcza.
   ========================================================================== */

@media (max-width: 767px) {
  .price-card.active .price-card-head  { transition-delay: .08s !important; }
  .price-card.active .price-card-amt   { transition-delay: .16s !important; }
  .price-card.active .price-card-desc  { transition-delay: .24s !important; }
  .price-card.active .price-card-btn   { transition-delay: .32s !important; }
  .price-card.active .price-card-feats li:nth-child(1) { transition-delay: .40s !important; }
  .price-card.active .price-card-feats li:nth-child(2) { transition-delay: .46s !important; }
  .price-card.active .price-card-feats li:nth-child(3) { transition-delay: .52s !important; }
  .price-card.active .price-card-feats li:nth-child(4) { transition-delay: .58s !important; }
  .price-card.active .price-card-feats li:nth-child(5) { transition-delay: .64s !important; }

  /* Zaznaczona zakladka: strzalka przesuwa sie w prawo — to samo co na
     desktopie, tyle ze bez opoznienia (na desktopie tez go nie ma). */
  .price-tab, .price-tab-arrow {
    transition-duration: .3s !important;
  }
}


/* ==========================================================================
   19. NAGLOWEK HERO NA TABLETACH I LAPTOPACH (768–1679px)
   --------------------------------------------------------------------------
   Naglowki hero licza rozmiar z clamp(min, Xvw, max) skalowanego pod duze
   desktopy — powyzej ok. 1489px (hero-title) / ok. 1150-1550px (page-hero h1,
   zaleznie od podstrony) trafiaja juz w gorny sufit clamp() i przestaja rosnac.
   Problem w tym, ze PONIZEJ tego progu — czyli dokladnie na typowych
   rozdzielczosciach laptopa (1280, 1366, 1440, 1536px) — surowe vw wciaz
   liczy niemal maksymalna wartosc. Efekt: kazde dluzsze slowo naglowka
   ("internetowe", "Gdansk,") zajmuje cala szerokosc kontenera i ląduje
   w osobnej linii, a caly hero rozjezdza sie w pionie znacznie bardziej,
   niz na prawdziwym, szerokim desktopie.

   Dajemy tu wlasny clamp na calym przedziale tablet-laptop: startuje
   zblizony do sufitu z sekcji telefonu (plynne przejscie w okolicy
   767/768px), rosnie lagodniej niz oryginal (nizszy wspolczynnik vw),
   ale sufit ustawiamy tak, zeby przy 1679px prawie stykal sie z wartoscia,
   jaka i tak wyjdzie z oryginalnego clamp() tuz nad progiem 1680px —
   dzieki temu na koncu zakresu naglowek jest realnie duzy, bez skoku
   rozmiaru w miejscu zmiany reguly.
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1679px) {
  .hero-title { font-size: clamp(3.2rem, 5.6vw, 5.9rem) !important; }
  .page-hero h1 { font-size: clamp(2.8rem, 4.6vw, 4.4rem) !important; }
}


/* ==========================================================================
   20. TEKST HERO ZAWSZE NAD MAKIETAMI EKRANU
   --------------------------------------------------------------------------
   Dekoracyjne "makiety" (.hero-card-1/2/3 — male prostokaty z pasek-belka
   udajace okno przegladarki) potrafily na niektorych podstronach dostac
   z-index wyzszy niz sam tekst hero (.hero-content / .page-hero .wrap),
   przez co przy pewnych ukladach makieta nachodzila na naglowek i go
   zaslaniala. Wymuszamy tu na sztywno kolejnosc, ktora ma obowiazywac
   wszedzie: makiety zawsze POD tekstem, nigdy nad nim — niezaleznie od
   tego, jaki z-index akurat wpisano w <style> danej podstrony.
   ========================================================================== */

.hero-card, .hero-card-1, .hero-card-2, .hero-card-3 { z-index: 1 !important; }
.hero-content, .page-hero .wrap { z-index: 5 !important; }