/* Wspolne style stron ofertowych /rolki i /reklamy.
   Wyciagniete z uslugi.html 23.08.2026, zeby nie utrzymywac ich w dwoch plikach. */

body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
  .owijka{max-width:1080px;margin:0 auto;padding:0 20px}
  section{padding:64px 0}

  /* ---------- nagłówek strony ---------- */
  .gora{position:sticky;top:0;z-index:40;background:rgba(10,15,22,.86);
    backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .gora .owijka{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px}
  .marka{display:flex;align-items:center;gap:10px;font-weight:900;font-size:19px;letter-spacing:-.5px;
    color:var(--text);text-decoration:none}
  .marka svg{flex:none}
  .gora-linki{display:flex;gap:10px;align-items:center}
  .gora-linki a:not(.btn){color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:600;padding:8px 12px}
  .gora-linki a:not(.btn):hover{color:var(--text)}
  /* Wejscie do kursu: wyrozniona ramka, zeby nie zginelo miedzy kotwicami do sekcji. */
  .gora-linki a.link-kurs{color:var(--amber);border:1px solid rgba(255,177,61,.4);
    border-radius:999px;padding:8px 15px;background:rgba(255,177,61,.08)}
  .gora-linki a.link-kurs:hover{background:rgba(255,177,61,.16);color:var(--amber)}

  /* ---------- hero ---------- */
  .hero{padding:74px 0 48px;text-align:center}
  .hero h1{font-size:clamp(31px,5.2vw,54px);line-height:1.08;letter-spacing:-1.8px;margin-bottom:18px}
  .hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;
    background-clip:text;color:transparent}
  .hero .pod{color:#b6c4d4;font-size:clamp(15.5px,1.9vw,18.5px);line-height:1.65;
    max-width:660px;margin:0 auto 28px}
  .hero .pod b{color:var(--text)}
  .hero-btny{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  .duzy{display:inline-flex;align-items:center;gap:9px;padding:16px 30px;border-radius:999px;
    font-weight:800;font-size:16px;text-decoration:none;transition:transform .15s,box-shadow .15s}
  .duzy:hover{transform:translateY(-2px)}
  .duzy-a{background:var(--grad);color:#160604;box-shadow:0 16px 38px rgba(255,74,45,.4)}
  .duzy-b{background:linear-gradient(150deg,#5AD1EE,#38B6D8 55%,#1E8CAE);color:#04141c;
    box-shadow:0 16px 38px rgba(56,182,216,.34)}
  /* Wariant dla przycisku pobocznego. Wczesniej "Najpierw zapytam" dostawal gradient
     drugiej marki i wizualnie wygrywal z przyciskiem zakupowym. */
  .duzy-ghost{background:rgba(255,255,255,.05);color:var(--text);
    border:1px solid var(--line-2);box-shadow:none;font-weight:700}
  .duzy-ghost:hover{background:rgba(255,255,255,.1)}

  /* ---------- pasek zaufania ---------- */
  .zaufanie{padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .zaufanie .loga{display:flex;align-items:center;justify-content:center;gap:38px;flex-wrap:wrap}
  .zaufanie img{height:34px;width:auto;max-width:130px;object-fit:contain;opacity:.5;
    transition:opacity .2s;filter:grayscale(1)}
  .zaufanie img:hover{opacity:.95}
  .zaufanie .linia{text-align:center;color:#b6c4d4;font-size:15px;line-height:1.6;margin-top:20px}
  .zaufanie .linia b{color:var(--text)}
  .zaufanie .linia a{color:var(--amber);font-weight:700;white-space:nowrap}

  /* Tasma z opiniami. Jada w kolko, zatrzymuja sie pod kursorem, zeby dalo sie
     spokojnie przeczytac. Przy wlaczonej redukcji ruchu stoja nieruchomo. */
  .tasma{overflow:hidden;margin-top:26px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .tasma-tor{display:flex;gap:14px;width:max-content;animation:jedzie 58s linear infinite}
  .tasma:hover .tasma-tor{animation-play-state:paused}
  @keyframes jedzie{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media(prefers-reduced-motion:reduce){.tasma-tor{animation:none}}
  .cyt{width:420px;flex:none;padding:20px 22px;border-radius:16px;
    border:1px solid var(--line-2);background:var(--card)}
  .cyt p{color:#c2d0dd;font-size:14px;line-height:1.7;margin:0 0 13px}
  .cyt p b{color:#fff}
  .cyt-stopka{display:flex;align-items:center;gap:12px;padding-top:12px;
    border-top:1px solid rgba(255,255,255,.08)}
  .cyt-logo{height:30px;width:auto;max-width:100px;object-fit:contain;opacity:.6;flex:none}
  .cyt-kto{font-size:12.5px;font-weight:800;color:var(--amber)}
  .cyt-kto span{display:block;font-weight:500;color:#7f8fa0;margin-top:2px}

  /* Problem: trzy zdania, ktore czytelnik ma rozpoznac jako swoje. */
  .bole{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .bol{padding:24px 22px;border-radius:18px;border:1px solid var(--line-2);background:var(--card)}
  .bol .ik{font-size:26px;margin-bottom:12px}
  .bol h4{font-size:17px;letter-spacing:-.4px;margin-bottom:8px}
  .bol p{color:var(--muted);font-size:14px;line-height:1.65}

  /* Mechanizm: dlaczego u mnie to wyglada inaczej. */
  .filary{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
  .filar{padding:24px 22px;border-radius:18px;border:1px solid rgba(255,177,61,.28);
    background:linear-gradient(160deg,rgba(255,177,61,.07),var(--card))}
  .filar .nrf{color:var(--amber);font-size:12px;font-weight:900;letter-spacing:1.4px;
    text-transform:uppercase;margin-bottom:10px}
  .filar h4{font-size:17.5px;letter-spacing:-.4px;margin-bottom:8px}
  .filar p{color:var(--muted);font-size:14px;line-height:1.65}

  /* Finisz: jeden krok, nic wiecej. */
  .finisz{text-align:center;padding:44px 30px;border-radius:24px;
    background:linear-gradient(150deg,rgba(255,74,45,.12),rgba(56,182,216,.1));
    border:1px solid var(--line-2)}
  .finisz h2{font-size:clamp(25px,3.4vw,36px);letter-spacing:-1.2px;line-height:1.2;margin-bottom:14px}
  .finisz p{color:#b6c4d4;font-size:16px;line-height:1.7;max-width:600px;margin:0 auto 24px}
  .finisz p b{color:var(--text)}

  @media(max-width:900px){
    .bole,.filary{grid-template-columns:1fr}
    .cyt{width:300px}
  }

  /* ---------- liczby ---------- */
  .liczby{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 30px}
  .liczby-2{grid-template-columns:repeat(2,1fr)}
  .liczby-3{grid-template-columns:repeat(3,1fr)}
  .lb{padding:20px 18px;border-radius:16px;border:1px solid var(--line-2);background:var(--card)}
  .lb b{display:block;font-size:26px;font-weight:900;letter-spacing:-1px;line-height:1}
  .lb span{display:block;color:var(--muted);font-size:12.8px;line-height:1.5;margin-top:8px}

  /* ---------- sekcja ---------- */
  .naglowek{max-width:720px;margin-bottom:30px}
  .naglowek .tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:1.6px;
    text-transform:uppercase;border-radius:999px;padding:6px 14px;margin-bottom:16px}
  .tag-o{color:var(--amber);background:rgba(255,177,61,.12);border:1px solid rgba(255,177,61,.3)}
  .tag-c{color:var(--cyan);background:rgba(56,182,216,.14);border:1px solid rgba(56,182,216,.36)}
  .naglowek h2{font-size:clamp(26px,3.6vw,40px);line-height:1.15;letter-spacing:-1.3px;margin-bottom:14px}
  .naglowek p{color:#b6c4d4;font-size:16px;line-height:1.72}
  .naglowek p b{color:var(--text)}

  /* ---------- kroki ---------- */
  .kroki{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:32px}
  .krok{padding:22px;border-radius:16px;border:1px solid var(--line-2);background:var(--card)}
  .krok .nr{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;
    font-weight:900;font-size:15px;margin-bottom:12px}
  .krok h4{font-size:16.5px;letter-spacing:-.4px;margin-bottom:6px}
  .krok p{color:var(--muted);font-size:14px;line-height:1.6}

  /* ---------- pakiety ---------- */
  .pakiety{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .pak{position:relative;padding:26px 22px;border-radius:20px;border:1px solid var(--line-2);
    background:var(--card);display:flex;flex-direction:column}
  .pak-top{border-color:rgba(255,74,45,.55);background:linear-gradient(160deg,rgba(255,74,45,.1),var(--card));
    box-shadow:0 24px 56px rgba(255,74,45,.16)}
  .pak-badge{position:absolute;top:-11px;left:22px;padding:5px 13px;border-radius:999px;
    background:var(--grad);color:#160604;font-size:10.5px;font-weight:900;letter-spacing:.7px;text-transform:uppercase}
  .pak-ikona{font-size:24px;margin-bottom:10px}
  .pak-nazwa{font-size:19px;font-weight:900;letter-spacing:-.6px}
  .pak-rytm{color:var(--amber);font-size:13px;font-weight:700;margin-top:2px}
  .pak-dla{color:var(--muted);font-size:13.5px;line-height:1.55;margin:12px 0 16px;min-height:60px}
  .pak-ile{font-size:15px;font-weight:700}
  .pak-ile b{font-size:22px}
  .pak-cena{font-size:32px;font-weight:900;letter-spacing:-1.4px;margin-top:10px;line-height:1}
  .pak-cena span{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0}
  .pak-szt{color:var(--muted);font-size:12.5px;margin:7px 0 16px;min-height:34px;line-height:1.45}
  .pak-lista{list-style:none;margin:0 0 20px;padding:0}
  .pak-lista li{position:relative;padding-left:22px;margin-bottom:9px;color:#c2d0dd;font-size:13.5px;line-height:1.5}
  .pak-lista li::before{content:"✓";position:absolute;left:0;color:var(--amber);font-weight:900;font-size:13px}
  .pak-lista li b{color:#fff}
  .pak .btn{margin-top:auto}

  /* ---------- limit ---------- */
  .limit{margin-top:20px;padding:16px 20px;border-radius:14px;
    border:1px solid rgba(255,177,61,.4);background:rgba(255,177,61,.08);
    color:#e6d6bb;font-size:14px;line-height:1.65}
  .limit b{color:var(--amber)}
  /* Blok kontaktowy pod kazda oferta. Ma lapac ludzi, ktorzy sa blisko decyzji,
     ale maja jedno pytanie i bez odpowiedzi po prostu wyjda. */
  .pomoc{margin-top:16px;padding:18px 20px;border-radius:15px;display:flex;gap:15px;
    align-items:flex-start;border:1px solid var(--line-2);background:var(--card)}
  .pomoc .ik{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;
    justify-content:center;font-size:20px;flex:none}
  .pomoc-o .ik{background:rgba(255,177,61,.14);border:1px solid rgba(255,177,61,.34)}
  .pomoc-c .ik{background:rgba(56,182,216,.14);border:1px solid rgba(56,182,216,.34)}
  .pomoc b{display:block;font-size:15.5px;margin-bottom:5px}
  .pomoc p{color:var(--muted);font-size:14px;line-height:1.6;margin:0}
  .pomoc a{font-weight:700}
  .pomoc-o a{color:var(--amber)}
  .pomoc-c a{color:var(--cyan)}

  /* ---------- sekcja reklam ---------- */
  .rek-sekcja{background:linear-gradient(150deg,rgba(56,182,216,.08),transparent 60%);
    border-top:1px solid rgba(56,182,216,.2);border-bottom:1px solid rgba(56,182,216,.2)}
  .wynik{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0 0 16px;padding:16px 18px;
    border-radius:13px;background:rgba(56,182,216,.12);border:1px solid rgba(56,182,216,.34)}
  .wynik-poz b{display:block;font-size:24px;font-weight:900;letter-spacing:-.9px;color:#fff;line-height:1}
  .wynik-poz span{display:block;font-size:10.5px;color:#8fa4b2;margin-top:5px;text-transform:uppercase;letter-spacing:1.2px}
  .wynik-str{color:var(--cyan);font-size:22px;font-weight:900}
  .wynik-roas{margin-left:auto;padding:9px 16px;border-radius:999px;
    background:linear-gradient(150deg,#5AD1EE,#38B6D8 55%,#1E8CAE);color:#04141c;font-weight:900;font-size:14.5px}
  .opinie{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:30px}
  .op{padding:19px 21px;border-radius:15px;border:1px solid rgba(56,182,216,.22);background:rgba(6,14,23,.45)}
  .op-duza{grid-column:1 / -1;border-color:rgba(56,182,216,.45)}
  .op p{color:#c2d5df;font-size:14px;line-height:1.68;margin:0 0 12px}
  .op-duza p{font-size:15px}
  .op p b{color:#fff}
  .op-stopka{display:flex;align-items:center;gap:13px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
  .op-logo{height:32px;width:auto;max-width:115px;object-fit:contain;opacity:.62;flex:none}
  .op:hover .op-logo{opacity:1}
  .op-kto{font-size:12.5px;font-weight:800;color:var(--cyan)}
  .op-kto span{display:block;font-weight:500;color:#7f95a4;margin-top:2px}
  .rek-karty{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .rk{position:relative;padding:26px 22px;border-radius:20px;border:1px solid rgba(56,182,216,.28);
    background:rgba(6,14,23,.5);display:flex;flex-direction:column}
  .rk-top{border-color:rgba(56,182,216,.6);box-shadow:0 24px 52px rgba(56,182,216,.16)}
  .rk-glowa{display:flex;align-items:center;gap:12px;margin-bottom:8px}
  .rk-ikona{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
    font-size:21px;background:rgba(56,182,216,.14);border:1px solid rgba(56,182,216,.34);flex:none}
  .rk-nazwa{font-size:18px;font-weight:900;letter-spacing:-.5px}
  .rk-dla{color:#8fa4b2;font-size:13.5px;line-height:1.55;margin-bottom:16px;min-height:44px}
  .rk-cena{font-size:30px;font-weight:900;letter-spacing:-1.3px;line-height:1}
  .rk-cena span{font-size:13px;font-weight:600;color:var(--cyan);letter-spacing:0}
  .rk-potem{color:#8fa4b2;font-size:12.5px;margin:8px 0 0}
  .rk-plus{margin:16px 0 12px;padding:12px 15px;border-radius:11px;
    background:linear-gradient(120deg,rgba(56,182,216,.22),rgba(56,182,216,.08));
    border:1px solid rgba(56,182,216,.45);color:#dff1f8;font-size:13.5px;line-height:1.5}
  .rk-plus::before{content:"✓ ";color:var(--cyan);font-weight:900}
  .rk-plus b{color:#fff}
  .rk-etyk{color:var(--cyan);font-size:11.5px;font-weight:800;letter-spacing:1.2px;
    text-transform:uppercase;margin:0 0 4px}
  .rk-lista{list-style:none;margin:12px 0 20px;padding:0}
  .rk-lista li{position:relative;padding-left:23px;margin-bottom:9px;color:#c2d5df;font-size:13.5px;line-height:1.5}
  .rk-lista li::before{content:"✓";position:absolute;left:0;color:var(--cyan);font-weight:900;font-size:13px}
  .rk-lista li b{color:#fff}
  .rk .btn{margin-top:auto}
  .btn-cyan{background:linear-gradient(150deg,#5AD1EE,#38B6D8 55%,#1E8CAE);color:#04141c;
    box-shadow:0 14px 32px rgba(56,182,216,.34)}
  .budzet{margin-top:18px;padding:15px 18px;border-radius:13px;
    border:1px solid rgba(56,182,216,.32);background:rgba(56,182,216,.08);
    color:#cbdfe8;font-size:13.5px;line-height:1.65}
  .budzet b{color:var(--cyan)}

  /* ---------- kto to robi ---------- */
  .autor{display:grid;grid-template-columns:1.1fr 1fr;gap:26px;align-items:center;
    padding:32px;border-radius:22px;border:1px solid var(--line-2);background:var(--card)}
  .autor-osoba{display:flex;align-items:center;gap:14px;margin-bottom:18px}
  .autor-osoba img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;
    border:2px solid rgba(255,177,61,.4)}
  .autor-osoba b{display:block;font-size:16.5px;letter-spacing:-.3px}
  .autor-osoba span{display:block;color:var(--muted);font-size:13px;margin-top:3px}
  .autor h3{font-size:24px;letter-spacing:-.9px;margin-bottom:12px}
  .autor p{color:#b6c4d4;font-size:15px;line-height:1.72;margin-bottom:12px}
  .autor p b{color:var(--text)}
  .autor-liczby{display:grid;gap:11px}
  .al{padding:16px 18px;border-radius:14px;border:1px solid var(--line-2);background:rgba(0,0,0,.22)}
  .al b{display:block;font-size:22px;font-weight:900;letter-spacing:-.8px;
    background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .al span{display:block;color:var(--muted);font-size:12.8px;line-height:1.5;margin-top:5px}

  /* ---------- pytania ---------- */
  .pyt{border-top:1px solid var(--line)}
  .pyt details{border-bottom:1px solid var(--line);padding:0}
  /* Padding siedzi na summary, nie na details: inaczej realny cel klikniecia
     ma 26 px przy zalecanym minimum 44 px, a to jedyny element interaktywny
     w calej sekcji zbijania obiekcji. */
  .pyt summary{cursor:pointer;font-weight:700;font-size:16px;list-style:none;
    display:flex;justify-content:space-between;align-items:center;gap:16px;
    padding:19px 0;min-height:56px}
  .pyt details > p:last-child{padding-bottom:18px}
  .pyt summary::-webkit-details-marker{display:none}
  .pyt summary::after{content:"+";color:var(--amber);font-weight:900;font-size:20px;line-height:1}
  .pyt details[open] summary::after{content:"−"}
  .pyt p{color:var(--muted);font-size:14.8px;line-height:1.72;margin-top:11px;max-width:760px}
  .pyt p b{color:var(--text)}

  /* ---------- stopka ---------- */
  .stopka{border-top:1px solid var(--line);padding:34px 0;color:var(--muted);font-size:13.5px;line-height:1.7}
  .stopka a{color:var(--amber)}

  .podglad-pasek{background:rgba(255,177,61,.14);border-bottom:1px solid rgba(255,177,61,.4);
    color:#e6d6bb;font-size:13px;padding:9px 20px;text-align:center}
  .podglad-pasek b{color:var(--amber)}

  @media(max-width:900px){
    .liczby{grid-template-columns:1fr 1fr}
    .kroki,.pakiety{grid-template-columns:1fr}
    .rek-karty,.opinie{grid-template-columns:1fr}
    .autor{grid-template-columns:1fr;padding:26px 20px}
    .pak-dla,.rk-dla,.pak-szt{min-height:0}
    .gora-linki a:not(.btn){display:none}
    section{padding:48px 0}
  }

/* ---------- Rachunek: trzy drogi obok siebie, jedna wyrozniona ---------- */
.drogi{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.droga{padding:24px 22px;border-radius:18px;border:1px solid var(--line-2);background:var(--card);
  display:flex;flex-direction:column}
.droga-ta{border-color:rgba(255,74,45,.5);background:linear-gradient(160deg,rgba(255,74,45,.1),var(--card));
  box-shadow:0 22px 50px rgba(255,74,45,.14)}
.droga-ta-c{border-color:rgba(56,182,216,.55);background:linear-gradient(160deg,rgba(56,182,216,.11),var(--card));
  box-shadow:0 22px 50px rgba(56,182,216,.14)}
.droga h4{font-size:17px;letter-spacing:-.4px;margin-bottom:4px}
.droga .pod-h{color:var(--muted);font-size:12.8px;margin-bottom:14px}
.droga .duza{font-size:27px;font-weight:900;letter-spacing:-1.2px;line-height:1.1;margin-bottom:4px}
.droga .duza-o{color:var(--amber)}
.droga .duza-c{color:var(--cyan)}
.droga ul{list-style:none;margin:12px 0 0;padding:0}
.droga li{position:relative;padding-left:19px;margin-bottom:8px;color:#c2d0dd;font-size:13.5px;line-height:1.5}
.droga li::before{content:"·";position:absolute;left:5px;color:var(--muted);font-weight:900}
.droga li b{color:#fff}

/* ---------- Dla kogo: dwie kolumny, tak i nie ---------- */
.dwa{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.panelik{padding:26px 24px;border-radius:20px;border:1px solid var(--line-2);background:var(--card)}
.panelik-tak{border-color:rgba(102,214,143,.34);background:linear-gradient(160deg,rgba(102,214,143,.07),var(--card))}
.panelik-nie{border-color:rgba(255,255,255,.14)}
.panelik h3{font-size:18px;letter-spacing:-.5px;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.panelik ul{list-style:none;margin:0;padding:0}
.panelik li{position:relative;padding-left:26px;margin-bottom:11px;color:#c2d0dd;font-size:14.5px;line-height:1.55}
.panelik-tak li::before{content:"✓";position:absolute;left:0;color:#66d68f;font-weight:900}
.panelik-nie li::before{content:"✕";position:absolute;left:0;color:#8fa0b8;font-weight:900}

/* ---------- Porownanie przed i po ---------- */
.przedpo{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.przedpo-txt h2{font-size:clamp(24px,3.2vw,36px);line-height:1.16;letter-spacing:-1.2px;margin-bottom:14px}
.przedpo-txt p{color:#b6c4d4;font-size:15.5px;line-height:1.7;margin-bottom:18px}
.przedpo-txt p b{color:var(--text)}
.przedpo video{width:100%;border-radius:20px;display:block;border:1px solid var(--line-2)}

@media(max-width:900px){
  .drogi,.dwa,.przedpo{grid-template-columns:1fr}
}

/* ---------- Runda 1: hierarchia wezwania i zdjecie ryzyka ----------
   Badania stron docelowych 2026: jedno dominujace wezwanie nad linia zgiecia,
   83% ruchu z telefonu, wiec przycisk musi byc widoczny bez przewijania.
   Drugie wyjscie zostaje, ale jako zwykly odnosnik, nie drugi wielki przycisk. */
.hero-drugi{display:inline-block;margin-top:16px;color:var(--muted);font-size:14.5px;
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:2px}
.hero-drugi:hover{color:var(--text)}
.hero-pewnosc{margin-top:18px;color:#8fa0b8;font-size:13.5px;line-height:1.6}
.hero-pewnosc b{color:#c2d0dd}

/* Pasek zaufania przy cenach: recenzje obok ceny podnosza konwersje
   przy drozszych produktach mocniej niz gdziekolwiek indziej na stronie. */
.przy-cenie{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;
  margin-bottom:20px;padding:14px 20px;border-radius:14px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);text-align:center}
.przy-cenie div{color:#c2d0dd;font-size:13.5px;line-height:1.5}
.przy-cenie b{display:block;font-size:17px;color:var(--text);letter-spacing:-.3px}
.przy-cenie .rozdziel{width:1px;height:32px;background:var(--line-2)}
@media(max-width:700px){.przy-cenie .rozdziel{display:none}}

/* ---------- Nawigacja miedzy stronami ---------- */
.gora-linki .grupa{display:flex;gap:6px;align-items:center;padding-left:10px;margin-left:4px;
  border-left:1px solid var(--line-2)}

/* ---------- Runda 2 ---------- */
/* Co sie stanie po kliknieciu. Zdejmuje niepewnosc tuz przed platnoscia. */
.po-kliknieciu{margin-top:14px;text-align:center;color:#8fa0b8;font-size:13.5px;line-height:1.7}
.po-kliknieciu b{color:#c2d0dd}
.po-kliknieciu .krok-mini{display:inline-block;margin:0 4px}

/* Wezwanie w polowie strony, zaraz po rachunku, czyli tam gdzie przekonanie
   jest najwyzsze, a do cennika jeszcze kawalek przewijania. */
.srodek-cta{margin-top:26px;padding:26px 24px;border-radius:20px;text-align:center;
  background:linear-gradient(150deg,rgba(255,74,45,.12),rgba(255,177,61,.07));
  border:1px solid var(--line-2)}
.srodek-cta-c{background:linear-gradient(150deg,rgba(56,182,216,.14),rgba(56,182,216,.05))}
.srodek-cta p{color:#c2d0dd;font-size:15.5px;line-height:1.6;margin:0 0 16px;max-width:560px;
  margin-left:auto;margin-right:auto}
.srodek-cta p b{color:var(--text)}

/* Na telefonie zostawiamy widoczne przejscie do drugiej uslugi.
   Wczesniej znikalo razem z kotwicami i obie strony byly odciete od siebie. */
@media(max-width:720px){
  .gora-linki .grupa{padding-left:0;margin-left:0;border-left:0}
  .gora-linki a.link-kurs{display:inline-block;font-size:13px;padding:7px 12px}
}

/* ---------- Runda 3: galeria efektow i zdjecie ryzyka ---------- */
.efekty{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.efekt{border-radius:18px;overflow:hidden;border:1px solid var(--line-2);background:var(--card)}
.efekt video{width:100%;display:block;aspect-ratio:9/16;object-fit:cover}
.efekt figcaption{padding:12px 14px;color:#c2d0dd;font-size:13px;line-height:1.45;text-align:center}
@media(max-width:900px){.efekty{grid-template-columns:1fr 1fr}}

.ryzyko{margin-top:18px;padding:20px 22px;border-radius:16px;display:flex;gap:16px;
  align-items:flex-start;border:1px solid rgba(102,214,143,.3);background:rgba(102,214,143,.06)}
.ryzyko .ik{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-size:21px;flex:none;background:rgba(102,214,143,.14);
  border:1px solid rgba(102,214,143,.34)}
.ryzyko b{display:block;font-size:16px;margin-bottom:6px;color:var(--text)}
.ryzyko p{color:#9fb0c2;font-size:14.5px;line-height:1.65;margin:0}
.ryzyko p b{display:inline;color:var(--text)}

/* ---------- Runda 4 ---------- */
/* Wideo 9:16 w kolumnie o polowie szerokosci robilo sie gigantyczne i rozwalalo
   proporcje calej sekcji. Ograniczamy je i centrujemy. */
.przedpo video{max-width:340px;margin:0 auto}
.przedpo{align-items:center}

/* Drugi odnosnik w pasku ma wygladac jak przycisk, a nie jak zapomniany napis. */

/* Dlaczego wiekszy budzet ma sens: osobna ramka, bo to argument, ktory
   podnosi wartosc zamowienia i jednoczesnie jest uczciwy. */
.budzet-plus{margin-top:16px;padding:22px 24px;border-radius:18px;
  border:1px solid rgba(56,182,216,.34);background:linear-gradient(160deg,rgba(56,182,216,.1),rgba(6,14,23,.5))}
.budzet-plus h4{font-size:18px;letter-spacing:-.5px;margin-bottom:10px}
.budzet-plus p{color:#c2d5df;font-size:14.5px;line-height:1.7;margin:0 0 10px}
.budzet-plus p:last-child{margin-bottom:0}
.budzet-plus b{color:#fff}

/* ---------- Runda 5 ---------- */
/* Wideo przed i po wisialo samotnie w pustej kolumnie. Dostaje ramke w kolorach
   marki, wezsza kolumne i wyrownanie do tekstu obok. */
.przedpo{grid-template-columns:1.12fr .88fr;gap:44px}
.przedpo-ramka{max-width:302px;margin:0 auto;padding:9px;border-radius:30px;
  background:linear-gradient(160deg,rgba(255,177,61,.4),rgba(255,74,45,.22) 55%,rgba(224,41,15,.16));
  box-shadow:0 34px 74px rgba(0,0,0,.55)}
.przedpo-ramka video{width:100%;max-width:none;border-radius:22px;border:0;display:block}
.przedpo-podpis{text-align:center;color:#8fa0b8;font-size:12.5px;margin-top:12px;line-height:1.5}

/* Wyrozniona sciezka w rachunku byla obwiedziona na czerwono, co czytalo sie
   jak ostrzezenie, a nie jak rekomendacja. Zielen mowi "to jest ta dobra". */
.droga-ta{border-color:rgba(102,214,143,.55);
  background:linear-gradient(160deg,rgba(102,214,143,.11),var(--card));
  box-shadow:0 22px 50px rgba(102,214,143,.13)}
.droga .duza-o{color:#66d68f}
.droga-ta li::before{color:#66d68f}
.droga-znacznik{display:inline-block;margin-bottom:10px;padding:5px 12px;border-radius:999px;
  background:rgba(102,214,143,.16);border:1px solid rgba(102,214,143,.4);
  color:#66d68f;font-size:11px;font-weight:900;letter-spacing:1.1px;text-transform:uppercase}
.droga-ta-c .droga-znacznik{background:rgba(56,182,216,.16);border-color:rgba(56,182,216,.45);color:var(--cyan)}

@media(max-width:900px){.przedpo{gap:28px}}

/* ---------- Runda 6: nagranie przed/po wchodzi do naglowka strony ----------
   Badania stron docelowych: decyzja zapada w pierwszych sekundach, a obok
   naglowka ma stac dowod, nie ozdobnik. Osobna sekcja z tym wideo zostala
   usunieta, bo powtarzala to samo pol strony nizej i rozwalala proporcje. */
.hero-uklad{display:grid;grid-template-columns:1.06fr .94fr;gap:46px;align-items:center;text-align:left}
.hero-uklad .pod{margin:0 0 24px;max-width:none}
.hero-uklad .hero-btny{justify-content:flex-start}
.hero-uklad .hero-pewnosc{margin-top:16px}
.hero-wideo{max-width:290px;margin:0 auto;padding:9px;border-radius:30px;
  background:linear-gradient(160deg,rgba(255,177,61,.4),rgba(255,74,45,.22) 55%,rgba(224,41,15,.16));
  box-shadow:0 34px 74px rgba(0,0,0,.55)}
.hero-wideo video{width:100%;border-radius:22px;display:block}
.hero-podpis{text-align:center;color:#8fa0b8;font-size:12.5px;margin-top:12px;line-height:1.5;
  max-width:290px;margin-left:auto;margin-right:auto}
.hero-podpis b{color:#c2d0dd}
@media(max-width:900px){
  .hero-uklad{grid-template-columns:1fr;text-align:center;gap:32px}
  .hero-uklad .hero-btny{justify-content:center}
  .hero-uklad .pod{margin-left:auto;margin-right:auto;max-width:560px}
}

/* ---------- Kontakt przed zakupem ----------
   Przy kwotach rzedu dwoch tysiecy czesc ludzi chce najpierw zobaczyc czlowieka.
   Blok stoi pod cennikiem, bo ma lapac tych, ktorzy nie kliknelii "kupuje". */
.kontakt{margin-top:20px;padding:32px 28px;border-radius:22px;text-align:center;
  border:1px solid var(--line-2);background:var(--card)}
.kontakt h3{font-size:clamp(21px,2.6vw,27px);letter-spacing:-.8px;line-height:1.2;margin-bottom:10px}
.kontakt > p{color:#b6c4d4;font-size:15.5px;line-height:1.7;max-width:600px;margin:0 auto 22px}
.kontakt > p b{color:var(--text)}
.kontakt-dane{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.kontakt-dane a{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:999px;
  font-weight:700;font-size:15px;text-decoration:none;color:var(--text);
  border:1px solid var(--line-2);background:rgba(255,255,255,.05);transition:.15s}
.kontakt-dane a:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.kontakt-spol{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.kontakt-spol a{display:inline-flex;align-items:center;gap:8px;padding:11px 19px;border-radius:999px;
  font-weight:700;font-size:14.5px;text-decoration:none;color:#fff;transition:.15s}
.kontakt-spol a:hover{transform:translateY(-2px)}
.spol-fb{background:#1877F2}
.spol-ig{background:linear-gradient(135deg,#833AB4,#E1306C 55%,#F77737)}
.kontakt-drobne{color:#8fa0b8;font-size:13px;margin-top:16px;line-height:1.6}

/* Czternascie logo w jednym rzedzie by sie nie zmiescilo, wiec zawijamy je
   w dwa i zmniejszamy, zeby pasek nadal czytal sie jako jeden element. */
.zaufanie .loga{gap:30px 34px;max-width:940px;margin:0 auto}
.zaufanie img{height:29px;max-width:112px}
@media(max-width:700px){.zaufanie .loga{gap:22px 24px}
  /* 50% krycia plus skala szarosci na czarnym tle robily z logotypow rzad plam. */
  .zaufanie img{height:30px;max-width:100px;opacity:.8;filter:grayscale(1) brightness(1.7)}}

/* ---------- Pasek metryk pod naglowkiem ----------
   Wzorzec z najlepszych stron uslug abonamentowych: trzy, cztery liczby, zanim
   czytelnik cokolwiek przewinie. Jedna z nich to limit miejsc, sprzedawany jako
   gwarancja jakosci, a nie jako ograniczenie. */
.metryki{display:flex;justify-content:center;gap:0;flex-wrap:wrap;margin-top:30px;
  border-top:1px solid var(--line);padding-top:24px}
.metryka{padding:0 26px;text-align:center;position:relative}
.metryka + .metryka::before{content:"";position:absolute;left:0;top:6px;bottom:6px;
  width:1px;background:var(--line-2)}
.metryka b{display:block;font-size:21px;font-weight:900;letter-spacing:-.7px;line-height:1.1}
.metryka span{display:block;color:var(--muted);font-size:12.5px;margin-top:5px;line-height:1.4}
.metryka-o b{color:var(--amber)}
.metryka-c b{color:var(--cyan)}
@media(max-width:700px){
  .metryki{gap:18px 0}
  .metryka{padding:0 14px;flex:1 1 40%}
  .metryka + .metryka::before{display:none}
}

/* Kotwica cenowa: ile to kosztuje gdzie indziej. */
.kotwica{margin-top:18px;padding:22px 24px;border-radius:18px;
  border:1px solid rgba(56,182,216,.34);background:linear-gradient(160deg,rgba(56,182,216,.09),rgba(6,14,23,.5))}
.kotwica h4{font-size:18px;letter-spacing:-.5px;margin-bottom:10px}
.kotwica p{color:#c2d5df;font-size:14.5px;line-height:1.7;margin:0 0 10px}
.kotwica p:last-child{margin-bottom:0}
.kotwica b{color:#fff}

/* Dlaczego wspolprace sie koncza. Przy abonamencie to najwazniejsza obawa,
   a prawdziwa odpowiedz brzmi lepiej niz jakiekolwiek zapewnienie. */
.staz{margin-top:20px;padding:20px 24px;border-radius:16px;text-align:center;
  border:1px solid rgba(102,214,143,.28);background:rgba(102,214,143,.06);
  color:#c2d0dd;font-size:14.5px;line-height:1.7}
.staz b{color:var(--text)}

/* Drugi, biezacy przyklad. Mniejszy od glownego, bo jego rola jest inna:
   pokazuje, ze pierwszy wynik nie byl przypadkiem, i to przy trwajacej wspolpracy. */
.case-drugi{margin-top:16px;padding:24px;border-radius:20px;
  border:1px solid rgba(56,182,216,.28);background:rgba(6,14,23,.45)}
.case-drugi .etyk{color:var(--cyan);font-size:11.5px;font-weight:800;letter-spacing:1.3px;
  text-transform:uppercase;margin-bottom:12px}
.case-drugi p{color:#c2d5df;font-size:14.5px;line-height:1.7;margin:14px 0 0}
.case-drugi p b{color:#fff}

/* Rolka probna. Stoi POD pakietami, bo ma lapac tych, ktorzy nie kliknelii wyzej,
   a nie odciagac od abonamentu. Stad wezszy uklad i spokojniejsze kolory. */
.proba{margin-top:18px;padding:24px 26px;border-radius:20px;display:flex;gap:22px;
  align-items:center;flex-wrap:wrap;justify-content:space-between;
  border:1px dashed rgba(255,177,61,.45);background:rgba(255,177,61,.05)}
.proba-txt{flex:1 1 420px}
.proba-txt .etyk{color:var(--amber);font-size:11.5px;font-weight:800;letter-spacing:1.3px;
  text-transform:uppercase;margin-bottom:8px}
.proba-txt h4{font-size:19px;letter-spacing:-.5px;margin-bottom:8px}
.proba-txt p{color:#9fb0c2;font-size:14.5px;line-height:1.65;margin:0}
.proba-txt p b{color:var(--text)}
.proba-akcja{text-align:center;flex:0 0 auto}
.proba-cena{font-size:30px;font-weight:900;letter-spacing:-1.2px;line-height:1;margin-bottom:4px}
.proba-cena span{font-size:13px;font-weight:600;color:var(--muted);display:block;margin-top:5px}

/* ---------- Staz klientow, wersja druga ----------
   Wczesniej byl to jeden akapit rozciagniety na cala szerokosc strony i czytal sie
   jak przypis. Teraz: waski blok, zdanie glowne, staze jako osobne plakietki. */
.staz{max-width:780px;margin:22px auto 0;padding:26px 28px;border-radius:20px;text-align:center;
  border:1px solid rgba(102,214,143,.3);background:rgba(102,214,143,.06);color:#c2d0dd;
  font-size:15px;line-height:1.7}
.staz-tytul{display:block;font-size:17.5px;letter-spacing:-.4px;color:var(--text);
  font-weight:800;margin-bottom:16px;line-height:1.35}
.staz-lista{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.staz-lista span{padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700;
  color:#c2d0dd;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.1)}
.staz-lista span b{color:#66d68f;font-weight:900}
.staz-stopka{color:#9fb0c2;font-size:14px;line-height:1.65;margin:0;max-width:620px;
  margin-left:auto;margin-right:auto}
.staz-stopka b{color:var(--text)}

/* Na telefonie male wersaliki schodzily ponizej 12 pikseli i robily sie nieczytelne. */
@media(max-width:700px){
  .tag, .pak-badge, .etyk, .rk-etyk, .nrf, .case-etap b, .droga-znacznik{font-size:12px}
}

/* ---------- Tasma z opiniami na telefonie ----------
   Przy 58 sekundach na pelny obieg pierwsza karta stala kilkanascie sekund
   i wygladalo to, jakby nic sie nie ruszalo. Na waskim ekranie skracamy obieg.
   Do tego, gdy ktos ma wlaczona redukcje ruchu, animacja nie dziala wcale,
   wiec zamiast martwej tasmy dajemy pasek do przesuwania palcem. */
@media(max-width:700px){
  .tasma-tor{animation-duration:24s}
  .cyt{width:80vw;max-width:330px}
}
@media(prefers-reduced-motion:reduce){
  .tasma{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .tasma-tor{animation:none}
  .cyt{scroll-snap-align:center}
}


/* ---------- Poprawki po audycie, 27.08.2026 ---------- */

/* Pasek zaufania nad cenami zjadal 279 px na telefonie, czyli ponad pol ekranu
   dokladnie miedzy naglowkiem cennika a pierwsza cena. */
@media(max-width:700px){
  .przy-cenie{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;padding:16px}
  .przy-cenie div{font-size:12.5px}
  .przy-cenie b{font-size:15.5px}
}

/* Naglowek nie miescil sie w 390 px: marka plus linki potrzebowaly 364 px
   przy dostepnych 350, wiec przycisk cennika byl ucinany. */
@media(max-width:430px){
  .gora .owijka{padding-left:14px;padding-right:14px}
  .marka{font-size:17px;gap:8px}
  .gora-linki{gap:6px}
  .gora-linki a.link-kurs{font-size:12px;padding:7px 10px}
  .gora-linki .btn-sm{padding:10px 14px;font-size:13px}
}

/* Przejscie miedzy oferta rolek a oferta reklam znikalo w oknie 721-900 px. */
@media(max-width:900px){
  .gora-linki a.link-kurs{display:inline-flex}
}

/* Na telefonie karty cennika ida jedna pod druga, wiec kolejnosc w kodzie staje sie
   kolejnoscia pionowa, a pierwsza widoczna cena byla najgorsza w calej ofercie. */
@media(max-width:900px){
  .pakiety .pak-top{order:-1}
}

/* ---------- Gwarancja ----------
   Wersja pierwsza byla zwykla ramka pod cennikiem i po prostu ginela.
   Gwarancja, ktorej nikt nie zauwazy, nie zdejmuje zadnego ryzyka, wiec teraz
   stoi NAD cenami, ma wlasny kolor (zielen, zeby nie walczyla z pomaranczowym CTA),
   pieczec i najwiekszy tekst w calej sekcji cennika. Powtorzona jest w naglowku
   strony i przy ostatnim wezwaniu. */
.gwar-duza{
  display:flex;gap:28px;align-items:center;margin:0 0 22px;padding:32px 34px;
  border-radius:24px;border:2px solid rgba(102,214,143,.5);
  background:
    radial-gradient(120% 160% at 0% 0%,rgba(102,214,143,.17),transparent 62%),
    linear-gradient(160deg,rgba(102,214,143,.1),rgba(6,20,12,.72));
  box-shadow:0 26px 60px rgba(102,214,143,.14)
}
.gwar-pieczec{
  flex:none;width:132px;height:132px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:2px dashed rgba(102,214,143,.62);background:rgba(102,214,143,.1);
  text-align:center;line-height:1
}
.gwar-pieczec .gp-gora,.gwar-pieczec .gp-dol{
  font-size:10.5px;font-weight:900;letter-spacing:2.1px;text-transform:uppercase;color:#83dda6
}
.gwar-pieczec .gp-srodek{
  font-size:38px;font-weight:900;letter-spacing:-1.6px;color:#a6ecc2;margin:5px 0 4px
}
.gwar-duza h3{
  font-size:clamp(21px,2.7vw,30px);font-weight:900;letter-spacing:-.9px;line-height:1.16;
  margin:0 0 12px;color:#fff
}
.gwar-duza h3 em{font-style:normal;color:#8ee3ad}
.gwar-duza p{color:#cadbd0;font-size:15.5px;line-height:1.72;margin:0 0 10px}
.gwar-duza p b{color:#fff}
.gwar-duza .gwar-punkta{
  display:inline-block;margin-top:4px;padding:9px 15px;border-radius:999px;
  background:rgba(102,214,143,.16);border:1px solid rgba(102,214,143,.4);
  color:#a6ecc2;font-size:14.5px;font-weight:800
}
@media(max-width:760px){
  .gwar-duza{flex-direction:column;gap:18px;text-align:center;padding:26px 20px}
  .gwar-pieczec{width:112px;height:112px}
  .gwar-pieczec .gp-srodek{font-size:32px}
}

/* Jednolinijkowe przypomnienie: w naglowku strony i przy ostatnim wezwaniu. */
.gwar-pasek{
  display:inline-flex;align-items:center;gap:10px;margin-top:18px;
  padding:11px 20px;border-radius:999px;
  border:1px solid rgba(102,214,143,.44);background:rgba(102,214,143,.11);
  color:#b9e9cb;font-size:14.5px;font-weight:700;line-height:1.35;text-align:left
}
.gwar-pasek b{color:#fff}
.gwar-pasek .ik{font-size:17px;flex:none}
@media(max-width:600px){.gwar-pasek{font-size:13.2px;padding:10px 16px;gap:8px}}

/* ---------- Runda 7: prawdziwe rolki klientow ----------
   Sekcja "Efekty" pokazuje wylacznie material Mateusza, wiec odwiedzajacy widzial
   dowod na to, ze montazysta umie zmontowac samego siebie. Trzy rolki klientow
   z trzech roznych branz odpowiadaja na pytanie, ktore rodzi sie zaraz po hero:
   "czy to zadziala u kogos takiego jak ja". Dlatego stoja tuz pod efektami,
   a nie przy cenniku, gdzie dociera juz tylko czesc ruchu.
   Wideo ma lektora, wiec nie ma autoodtwarzania: film rusza dopiero po kliknieciu
   i z dzwiekiem, a pozostale sie zatrzymuja. */
/* 26.09.2026: siatka zamieniona na tasme przewijana w bok, jak na stronie kursu.
   Uklad tasmy, strzalki, podpowiedz "przewin" i pasek postepu biora sie ze style.css
   (.klienci-pas), tu tylko szerokosc karty z podpisem i odstep pod paddingiem
   .owijka (20 px, a nie 24 px jak .container na kursie). */
.klient{flex:0 0 270px;width:270px}
.klienci-strzalka{top:40%}
.klient-ramka{position:relative;padding:9px;border-radius:30px;cursor:pointer;
  background:linear-gradient(160deg,rgba(255,177,61,.4),rgba(255,74,45,.22) 55%,rgba(224,41,15,.16));
  box-shadow:0 30px 66px rgba(0,0,0,.5)}
.klient-ramka video{width:100%;display:block;border-radius:22px;aspect-ratio:9/16;
  object-fit:cover;background:#05090f}
.klient-play{position:absolute;inset:9px;border-radius:22px;display:flex;
  align-items:center;justify-content:center;transition:opacity .18s ease;
  background:linear-gradient(180deg,rgba(4,8,14,.04),rgba(4,8,14,.46))}
.klient-play i{width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.95);
  display:flex;align-items:center;justify-content:center;box-shadow:0 18px 42px rgba(0,0,0,.5)}
.klient-play i::before{content:"";border-style:solid;border-width:13px 0 13px 21px;
  border-color:transparent transparent transparent #0d1218;margin-left:5px}
.klient.gra .klient-play{opacity:0;pointer-events:none}
.klient-branza{display:inline-block;margin-top:16px;padding:5px 12px;border-radius:999px;
  background:rgba(255,122,77,.14);border:1px solid rgba(255,122,77,.42);
  color:#ffb13d;font-size:11px;font-weight:900;letter-spacing:1.1px;text-transform:uppercase}
.klient-opis{color:#9fb0c2;font-size:14px;line-height:1.65;margin-top:10px}
.klient-opis b{color:#c2d0dd}
.klienci-stopka{margin-top:30px;text-align:center;color:#8fa0b8;font-size:14px;line-height:1.65}
.klienci-stopka b{color:#c2d0dd}
@media(max-width:900px){
  .klienci{scroll-padding-left:20px;padding-left:20px;padding-right:20px;margin:0 -20px}
  .klient{flex:0 0 72vw;width:72vw;max-width:290px}
  .klienci-pas::before{left:-20px}
  .klienci-pas::after{right:-20px}
}

/* ---------- Poprawka ukladu krokow na telefonie, 05.09.2026 ----------
   style.css (wspolny ze strona kursu) przerabia .krok ponizej 640 px na siatke
   dwukolumnowa pod tamtejszy uklad: .krok-n plus h3, z pionowa linia za numerami.
   Strony ofertowe maja inny srodek karty (.nr plus h4), wiec ta siatka je rozbijala:
   numer siedzial w pierwszej kolumnie, naglowek obok niego, a akapit spadal pod
   naglowek zostawiajac pusta kolumne i duza dziure w karcie. Do tego przez karty
   przebiegala pionowa kreska, ktora nalezy do tamtego ukladu.
   Tutaj wracamy do zwyklego kafelka jeden pod drugim. */
@media(max-width:640px){
  .kroki{gap:14px}
  .kroki::before{display:none}
  .krok{display:block;text-align:left;padding:22px}
  .krok h4{align-self:auto;margin-bottom:6px}
  .krok p{grid-column:auto;max-width:none;margin:0}
}