/* Raport dostepnosci w AI. Tokeny z brandbooka: granat dominanta, mieta akcent,
   niebieski drugi akcent, Montserrat. Rytm sekcji 84/84 jak reszta podstron. */
.ra{--gr:#050a30;--nb:#1e5e9f;--mt:#80dfa0;--mtd:#277846;--tx:#5b6385;
  --ln:rgba(216,222,250,.7);--zle:#c2410c;
  --ez:cubic-bezier(.23,1,.32,1);
  --cien:0 1px 0 rgba(5,10,48,.04),0 34px 74px -40px rgba(5,10,48,.42);
  font-family:'Montserrat',sans-serif;color:var(--gr)}
.ra *,.ra *::before,.ra *::after{box-sizing:border-box}

/* ---------- HERO ---------- */
.ra-hero{position:relative;padding:96px 0 84px;
  background:linear-gradient(180deg,#050a30 0%,#0a1342 62%,#0c1a4e 100%);color:#fff}
.ra-hero .shell{position:relative;z-index:2}
.ra-syg{position:absolute;top:-40px;right:-160px;width:520px;height:auto;color:#fff;opacity:.07;pointer-events:none}
.ra-kick{display:inline-flex;align-items:center;gap:9px;font:700 11.5px/1 'Montserrat';
  letter-spacing:.13em;text-transform:uppercase;color:var(--mt)}
.ra-kick .d{width:7px;height:7px;border-radius:50%;background:var(--mt)}
.ra-hero h1{margin:16px 0 14px;max-width:17ch;font:800 clamp(34px,4.4vw,52px)/1.06 'Montserrat';letter-spacing:-.025em;color:#fff}
.ra-hero .ra-lead{margin:0;max-width:56ch;font:500 17px/1.6 'Montserrat';color:rgba(255,255,255,.78)}

/* ---------- FORMULARZ ---------- */
.ra-form{margin-top:34px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto;
  gap:12px;align-items:end;max-width:900px}
.ra-pole{display:flex;flex-direction:column;gap:7px;min-width:0}
.ra-pole label{font:700 12px/1 'Montserrat';letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.ra-pole input,.ra-pole select{width:100%;min-height:54px;padding:0 18px;border-radius:14px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;
  font:600 16px/1 'Montserrat';transition:border-color .18s ease,background .18s ease}
.ra-pole input::placeholder{color:rgba(255,255,255,.42);font-weight:500}
.ra-pole input:focus,.ra-pole select:focus{outline:none;border-color:var(--mt);background:rgba(255,255,255,.1)}
.ra-pole select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.6) 50%),linear-gradient(135deg,rgba(255,255,255,.6) 50%,transparent 50%);
  background-position:calc(100% - 21px) 24px,calc(100% - 15px) 24px;background-size:6px 6px;background-repeat:no-repeat}
.ra-pole select option{color:#050a30}
.ra-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;
  padding:0 30px;border:0;border-radius:999px;background:var(--mt);color:var(--gr);
  font:700 15px/1 'Montserrat';cursor:pointer;white-space:nowrap;
  transition:transform .2s var(--ez),background .2s var(--ez)}
.ra-btn:disabled{cursor:progress;opacity:.75}
.ra-btn:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){ .ra-btn:not(:disabled):hover{transform:translateY(-2px);background:#93e6ae} }
.ra-btn.laduje::after{content:'';width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(5,10,48,.25);border-top-color:var(--gr);animation:ra-obrot .7s linear infinite}
@keyframes ra-obrot{to{transform:rotate(360deg)}}
.ra-pod{margin:14px 0 0;font:500 13.5px/1.5 'Montserrat';color:rgba(255,255,255,.6)}
.ra-blad{margin:16px 0 0;padding:13px 17px;border-radius:12px;background:rgba(194,65,12,.16);
  border:1px solid rgba(255,180,140,.4);color:#ffd9c7;font:600 14px/1.45 'Montserrat';max-width:640px}

/* ---------- POSTEP ----------
   Plakietki krokow zostaly zastapione panelem analizy z dziennikiem (nizej w tym
   pliku). Zostala tylko zasada dla przycisku, reszta poszla, bo stary
   `.ra-postep{display:flex}` zwijal pasek postepu do zera szerokosci: pusty
   element w kontenerze elastycznym nie ma z czego wziac szerokosci. */
@keyframes ra-puls{70%{box-shadow:0 0 0 9px rgba(128,223,160,0)}100%{box-shadow:0 0 0 0 rgba(128,223,160,0)}}
@media (prefers-reduced-motion:reduce){ .ra-btn.laduje::after{animation:none} }

/* ---------- WYNIK ---------- */
.ra-wynik{padding:84px 0}
.ra-glowa-wynik{display:flex;align-items:center;gap:28px;flex-wrap:wrap;
  padding:28px 32px;border-radius:22px;background:#fff;box-shadow:var(--cien);border:1px solid var(--ln)}
.ra-licznik{display:flex;align-items:baseline;gap:8px;padding-right:28px;border-right:1px solid var(--ln)}
.ra-licznik b{font:800 56px/1 'Montserrat';letter-spacing:-.03em}
.ra-licznik span{font:600 14px/1 'Montserrat';color:var(--tx)}
.ra--dobrze .ra-licznik b{color:var(--mtd)}
.ra--srednio .ra-licznik b{color:var(--nb)}
.ra--slabo .ra-licznik b{color:var(--zle)}
.ra-glowa-tx h2{margin:0 0 4px;font:800 26px/1.2 'Montserrat';letter-spacing:-.02em}
.ra-meta{margin:0;font:500 13.5px/1.4 'Montserrat';color:var(--tx)}

/* Karty maja rosnac do wlasnej tresci, inaczej krotsza ciagnie sie pusta do wysokosci sasiadki. */
.ra-sekcje{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px;align-items:start}
.ra-sek{padding:26px 28px;border-radius:20px;background:#fff;border:1px solid var(--ln);box-shadow:var(--cien)}
.ra-sek header{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:baseline;margin-bottom:18px}
.ra-sek h3{margin:0;font:800 17px/1.25 'Montserrat';letter-spacing:-.015em}
.ra-pkt{font:700 13px/1 'Montserrat';color:var(--tx)}
.ra-pasek{grid-column:1 / -1;display:block;height:5px;border-radius:999px;background:#eef1fa;overflow:hidden}
.ra-pasek i{display:block;height:100%;border-radius:999px;background:var(--nb);
  transition:width .8s var(--ez)}
.ra-sek ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:15px}
.ra-sek li{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start}
.ra-ikona{width:19px;height:19px;border-radius:50%;margin-top:1px;position:relative;flex:none}
.ok .ra-ikona{background:rgba(39,120,70,.13)}
.nie .ra-ikona{background:rgba(194,65,12,.13)}
.ra-ikona::before{content:'';position:absolute;inset:0;margin:auto;display:block}
.ok .ra-ikona::before{width:5px;height:9px;border:solid var(--mtd);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.nie .ra-ikona::before{width:9px;height:2px;background:var(--zle)}
.ra-sek li b{display:block;font:700 14.5px/1.35 'Montserrat'}
.ra-det{display:block;margin-top:2px;font:500 13.5px/1.45 'Montserrat';color:var(--tx)}
.ra-czemu{display:block;margin-top:6px;padding-left:11px;border-left:2px solid rgba(194,65,12,.3);
  font:500 13px/1.5 'Montserrat';color:#6b5340}

.ra-prompty{margin-top:20px;padding:30px 32px;border-radius:20px;background:var(--gr);color:#fff;position:relative;overflow:hidden}
.ra-prompty h3{margin:0 0 8px;font:800 20px/1.2 'Montserrat';letter-spacing:-.02em;color:#fff}
.ra-prompty p{margin:0 0 18px;max-width:62ch;font:500 14.5px/1.6 'Montserrat';color:rgba(255,255,255,.72)}
.ra-prompty ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px;
  font:600 15px/1.45 'Montserrat';color:#fff}
.ra-prompty li::marker{color:var(--mt);font-weight:800}

/* ---------- LEAD ---------- */
.ra-lead-box{margin-top:20px;padding:28px 32px;border-radius:20px;border:1px solid var(--ln);background:#fafbff}
.ra-lead-box h3{margin:0 0 6px;font:800 19px/1.25 'Montserrat';letter-spacing:-.02em}
.ra-lead-box p{margin:0 0 16px;max-width:60ch;font:500 14.5px/1.6 'Montserrat';color:var(--tx)}
.ra-lead-form{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.ra-lead-form input[type=email]{flex:1 1 280px;min-height:50px;padding:0 17px;border-radius:13px;
  border:1px solid var(--ln);background:#fff;font:600 15px/1 'Montserrat';color:var(--gr)}
.ra-lead-form input[type=email]:focus{outline:none;border-color:var(--nb)}
.ra-lead-form .ra-btn{min-height:50px}

.ra-lead-ok{margin:0;font:700 15px/1.5 'Montserrat';color:var(--mtd)}

/* ---------- SEKCJE TRESCI ---------- */
.ra-tresc{padding:84px 0;background:#fafbff}
.ra-tresc:nth-of-type(even){background:#f1f4fb}
.ra-tresc h2{margin:0 0 14px;font:800 clamp(28px,3.6vw,46px)/1.05 'Montserrat';letter-spacing:-.02em;max-width:20ch}
.ra-tresc .ra-wstep{margin:0 0 34px;max-width:62ch;font:500 16.5px/1.65 'Montserrat';color:var(--tx)}
.ra-kroki3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ra-krok3{padding:28px;border-radius:20px;background:#fff;border:1px solid var(--ln);box-shadow:var(--cien)}
.ra-krok3 span{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:11px;background:var(--gr);color:var(--mt);font:800 15px/1 'Montserrat';margin-bottom:15px}
.ra-krok3 h3{margin:0 0 7px;font:800 17px/1.25 'Montserrat';letter-spacing:-.015em}
.ra-krok3 p{margin:0;font:500 14.5px/1.6 'Montserrat';color:var(--tx)}
.ra-uczciwie{max-width:70ch;font:500 16px/1.7 'Montserrat';color:var(--tx)}
.ra-uczciwie strong{color:var(--gr)}

/* ---------- RESPONSYWNOSC ---------- */
@media (max-width:1000px){
  .ra-sekcje{grid-template-columns:1fr}
  .ra-kroki3{grid-template-columns:1fr}
}
@media (max-width:760px){
  .ra-hero{padding:70px 0 62px}
  .ra-form{grid-template-columns:1fr;gap:14px}
  .ra-btn{width:100%}
  .ra-wynik,.ra-tresc{padding:62px 0}
  .ra-glowa-wynik{padding:22px}
  .ra-licznik{padding-right:0;border-right:0}
  .ra-sek,.ra-prompty,.ra-lead-box{padding:22px}
}

/* ---------- POLE WYBORU ----------
   Motyw podmienia natywny select na widget nice-select i chowa oryginal.
   Ubieramy widget w ten sam styl co pole tekstowe, zeby formularz byl spojny.
   Wartosc dalej siedzi w ukrytym select, wiec skrypt czyta ja bez zmian. */
.ra-form .nice-select{width:100%;min-height:54px;height:54px;line-height:52px;padding:0 44px 0 18px;
  border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  color:#fff;font:600 16px/52px 'Montserrat';float:none;display:block;
  transition:border-color .18s ease,background .18s ease}
.ra-form .nice-select:hover,.ra-form .nice-select.open,.ra-form .nice-select:focus{
  border-color:var(--mt);background:rgba(255,255,255,.1)}
.ra-form .nice-select::after{border-color:rgba(255,255,255,.65);right:19px;width:7px;height:7px}
.ra-form .nice-select .list{width:100%;margin-top:8px;border-radius:14px;background:#fff;
  box-shadow:0 24px 54px -22px rgba(5,10,48,.5);color:var(--gr);max-height:320px;overflow:auto}
.ra-form .nice-select .option{font:600 15px/1.4 'Montserrat';padding:11px 18px;min-height:0;
  color:var(--gr);list-style:none}
.ra-form .nice-select .option::before{display:none}
.ra-form .nice-select .option.selected{font-weight:800}
.ra-form .nice-select .option:hover,.ra-form .nice-select .option.focus{background:#eef3fd}

/* ---------- HERO: DWIE KOLUMNY ----------
   Prawa polowa hero swiecila pustka. Wchodzi tam panel z lista botow, ktore realnie
   odpytujemy. Mowi, czym rozni sie ten test od czytania samego robots.txt. */
.ra-hero-grid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(300px,.68fr);
  gap:clamp(30px,4vw,64px);align-items:start}
.ra-hero .ra-form{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);max-width:none}
.ra-hero .ra-form .ra-btn{grid-column:1 / -1;justify-self:start}
.ra-hero h1{max-width:19ch;font-size:clamp(32px,3.6vw,46px)}

.ra-hero-p{padding:26px 28px;border-radius:20px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.045)}
.ra-hp-nag{display:block;font:700 11.5px/1 'Montserrat';letter-spacing:.13em;
  text-transform:uppercase;color:var(--mt);margin-bottom:16px}
.ra-hp-boty{margin:0 0 18px;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.ra-hp-boty li{display:flex;align-items:center;gap:11px;font:600 15px/1.3 'Montserrat';color:#fff}
.ra-hp-boty li::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--mt);flex:none}
.ra-hp-stopka{margin:0;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);
  font:500 13.5px/1.6 'Montserrat';color:rgba(255,255,255,.65)}

/* Widget wyboru dziedziczyl kolor tekstu z motywu i na granacie byl nieczytelny. */
/* nice-select.css ustawia .nice-select span.current na #222, co na granacie daje
   kontrast ponizej progu. Wymuszamy, bo to arkusz motywu rodzica. */
.ra-form .nice-select,
.ra-form .nice-select span.current{color:#fff !important}
.ra-form .nice-select .list .option{color:var(--gr)}

@media (max-width:1000px){
  .ra-hero-grid{grid-template-columns:1fr}
  .ra-hero-p{order:2}
}
@media (max-width:760px){
  .ra-hero .ra-form{grid-template-columns:1fr}
  .ra-hero .ra-form .ra-btn{justify-self:stretch}
}

/* ---------- WEJSCIA PRZY PRZEWIJANIU ----------
   Ten sam wzorzec co na podstronach uslugowych i w case study: klasa rv-el,
   przesuniecie w gore o 16 px i lekki blur, ktory maskuje moment podmiany. */
.ra .rv-el{opacity:0;transform:translateY(16px);filter:blur(4px);
  transition:opacity .55s var(--ez),transform .55s var(--ez),filter .55s var(--ez)}
.ra .rv-el.in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){
  .ra .rv-el{opacity:1;transform:none;filter:none;transition:none}
  .ra-licznik b{transition:none}
}
/* Pasek punktow startuje od zera i dojezdza do wartosci, wiec widac proporcje. */
.ra-pasek i{width:0}

/* ---------- OD CZEGO ZACZAC ----------
   Trzy najciezsze braki, posortowane po realnie traconych punktach. Bez tego user
   dostaje sciane uwag i nie wie, ktora rusza pierwsza. */
.ra-naprawy{margin-top:20px;padding:28px 32px;border-radius:20px;background:#fff;
  border:1px solid var(--ln);box-shadow:var(--cien);position:relative;overflow:hidden}
.ra-naprawy h3{margin:0 0 16px;font:800 19px/1.25 'Montserrat';letter-spacing:-.02em}
.ra-naprawy ol{margin:0;padding:0;list-style:none;counter-reset:n;display:flex;flex-direction:column;gap:16px}
.ra-naprawy li{counter-increment:n;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.ra-naprawy li > div{min-width:0}
.ra-naprawy li::before{content:counter(n);display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:9px;background:var(--gr);color:var(--mt);font:800 13px/1 'Montserrat'}
.ra-naprawy li b{display:block;font:700 15.5px/1.35 'Montserrat'}
.ra-naprawy li span{display:block;margin-top:2px;font:500 14px/1.5 'Montserrat';color:var(--tx)}
.ra-naprawy li em{display:block;margin-top:6px;font:500 13.5px/1.55 'Montserrat';color:#6b5340;font-style:normal}
.ra-brak-uwag{margin:20px 0 0;padding:24px 28px;border-radius:20px;background:rgba(39,120,70,.08);
  border:1px solid rgba(39,120,70,.24);font:700 16px/1.5 'Montserrat';color:var(--mtd)}

.ra-kopiuj{margin-top:20px;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 22px;
  border:1px solid rgba(255,255,255,.24);border-radius:999px;background:transparent;color:#fff;
  font:700 14px/1 'Montserrat';cursor:pointer;transition:transform .2s var(--ez),background .2s var(--ez),border-color .2s var(--ez)}
.ra-kopiuj:active{transform:scale(.98)}
.ra-kopiuj.zrobione{background:var(--mt);color:var(--gr);border-color:var(--mt)}
@media (hover:hover) and (pointer:fine){ .ra-kopiuj:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45)} }

/* ---------- CZYM ROZNI SIE TEN TEST ----------
   Granatowa plaszczyzna zamiast kolejnego rzedu bialych kart, zeby strona nie byla
   ciagiem tych samych trojek. Sygnet wypelnia prawy gorny rog (brandbook s.25). */
.ra-roznica{position:relative;overflow:hidden;padding:84px 0;
  background:linear-gradient(180deg,#050a30 0%,#0a1342 100%);color:#fff}
.ra-roznica h2{margin:0 0 34px;max-width:20ch;color:#fff;
  font:800 clamp(28px,3.6vw,46px)/1.05 'Montserrat';letter-spacing:-.02em}
.ra-rl{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 30px}
.ra-rl li{padding-top:20px;border-top:2px solid rgba(128,223,160,.55)}
.ra-rl li b{display:block;margin-bottom:8px;font:800 18px/1.25 'Montserrat';letter-spacing:-.015em;color:#fff}
.ra-rl li span{display:block;font:500 15px/1.65 'Montserrat';color:rgba(255,255,255,.72)}


@media (max-width:1000px){
  .ra-rl,.ra-skala{grid-template-columns:1fr}
}
@media (max-width:760px){
  .ra-roznica{padding:62px 0}
}
.ra-syg--r{top:auto;bottom:-120px;right:-130px;width:400px;opacity:.06}

/* ---------- OBSZARY W WERSJI BEZPLATNEJ ----------
   Cztery kafle z punktacja i liczba uwag. Szczegoly kazdego sprawdzenia zostaja
   po stronie rozmowy, wiec kafel niesie wynik, a nie instrukcje. */
.ra-obszary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:20px}
.ra-obszar{padding:24px 26px;border-radius:20px;background:#fff;border:1px solid var(--ln);box-shadow:var(--cien)}
.ra-obszar h3{margin:0 0 14px;min-height:2.5em;font:800 16px/1.25 'Montserrat';letter-spacing:-.015em}
.ra-obszar .ra-pkt{display:block;margin-bottom:9px;font:800 22px/1 'Montserrat';color:var(--gr);letter-spacing:-.02em}
.ra-obszar .ra-pasek{margin-bottom:11px}
.ra-obszar p{margin:0;font:600 13.5px/1.4 'Montserrat';color:var(--zle)}
.ra-obszar.czysto p{color:var(--mtd)}
.ra-obszar.czysto .ra-pasek i{background:var(--mtd)}



@media (max-width:1000px){ .ra-obszary{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .ra-obszary{grid-template-columns:1fr} .ra-obszar h3{min-height:0} }

/* Pobranie raportu: otwiera widok do druku, z ktorego przegladarka zapisuje PDF. */
.ra-pdf{margin-left:auto;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 22px;
  border:1px solid var(--ln);border-radius:999px;background:#fff;color:var(--gr);text-decoration:none;
  font:700 14px/1 'Montserrat';transition:transform .2s var(--ez),border-color .2s var(--ez),background .2s var(--ez)}
.ra-pdf::before{content:'';width:15px;height:15px;flex:none;
  background:currentColor;-webkit-mask:no-repeat center/contain;mask:no-repeat center/contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v12m0 0l-4-4m4 4l4-4M4 19h16'  stroke='black' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v12m0 0l-4-4m4 4l4-4M4 19h16' stroke='black' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ra-pdf:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){ .ra-pdf:hover{border-color:var(--nb);background:#f5f8ff} }
@media (max-width:760px){ .ra-pdf{margin:14px 0 0} }

/* ---------- GWIAZDKI ----------
   Piec gwiazdek jako dwie warstwy: szara podkladka i przycieta warstwa mietowa.
   Dzieki temu wypelnienie jest ciagle, wiec 73 na 100 daje realne 3,65 gwiazdki,
   a nie zaokraglenie w gore. */
.ra-ocena{display:flex;flex-direction:column;gap:6px;padding-left:26px;border-left:1px solid var(--ln)}
.ra-gw{position:relative;display:block;width:118px;height:20px}
.ra-gw i{position:absolute;inset:0;display:block;background-repeat:repeat-x;background-size:23.6px 20px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='20' viewBox='0 0 24 20'%3E%3Cpath d='M12 2.2l2.7 5.6 6.1.9-4.4 4.3 1 6-5.4-2.8-5.4 2.8 1-6L3.2 8.7l6.1-.9z' fill='black'/%3E%3C/svg%3E") repeat-x left center/23.6px 20px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='20' viewBox='0 0 24 20'%3E%3Cpath d='M12 2.2l2.7 5.6 6.1.9-4.4 4.3 1 6-5.4-2.8-5.4 2.8 1-6L3.2 8.7l6.1-.9z' fill='black'/%3E%3C/svg%3E") repeat-x left center/23.6px 20px}
.ra-gw-tlo{background-color:#dfe5f5}
.ra-gw-pelne{background-color:var(--mt);width:0;transition:width .9s var(--ez)}
.ra--dobrze .ra-gw-pelne{background-color:var(--mtd)}
.ra--srednio .ra-gw-pelne{background-color:var(--nb)}
.ra--slabo .ra-gw-pelne{background-color:var(--zle)}
.ra-ocena-t{font:700 13.5px/1.3 'Montserrat';color:var(--tx)}
@media (prefers-reduced-motion:reduce){ .ra-gw-pelne{transition:none} }
@media (max-width:760px){ .ra-ocena{padding-left:0;border-left:0;border-top:1px solid var(--ln);padding-top:14px;width:100%} }

/* ---------- FAQ ----------
   Natywny details, wiec dziala bez JavaScriptu i jest dostepny z klawiatury.
   Sami zalecamy klientom schemat FAQPage, wiec strona musi go miec. */
/* Przy szerokim ekranie jedna kolumna zostawiala pusta prawa polowe sekcji. */
.ra-faq-lista{display:grid;gap:12px;align-items:start}
@media (min-width:1100px){ .ra-faq-lista{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px} }
.ra-faq-p{border:1px solid var(--ln);border-radius:16px;background:#fff;overflow:hidden}
.ra-faq-p summary{display:flex;align-items:center;gap:14px;cursor:pointer;list-style:none;
  padding:19px 24px;font:700 16px/1.4 'Montserrat';color:var(--gr);min-height:56px}
.ra-faq-p summary::-webkit-details-marker{display:none}
.ra-faq-p summary span{flex:1;min-width:0}
.ra-faq-p summary::after{content:none;flex:none;width:11px;height:11px;border:solid var(--nb);
  border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);transition:transform .22s var(--ez)}
.ra-faq-p[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.ra-faq-p summary:focus-visible{outline:3px solid var(--nb);outline-offset:-3px}
.ra-faq-p p{margin:0;padding:0 24px 21px;font:500 15px/1.65 'Montserrat';color:var(--tx);max-width:70ch}
@media (hover:hover) and (pointer:fine){ .ra-faq-p summary:hover{background:#f5f8ff} }

/* ---------- CO KONKRETNIE OBLALO ----------
   Liczba uwag byla martwa informacja. Pod nia chowa sie lista nazw sprawdzen
   i stan faktyczny. Natywny details, wiec dziala bez skryptu i z klawiatury. */
.ra-co{margin-top:2px}
.ra-co summary{display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
  min-height:44px;font:700 13.5px/1.4 'Montserrat';color:var(--zle)}
.ra-co summary::-webkit-details-marker{display:none}
.ra-co summary span{flex:1;min-width:0;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(194,65,12,.35)}
.ra-co summary::after{content:'';flex:none;width:8px;height:8px;border:solid currentColor;
  border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ez)}
.ra-co[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.ra-co summary:focus-visible{outline:3px solid var(--nb);outline-offset:3px;border-radius:6px}
.ra-co ul{margin:10px 0 2px;padding:12px 0 0;list-style:none;border-top:1px solid var(--ln);
  display:flex;flex-direction:column;gap:11px}
.ra-co li b{display:block;font:700 13.5px/1.35 'Montserrat';color:var(--gr)}
.ra-co li span{display:block;margin-top:2px;font:500 13px/1.45 'Montserrat';color:var(--tx)}

/* ---------- SKALA WYNIKU ----------
   Sekcja tlumaczyla progi samym tekstem, wiec nie bylo widac, jak ocena wyglada.
   Teraz kazdy kafel jest podgladem realnego wyniku: liczba, gwiazdki i etykieta
   w kolorze progu, dokladnie w tej formie, w jakiej pojawia sie w raporcie. */
.ra-skala{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ra-prog{position:relative;overflow:hidden;padding:28px 30px 30px;border-radius:20px;
  background:#fff;border:1px solid var(--ln);box-shadow:var(--cien)}
.ra-prog::before{content:'';position:absolute;inset:0 0 auto 0;height:4px}
.ra-prog--n::before{background:var(--zle)}
.ra-prog--s::before{background:var(--nb)}
.ra-prog--w::before{background:var(--mtd)}
.ra-prog-top{display:flex;align-items:center;gap:18px;padding-bottom:16px;margin-bottom:16px;
  border-bottom:1px solid var(--ln)}
.ra-prog-pkt{display:flex;align-items:baseline;gap:6px}
.ra-prog-pkt b{font:800 42px/1 'Montserrat';letter-spacing:-.03em}
.ra-prog-pkt i{font:600 12px/1 'Montserrat';color:var(--tx);font-style:normal}
.ra-prog--n .ra-prog-pkt b{color:var(--zle)}
.ra-prog--s .ra-prog-pkt b{color:var(--nb)}
.ra-prog--w .ra-prog-pkt b{color:var(--mtd)}
.ra-prog--n .ra-gw-pelne{background-color:var(--zle);width:38%}
.ra-prog--s .ra-gw-pelne{background-color:var(--nb);width:67%}
.ra-prog--w .ra-gw-pelne{background-color:var(--mtd);width:92%}
.ra-prog .ra-gw{width:106px;height:18px}
.ra-prog .ra-gw i{-webkit-mask-size:21.2px 18px;mask-size:21.2px 18px}
.ra-prog-zakres{display:block;margin-bottom:8px;font:800 11.5px/1 'Montserrat';
  letter-spacing:.1em;text-transform:uppercase}
.ra-prog--n .ra-prog-zakres{color:var(--zle)}
.ra-prog--s .ra-prog-zakres{color:var(--nb)}
.ra-prog--w .ra-prog-zakres{color:var(--mtd)}
.ra-prog-tyt{display:block;margin-bottom:8px;font:800 19px/1.25 'Montserrat';letter-spacing:-.02em}
.ra-prog p{margin:0;font:500 14.5px/1.6 'Montserrat';color:var(--tx)}
@media (max-width:1000px){ .ra-skala{grid-template-columns:1fr} }

/* ---------- KROKI ANALIZY ----------
   Wskaznik pokazuje realny etap zwrocony przez serwer, a pod nim leci zdanie
   mowiace, co dokladnie jest w tej chwili sprawdzane. */
/* ---------- PANEL ANALIZY ----------
   Audyt trwa okolo pol minuty. Przy takiej dlugosci sam pasek postepu to za malo:
   panel pokazuje NA BIEZACO wyniki zakonczonych krokow, czyli realne kody
   odpowiedzi botow, znalezione pliki i schematy. Czekanie zamienia sie w
   ogladanie pracy zamiast w gapienie sie w kolko.
   Z brandbooka: granat jako plaszczyzna, mieta jako jedyny akcent, sygnet
   w narozniku jako motyw, italik Montserrat przy naglowku. */
.ra-postep{position:relative;overflow:hidden;margin-top:26px;max-width:640px;
  padding:22px 24px 20px;border:1px solid rgba(128,223,160,.22);border-radius:18px;
  background:linear-gradient(180deg,rgba(128,223,160,.07),rgba(255,255,255,.02))}
.ra-postep-syg{position:absolute;top:-58px;right:-46px;width:180px;height:auto;
  color:#fff;opacity:.07;pointer-events:none}
.ra-postep-gora{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.ra-postep-nag{display:block;font:800 12px/1 'Montserrat';letter-spacing:.16em;
  text-transform:uppercase;color:var(--mt)}
.ra-postep-nag em{font-style:italic}
.ra-etap-opis{margin:9px 0 0;min-height:1.4em;font:600 15px/1.45 'Montserrat';color:#fff}
.ra-krok-nr{margin-right:8px;font-weight:800;color:rgba(255,255,255,.45)}
.ra-postep-proc{flex:none;display:flex;align-items:baseline;gap:2px;
  font-variant-numeric:tabular-nums}
.ra-postep-proc b{font:800 40px/.9 'Montserrat';letter-spacing:-.04em;color:#fff}
.ra-postep-proc i{font:800 15px/1 'Montserrat';font-style:normal;color:rgba(255,255,255,.45)}

/* Dziennik: kazdy zakonczony krok wjezdza osobno, od dolu, z lekkim opoznieniem.
   Animujemy tylko transform i opacity. */
.ra-dziennik{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:0}
.ra-dziennik li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:baseline;
  padding:8px 0;border-top:1px solid rgba(255,255,255,.08);
  font:600 13px/1.4 'Montserrat';color:rgba(255,255,255,.9);
  opacity:0;transform:translateY(6px);
  animation:ra-dz-wejscie .42s cubic-bezier(.23,1,.32,1) forwards}
.ra-dziennik li:first-child{border-top:0}
.ra-dziennik .k{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3);
  transform:translateY(-1px)}
.ra-dziennik li.ok .k{background:var(--mt)}
.ra-dziennik li.zle .k{background:#f8926a}
.ra-dziennik .w{font:500 12.5px/1.4 'Montserrat';color:rgba(255,255,255,.55);text-align:right}
.ra-dziennik li.zle .w{color:#f8926a}
@keyframes ra-dz-wejscie{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .ra-dziennik li{animation:none;opacity:1;transform:none}
}
@media (max-width:640px){
  .ra-postep{padding:18px}
  .ra-dziennik li{grid-template-columns:auto 1fr;row-gap:2px}
  .ra-dziennik .w{grid-column:2;text-align:left}
  .ra-postep-proc b{font-size:32px}
}

/* Pusta sekcja wyniku zabierala 168 px miedzy hero a reszta strony. */
.ra-wynik--pusta{padding:0}

/* ---------- ZAKRES TESTU ----------
   Sekcja byla jednym akapitem na polowie szerokosci. Teraz zestawienie dwoch kolumn:
   co sprawdzamy i czego nie. Uczciwosc czyta sie lepiej jako lista niz jako proza. */
.ra-zakres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.ra-zakres-k{padding:28px 30px;border-radius:20px;background:#fff;border:1px solid var(--ln);box-shadow:var(--cien)}
.ra-zakres-nag{display:block;margin-bottom:16px;font:800 12px/1 'Montserrat';letter-spacing:.1em;text-transform:uppercase}
.ra-zakres--tak .ra-zakres-nag{color:var(--mtd)}
.ra-zakres--nie .ra-zakres-nag{color:var(--zle)}
.ra-zakres-k ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.ra-zakres-k li{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  font:500 15px/1.5 'Montserrat';color:var(--gr)}
.ra-zakres-k li::before{content:'';width:19px;height:19px;border-radius:50%;margin-top:1px;position:relative}
.ra-zakres--tak li::before{background:rgba(39,120,70,.13);
  box-shadow:inset 0 0 0 0 transparent}
.ra-zakres--nie li::before{background:rgba(194,65,12,.13)}
.ra-zakres-k li{position:relative}
.ra-zakres--tak li::after{content:'';position:absolute;left:6px;top:5px;width:5px;height:9px;
  border:solid var(--mtd);border-width:0 2px 2px 0;transform:rotate(45deg)}
.ra-zakres--nie li::after{content:'';position:absolute;left:5px;top:10px;width:9px;height:2px;background:var(--zle)}
.ra-zakres-nota{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--ln);
  font:500 14px/1.6 'Montserrat';color:var(--tx)}
@media (max-width:1000px){ .ra-zakres{grid-template-columns:1fr} }

/* ---------- PROBKA ZAPYTANIA ----------
   Naglowek sekcji zajmowal lewa polowe, prawa byla pusta. Wstawiamy tam realny
   ksztalt zapytania, ktore narzedzie wysyla. To jednoczesnie dowod i wypelnienie. */
.ra-roznica-gl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;margin-bottom:16px}
.ra-roznica-gl h2{margin:0}
.ra-probka{margin:0;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 60px -34px rgba(0,0,0,.65)}
.ra-probka-h{display:flex;align-items:center;gap:12px;padding:11px 16px;
  background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.1);
  font:700 11px/1 'Montserrat';letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.ra-probka-kropki{display:flex;gap:6px}
.ra-probka-kropki i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.ra-probka pre{margin:0;padding:20px 18px;overflow-x:auto}
.ra-probka code{font:500 13px/1.85 ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  color:rgba(255,255,255,.72);white-space:pre}
.ra-c-w{color:var(--mt);font-weight:700}
.ra-c-k{color:rgba(255,255,255,.42)}
.ra-c-b{color:#9ad7ff;font-weight:700}
.ra-c-x{color:#ff9a8a;font-weight:700}
@media (max-width:1000px){ .ra-roznica-gl{grid-template-columns:1fr;gap:28px} }
@media (max-width:520px){ .ra-probka code{font-size:11.5px!important} .ra-probka pre{padding:16px 14px!important} }

/* Motyw nadaje pre/code jasne tlo i ramke, wiec na granacie tekst znikal. */
.ra-probka pre,.ra-probka code{background:none!important;border:0!important;box-shadow:none!important;
  color:rgba(255,255,255,.74)!important;border-radius:0}
.ra-probka pre{padding:20px 18px!important}
.ra-probka code{padding:0!important;font-size:13px!important}

/* Musi byc na koncu: wczesniejsza reguła .ra-probka code ma !important. */
@media (max-width:520px){
  .ra-probka code{font-size:11.5px!important;line-height:1.75!important}
  .ra-probka pre{padding:16px 14px!important}
}

/* ---------- SUROWE DANE Z ANALIZY ----------
   Blok na koncu raportu. Trzy kolumny surowych faktow: kody odpowiedzi botow,
   pobrane adresy, znalezione pliki. Swiadomie bez ozdob, ma wygladac na log. */
.ra-zakres-pracy{margin-top:22px;padding:34px 36px;border-radius:22px;background:#fff;
  border:1px solid var(--ln);box-shadow:var(--cien)}
.ra-zakres-pracy h3{margin:0 0 8px;font:800 24px/1.2 'Montserrat';color:var(--gr)}
.ra-zp-wstep{margin:0 0 26px;font:500 15px/1.6 'Montserrat';color:var(--tx);max-width:62ch}
.ra-zp-siatka{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.ra-zp-k{min-width:0}
.ra-zp-nag{display:block;margin-bottom:13px;padding-bottom:9px;border-bottom:1px solid var(--ln);
  font:800 11px/1 'Montserrat';letter-spacing:.11em;text-transform:uppercase;color:var(--nb)}
.ra-zp-l{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.ra-zp-l li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font:600 13.5px/1.45 'Montserrat';color:var(--gr)}
.ra-zp-l li b{flex:none;font:700 12px/1 ui-monospace,'SF Mono',Menlo,monospace;
  padding:5px 9px;border-radius:7px}
.ra-zp-ok b{color:var(--mtd);background:rgba(39,120,70,.1)}
.ra-zp-nie b{color:var(--zle);background:rgba(194,65,12,.1)}
.ra-zp-l--url li span{font:500 12.5px/1.5 ui-monospace,'SF Mono',Menlo,monospace;color:var(--tx);
  overflow-wrap:anywhere}
.ra-zp-nota{margin:14px 0 0;font:500 13px/1.55 'Montserrat';color:var(--tx);overflow-wrap:anywhere}
.ra-zp-stopka{margin:26px 0 0;padding-top:18px;border-top:1px solid var(--ln);
  font:500 14px/1.6 'Montserrat';color:var(--tx)}
@media (max-width:900px){ .ra-zp-siatka{grid-template-columns:1fr;gap:24px} }
@media (max-width:560px){ .ra-zakres-pracy{padding:26px 22px} }

/* Hero mial overflow:hidden, zeby przyciac ozdobny sygnet wystajacy poza sekcje.
   Przy okazji przycinal rozwinieta liste branz, wiec polowa opcji byla niewidoczna.
   Sygnet dostaje wlasna maske, a sekcja zostaje otwarta. */
.ra-syg-maska{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}

/* Suchy stan faktyczny pod zdaniem wyjasniajacym. Ma byc czytelny, ale wyraznie
   drugorzedny wobec tego, co klient ma z tym zrobic. */
.ra-dowod{display:block;margin-top:5px;font:500 12.5px/1.5 ui-monospace,'SF Mono',Menlo,monospace;
  font-style:normal;color:#6b7280;overflow-wrap:anywhere}

/* ---------- POZOSTALE UWAGI ----------
   Moment, w ktorym klient dowiaduje sie, ze problemow jest wiecej niz trzy widoczne.
   Wczesniej byla to szara linijka pod lista i przechodzila bez echa. */
.ra-reszta{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center;
  margin:26px 0 0;padding:24px 26px;border-radius:18px;background:var(--gr);color:#fff;
  box-shadow:0 26px 52px -30px rgba(5,10,48,.7)}
.ra-reszta-l{font:800 46px/1 'Montserrat';letter-spacing:-.03em;color:var(--mt)}
.ra-reszta-t{display:flex;flex-direction:column;gap:5px;min-width:0}
.ra-reszta-t b{font:800 19px/1.25 'Montserrat'}
.ra-reszta-t span{font:500 14.5px/1.55 'Montserrat';color:rgba(255,255,255,.75)}
.ra-reszta-b{flex:none;min-height:44px;padding:14px 26px;border:0;border-radius:999px;cursor:pointer;
  background:var(--mt);color:var(--gr);font:700 15px/1 'Montserrat';
  box-shadow:0 16px 34px -12px rgba(128,223,160,.55);
  transition:transform .25s cubic-bezier(.23,1,.32,1),background .25s ease}
.ra-reszta-b:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .ra-reszta-b:hover,.ra-reszta-b:focus-visible{transform:translateY(-1px)}
}
@media (max-width:900px){
  /* Na tablecie 768 px przycisk zabieral pol szerokosci i tytul lamal sie w dwoch
     slowach obok liczby, wiec uklad trzykolumnowy konczy sie wczesniej.
     Liczba wysrodkowana pionowo obok wysokiego akapitu wygladala na zgubiona,
     wiec na waskim ekranie stoi rowno z tytulem. */
  .ra-reszta{grid-template-columns:auto minmax(0,1fr);gap:14px 16px;padding:22px;align-items:start}
  .ra-reszta-l{font-size:40px;line-height:.86;margin-top:2px}
  .ra-reszta-b{grid-column:1 / -1;width:100%;margin-top:4px}
}
@media (max-width:520px){
  /* Na telefonie opis w waskiej prawej kolumnie obok liczby lamal sie co trzy slowa.
     Liczba i tytul w jednym rzedzie, opis i przycisk na calej szerokosci. */
  .ra-reszta{align-items:center}
  .ra-reszta-t{display:contents}
  .ra-reszta-t span{grid-column:1 / -1;margin-top:-4px}
  .ra-reszta-l{margin-top:0}
}

/* Nazwa problemu w liscie napraw jest granatowa, a ten blok stoi na granacie,
   wiec tytul dziedziczyl kolor i gasl. */
.ra-naprawy .ra-reszta-t b,.ra-reszta-t b{color:#fff}
.ra-naprawy .ra-reszta-t span,.ra-reszta-t span{color:rgba(255,255,255,.78)}
.ra-naprawy .ra-reszta-l,.ra-reszta-l{color:var(--mt)}

/* ---------- PASEK POSTEPU ----------
   Same nazwy krokow nie mowily, ile jeszcze zostalo. */
.ra-pasek-post{position:relative;margin:16px 0 0;height:6px;border-radius:999px;
  background:rgba(255,255,255,.12);overflow:hidden}
.ra-pasek-post i{position:relative;display:block;height:100%;width:0;border-radius:999px;background:var(--mt);overflow:hidden;
  transition:width .45s cubic-bezier(.23,1,.32,1)}
/* Polysk przesuwajacy sie po wypelnionej czesci. Kroki potrafia trwac po kilka
   sekund i bez tego pasek wyglada, jakby sie zacial. Ruch idzie po transformacie,
   wiec nie kosztuje ukladu strony. */
.ra-pasek-post i::after{content:'';position:absolute;inset:0;border-radius:999px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));
  transform:translateX(-100%);animation:ra-polysk 1.9s linear infinite}

@keyframes ra-polysk{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){
  .ra-pasek-post i{transition:none}
  .ra-pasek-post i::after{animation:none;opacity:0}
}

/* ---------- UWAGI ZASLONIETE ----------
   Dwie pierwsze uwagi w obszarze sa czytelne, reszta rozmyta. Klient widzi, ile
   dokladnie zostalo, ale zeby je przeczytac musi sie odezwac. Rozmycie idzie na
   filtrze, wiec tekst NIE jest do wyciagniecia okiem, a select:none blokuje kopiowanie. */
.ra-co li.ra-kryte{filter:blur(4.5px);opacity:.55;user-select:none;pointer-events:none}
/* Kafel obszaru ma tylko okolo 290 px, wiec uklad dwukolumnowy lamal przycisk
   na dwie linie i sciskal tekst w waski pasek. Jedna kolumna, przycisk pelnej szerokosci. */
.ra-kryte-stopka{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  margin-top:14px;padding:16px 18px;border-radius:14px;background:var(--gr);color:#fff}
.ra-kryte-stopka b{font:800 15px/1.3 'Montserrat';color:#fff}
.ra-kryte-stopka span{font:500 13px/1.5 'Montserrat';color:rgba(255,255,255,.72)}
.ra-kryte-b{width:100%;margin-top:8px;padding:11px 18px;border:0;border-radius:999px;cursor:pointer;
  background:var(--mt);color:var(--gr);font:700 13.5px/1 'Montserrat';
  transition:transform .25s cubic-bezier(.23,1,.32,1)}
.ra-kryte-b:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .ra-kryte-b:hover,.ra-kryte-b:focus-visible{transform:translateY(-1px)} }


/* Zgoda: realne pole do zaznaczenia, wymagane. Cel dotykowy min. 24 px. */
.ra-zgoda{grid-column:1 / -1;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  margin:12px 0 0;cursor:pointer}
.ra-zgoda input[type=checkbox]{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--mtd);cursor:pointer}
.ra-zgoda span{font:500 13px/1.55 'Montserrat';color:var(--tx)}
.ra-zgoda input[type=checkbox]:focus-visible{outline:2px solid var(--nb);outline-offset:2px}

/* ---------- POLA FORMULARZA W HERO ----------
   Wojtek 8.09: pole na adres strony zlewalo sie z tlem sekcji. Przezroczyste pola
   na granacie czytaly sie jak ozdoba, a to jest jedyna rzecz, ktora klient ma tu
   zrobic. Pola dostaja biale tlo i ciemny tekst, czyli maksymalny kontrast wobec
   sekcji. Reguly na koncu pliku, bo wczesniejsze maja te sama specyficznosc. */
.ra-hero .ra-pole input,
.ra-hero .ra-pole select,
.ra-hero .ra-form .nice-select{
  background:#fff;color:#0f1836;border-color:transparent;
  box-shadow:0 18px 38px -20px rgba(0,0,0,.55)}
.ra-hero .ra-pole input::placeholder{color:#8b93a8;font-weight:500}
.ra-hero .ra-form .nice-select::after{border-color:#5a6480}
.ra-hero .ra-pole input:focus,
.ra-hero .ra-pole select:focus,
.ra-hero .ra-form .nice-select:hover,
.ra-hero .ra-form .nice-select.open,
.ra-hero .ra-form .nice-select:focus{
  background:#fff;border-color:var(--mt);box-shadow:0 0 0 3px rgba(128,223,160,.35),0 18px 38px -20px rgba(0,0,0,.55)}
/* Etykieta nad polem: jasniejsza, zeby para etykieta i pole czytala sie jako calosc. */
.ra-hero .ra-pole label{color:rgba(255,255,255,.8)}
/* Adres strony jest wazniejszy niz branza, wiec jest wyzszy i ma wieksza czcionke. */
.ra-hero .ra-pole input#ra-domena{min-height:60px;font-size:17px;font-weight:600}
@media (min-width:900px){ .ra-hero .ra-form .nice-select{min-height:60px;height:60px;line-height:58px} }
/* Wybrana branza byla wymuszona na bialo (bo tlo bylo granatowe). Teraz tlo jest
   biale, wiec tekst musi byc ciemny, inaczej pole wyglada na puste. */
.ra-hero .ra-form .nice-select span.current{color:#0f1836!important;font-weight:600}

/* Informacja, ze wynik policzyl silnik zapasowy. Ma byc widoczna, ale nie ma
   wygladac na blad, bo raport jest prawdziwy. */
.ra-uwaga-silnik{margin:0 0 18px;padding:14px 18px;border-radius:14px;
  background:rgba(30,94,159,.08);border:1px solid rgba(30,94,159,.22);
  font:600 13.5px/1.6 'Montserrat';color:var(--nb)}

/* ================= FAQ: PRZEBUDOWA =================
   Bylo: szesc jednakowych bialych pigulek i pusta prawa polowa przy naglowku.
   Jest: naglowek w lewej kolumnie razem z zachęta do kontaktu, pytania po prawej,
   plynne rozwijanie i kaskadowe wejscie. */
.ra-faq .shell{display:grid;gap:32px}
@media (min-width:1080px){
  .ra-faq .shell{grid-template-columns:minmax(0,.82fr) minmax(0,1.35fr);gap:56px;align-items:start}
  /* Naglowek zostaje w polu widzenia, gdy przewijasz dluga liste pytan. */
  .ra-faq-glowa{position:sticky;top:104px}
}
.ra-faq-glowa h2{margin:0 0 14px}
.ra-faq-lede{margin:0 0 22px;font:500 15.5px/1.7 'Montserrat';color:var(--tx);max-width:44ch}
.ra-faq-kontakt{display:inline-flex;align-items:center;gap:11px;padding:11px 20px 11px 12px;
  border-radius:999px;background:#fff;border:1px solid var(--ln);box-shadow:var(--cien);
  font:800 16px/1 'Montserrat';color:var(--gr);text-decoration:none;
  transition:transform .25s cubic-bezier(.23,1,.32,1),box-shadow .25s ease}
.ra-faq-ikona{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--mt);color:var(--gr)}
.ra-faq-ikona svg{width:17px;height:17px}
.ra-faq-kontakt:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){
  .ra-faq-kontakt:hover,.ra-faq-kontakt:focus-visible{transform:translateY(-2px);
    box-shadow:0 18px 34px -18px rgba(5,10,48,.42)}
}

/* Lista: jedna kolumna, bo naglowek stoi obok. */
@media (min-width:1080px){ .ra-faq-lista{grid-template-columns:1fr;gap:12px} }

.ra-faq-p{transition:border-color .25s ease,box-shadow .25s ease,transform .25s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){
  .ra-faq-p:hover{border-color:rgba(30,94,159,.35);box-shadow:0 14px 30px -20px rgba(5,10,48,.4)}
}
.ra-faq-p[open]{border-color:rgba(30,94,159,.4);box-shadow:0 16px 34px -22px rgba(5,10,48,.45)}
.ra-faq-q{font-weight:700}

/* Znak plus, ktory obraca sie w minus. Czytelniejszy niz sama strzalka. */
.ra-faq-plus{position:relative;flex:none;width:22px;height:22px;border-radius:50%;
  background:rgba(30,94,159,.1);transition:background .25s ease,transform .35s cubic-bezier(.23,1,.32,1)}
.ra-faq-plus::before,.ra-faq-plus::after{content:'';position:absolute;left:50%;top:50%;
  width:10px;height:2px;border-radius:2px;background:var(--nb);transform:translate(-50%,-50%);
  transition:transform .35s cubic-bezier(.23,1,.32,1),opacity .25s ease}
.ra-faq-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.ra-faq-p[open] .ra-faq-plus{background:var(--mt);transform:rotate(180deg)}
.ra-faq-p[open] .ra-faq-plus::before{background:var(--gr)}
.ra-faq-p[open] .ra-faq-plus::after{opacity:0;transform:translate(-50%,-50%) rotate(0)}

/* Plynne rozwijanie bez ani jednej linii JS. Element <details> sam chowa tresc,
   wiec zwykle przejscie na wysokosci nic nie da. Robi to dopiero ::details-content
   razem z interpolate-size (wysokosc auto da sie animowac) i allow-discrete
   (content-visibility przelacza sie skokowo, ale dopiero na koncu animacji).
   Tam, gdzie przegladarka tego nie zna, tresc po prostu pojawia sie od razu. */
.ra-faq-p{interpolate-size:allow-keywords}
.ra-faq-p::details-content{
  block-size:0;overflow:hidden;
  transition:block-size .38s cubic-bezier(.23,1,.32,1),content-visibility .38s allow-discrete}
.ra-faq-p[open]::details-content{block-size:auto}
@media (prefers-reduced-motion:reduce){
  .ra-faq-p::details-content{transition:none}
  .ra-faq-plus,.ra-faq-plus::before,.ra-faq-plus::after{transition:none}
}

/* Pole adresu po powrocie z dolu strony: krotkie podswietlenie, zeby bylo wiadomo,
   gdzie wladowal sie kursor. Puls tylko dwa razy, bez migania w kolko. */
@keyframes ra-puls{0%{box-shadow:0 0 0 0 rgba(128,223,160,.55)}70%{box-shadow:0 0 0 12px rgba(128,223,160,0)}100%{box-shadow:0 0 0 0 rgba(128,223,160,0)}}
.ra-hero .ra-pole input#ra-domena.ra-podswietl{animation:ra-puls 1.1s cubic-bezier(.23,1,.32,1) 2}
@media (prefers-reduced-motion:reduce){ .ra-hero .ra-pole input#ra-domena.ra-podswietl{animation:none} }

/* ---------- KROKI 01 02 03: LINIA, KTORA RYSUJE SIE PRZY PRZEWIJANIU ----------
   Trzy karty stały obok siebie bez zadnego zwiazku. Linia laczy je w sekwencje.
   Robi to animacja sterowana przewijaniem, bez ani jednej linii JS. Tam, gdzie
   przegladarka jej nie zna, linia jest po prostu narysowana od razu. */
/* ZIELONA LINIA MIEDZY KROKAMI USUNIETA. Byla jedna ciagla kreska narysowana POD
   kartami (z-index 0), wiec widac z niej bylo wylacznie dwa ogryzki w 20-pikselowych
   przerwach miedzy kaflami. Czytalo sie to jak przypadkowe zielone kreski wiszace
   u gory, a nie jak os procesu. Kolejnosc niosa numery 01, 02, 03 i to wystarcza.
   Nie wracac do linii rysowanej pod kartami. */

/* ---------- NAGLOWKI SEKCJI: DWIE KOLUMNY ----------
   Kazda sekcja miala naglowek i akapit wciśnięte w lewa polowe, a prawa swiecila
   pustka. Na szerokim ekranie akapit idzie obok naglowka i wiersz jest domkniety.
   Ponizej 1000 px wraca uklad jeden pod drugim. */
.ra-glowa2{display:grid;gap:14px;margin-bottom:34px}
@media (min-width:1000px){
  /* Naglowek dostaje wiecej miejsca, akapit stoi tuz obok, a nie odplywa na prawa
     krawedz. Wyrownanie do dolu, zeby ostatnia linia naglowka i akapit lezaly rowno. */
  .ra-glowa2{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px 40px;align-items:end}
  .ra-glowa2 h2{margin:0}
  .ra-glowa2 .ra-wstep{margin:0 0 7px;max-width:42ch}
}
/* Karty w sekcji o zakresie testu roznily sie wysokoscia, przez co ich dolne
   krawedzie sie nie zgadzaly. */
.ra-zakres{align-items:stretch}
.ra-zakres-k{display:flex;flex-direction:column}
.ra-zakres-k ul{flex:1}

/* ---------- ZAPYTANIE WYPISUJE SIE LINIA PO LINII ----------
   Blok pojawial sie w calosci, przez co wygladal jak obrazek. Teraz linie wchodza
   po kolei, a odpowiedz serwera na koncu, z krotkim przytrzymaniem. To ten sam
   rytm, w jakim to sie realnie dzieje. */
.ra-probka .ra-l{display:block;opacity:0;transform:translateX(-6px)}
.ra-probka.in .ra-l{animation:ra-linia-wejscie .34s cubic-bezier(.23,1,.32,1) both}
.ra-probka.in .ra-l:nth-child(1){animation-delay:.10s}
.ra-probka.in .ra-l:nth-child(2){animation-delay:.24s}
.ra-probka.in .ra-l:nth-child(3){animation-delay:.34s}
.ra-probka.in .ra-l:nth-child(4){animation-delay:.48s}
.ra-probka.in .ra-l:nth-child(5){animation-delay:.56s}
.ra-probka.in .ra-l-odp{animation-delay:.92s}
@keyframes ra-linia-wejscie{to{opacity:1;transform:none}}
/* Kursor mruga tylko do czasu pojawienia sie odpowiedzi. */
.ra-probka .ra-l-odp::after{content:'';display:inline-block;width:8px;height:14px;margin-left:6px;
  background:var(--mt);vertical-align:-2px;opacity:0}
.ra-probka.in .ra-l-odp::after{animation:ra-kursor .7s steps(1) 1.1s 3}
@keyframes ra-kursor{0%,49%{opacity:.9}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .ra-probka .ra-l{opacity:1;transform:none}
  .ra-probka.in .ra-l,.ra-probka.in .ra-l-odp::after{animation:none}
}

/* ---------- LISTA BOTOW W HERO: WCHODZI KASKADA ---------- */
.ra-hero-p.in .ra-hp-boty li{animation:ra-bot-wejscie .4s cubic-bezier(.23,1,.32,1) both}
.ra-hero-p .ra-hp-boty li{opacity:0}
.ra-hero-p.in .ra-hp-boty li:nth-child(1){animation-delay:.12s}
.ra-hero-p.in .ra-hp-boty li:nth-child(2){animation-delay:.20s}
.ra-hero-p.in .ra-hp-boty li:nth-child(3){animation-delay:.28s}
.ra-hero-p.in .ra-hp-boty li:nth-child(4){animation-delay:.36s}
.ra-hero-p.in .ra-hp-boty li:nth-child(5){animation-delay:.44s}
@keyframes ra-bot-wejscie{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .ra-hero-p .ra-hp-boty li{opacity:1}
  .ra-hero-p.in .ra-hp-boty li{animation:none}
}

/* ---------- GWIAZDKI W PRZYKLADOWYCH WYNIKACH DOLICZAJA SIE ----------
   Szerokosc jest wpisana stylem w kodzie, wiec stan poczatkowy musi ja przebic. */
.ra-prog .ra-gw-pelne{transition:width .95s cubic-bezier(.23,1,.32,1) .15s}
.ra-prog:not(.in) .ra-gw-pelne{width:0!important}
@media (prefers-reduced-motion:reduce){
  .ra-prog .ra-gw-pelne{transition:none}
  .ra-prog:not(.in) .ra-gw-pelne{width:auto}
}
/* Pusta linia przed odpowiedzia serwera ma byc odstepem, nie pelnym wierszem. */
.ra-probka .ra-l-przerwa{height:10px}


/* ---------- HERO WYSRODKOWANE ----------
   Bylo: dwie kolumny, formularz przy lewej krawedzi, obok karta z lista pieciu
   botow. Karta poszla, bo te same informacje pokazuje teraz dziennik analizy,
   z realnymi kodami odpowiedzi zamiast samej listy nazw. Zostaje jedna kolumna,
   wysrodkowana, zeby pole na adres strony bylo tam, gdzie patrzy oko. */
/* WAZNE: nie zwezamy samego .shell, bo wtedy hero zaczyna sie w innym miejscu niz
   pozostale sekcje (820 px od lewej 310, przy 1312 px od 64 w reszcie serwisu).
   Shell zostaje taki jak wszedzie, a srodkujemy dopiero zawartosc. */
.ra-hero-srodek{text-align:center}
.ra-hero-srodek .ra-kick{justify-content:center}
.ra-hero-srodek h1{margin-inline:auto;max-width:16ch}
.ra-hero-srodek .ra-lead{margin-inline:auto;max-width:56ch}
/* Adres strony dostaje WLASNY, pelny rzad. Dzielony z branza siedzial 117 px
   od srodka ekranu, a to jest jedyne pole, ktore uzytkownik ma wypelnic. */
/* Zostalo jedno pole i przycisk. Typ strony wylecial: byl dodatkowym krokiem,
   a na sam audyt nie mial zadnego wplywu. */
.ra-hero-srodek .ra-form{max-width:660px;margin-inline:auto;
  grid-template-columns:minmax(0,1fr);gap:14px;text-align:left}
.ra-hero-srodek .ra-form .ra-btn{width:100%}
.ra-hero-srodek .ra-pod{text-align:center}
.ra-hero-srodek .ra-blad{text-align:center}

/* Panel analizy tez na srodku i o tej samej szerokosci co formularz, zeby proces
   byl widoczny od razu po kliknieciu, a nie gdzies z boku. */
.ra-hero-srodek .ra-postep{max-width:660px;margin-inline:auto;text-align:left}

@media (max-width:720px){
  .ra-hero-srodek h1{max-width:none}
}

/* ---------- KARTA WYNIKU: POMIAR I DZIALANIE ----------
   Dwie polowy jednej karty. Lewa na bieli niesie pomiar, prawa na granacie niesie
   wezwanie. Ciemny blok na bialej karcie sciaga wzrok sam z siebie, wiec przycisk
   da sie znalezc bez szukania. Mieta jest jedynym akcentem, zgodnie z brandbookiem.
   Wczesniej: bialy przycisk na bialym tle, potem pasek wiszacy miedzy kartami. */
.ra-glowa-wynik{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0;padding:0;
  overflow:hidden;align-items:stretch}
.ra-glowa-lewa{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding:26px 30px}

.ra-akcje{display:flex;flex-direction:column;justify-content:center;gap:13px;
  min-width:300px;padding:26px 30px;background:linear-gradient(150deg,#050a30,#0c1a4e)}
.ra-akcje-nag{font:800 10px/1 'Montserrat';letter-spacing:.2em;text-transform:uppercase;
  color:var(--mt)}
.ra-akcja-glowna{min-height:52px;padding:0 24px;border:0;border-radius:999px;
  background:var(--mt);color:#050a30;font:800 15px/1 'Montserrat';cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.16),0 16px 30px -16px rgba(128,223,160,.55);
  transition:transform .16s cubic-bezier(.23,1,.32,1),box-shadow .16s cubic-bezier(.23,1,.32,1)}
.ra-akcja-glowna:hover{transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.2),0 22px 38px -16px rgba(128,223,160,.66)}
.ra-akcja-glowna:active{transform:scale(.97)}
.ra-akcja-glowna:focus-visible{outline:3px solid #fff;outline-offset:3px}
.ra-akcja-druga{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:40px;font:700 13px/1 'Montserrat';color:rgba(255,255,255,.66);text-decoration:none;
  transition:color .2s}
.ra-akcja-druga::before{content:'';width:13px;height:13px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v12m0 0l-4-4m4 4l4-4M4 21h16'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v12m0 0l-4-4m4 4l4-4M4 21h16'/></svg>") center/contain no-repeat}
.ra-akcja-druga:hover{color:#fff}
.ra-akcja-druga:focus-visible{outline:2px solid var(--mt);outline-offset:3px;border-radius:6px}

@media (max-width:900px){
  .ra-glowa-wynik{grid-template-columns:1fr}
  .ra-akcje{min-width:0}
}
@media (prefers-reduced-motion:reduce){ .ra-akcja-glowna{transition:none} }

/* ---------- FORMULARZ: MOMENT KONWERSJI ----------
   Byl najjasniejsza karta na jasnej stronie (#fafbff na bieli, cienka ramka) i
   ginal miedzy pozostalymi kartami, mimo ze to jedyne miejsce, w ktorym klient
   moze cos zrobic. Teraz jest granatowy, tak samo jak blok dzialania w naglowku
   wyniku: dwa ciemne pola to dwa miejsca, w ktorych cos sie dzieje.
   Zgoda schodzi pod pola, bo wciśnieta obok przycisku nie miala zadnej hierarchii. */
.ra-lead-box{position:relative;overflow:hidden;padding:34px 36px;
  border:0;background:linear-gradient(150deg,#050a30,#0c1a4e);color:#fff;
  box-shadow:0 1px 0 rgba(5,10,48,.04),0 34px 60px -34px rgba(5,10,48,.5)}
.ra-lead-box h3{margin:0 0 8px;font:800 25px/1.22 'Montserrat';letter-spacing:-.03em;color:#fff}
.ra-lead-box p{margin:0 0 20px;max-width:56ch;font:500 14.5px/1.62 'Montserrat';
  color:rgba(255,255,255,.72)}
.ra-lead-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center}
.ra-lead-form input[type=email]{min-height:56px;padding:0 20px;border-radius:999px;
  border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.08);color:#fff;
  font:600 15px/1 'Montserrat'}
.ra-lead-form input[type=email]::placeholder{color:rgba(255,255,255,.5);font-weight:500}
.ra-lead-form input[type=email]:focus{outline:none;border-color:var(--mt);background:rgba(255,255,255,.12)}
.ra-lead-form .ra-btn{min-height:56px;padding:0 30px;font-size:15px}
.ra-lead-form .ra-zgoda{grid-column:1 / -1;display:flex;align-items:flex-start;gap:11px;
  margin-top:2px;font:500 12.5px/1.5 'Montserrat';color:rgba(255,255,255,.66);cursor:pointer}
.ra-lead-form .ra-zgoda input{flex:none;width:19px;height:19px;margin-top:1px;accent-color:var(--mt)}
.ra-lead-box .ra-blad{color:#ffc9b4}
@media (max-width:760px){
  .ra-lead-box{padding:26px 22px}
  .ra-lead-box h3{font-size:21px}
  .ra-lead-form{grid-template-columns:1fr}
  .ra-lead-form .ra-btn{width:100%}
}

/* ---------- PYTANIA DO CHATGPT ----------
   Do kazdego pytania odnosnik, ktory otwiera ChatGPT z juz wpisana trescia.
   Kopiowanie calosci zostaje pod spodem, bo nie kazdy ma tam konto. */
.ra-prompty ol li{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.ra-pyt-t{flex:1 1 320px;min-width:0}
.ra-pyt-go{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;
  border-radius:999px;border:1px solid rgba(5,10,48,.16);background:#fff;
  font:700 12.5px/1 'Montserrat';color:var(--gr);text-decoration:none;
  transition:border-color .2s,transform .16s cubic-bezier(.23,1,.32,1)}
.ra-pyt-go::after{content:'↗';font-size:13px;line-height:1;color:var(--mtd)}
.ra-pyt-go:hover{border-color:var(--mtd);transform:translateY(-1px)}
.ra-pyt-go:active{transform:scale(.97)}
.ra-pyt-go:focus-visible{outline:3px solid var(--mtd);outline-offset:3px}
@media (max-width:640px){ .ra-pyt-go{width:100%;justify-content:center} }
@media (prefers-reduced-motion:reduce){ .ra-pyt-go{transition:none} }

/* ---------- FORMULARZ: UKLAD PÓL I KONTRAST ZGÓD ----------
   Dwa realne bledy, oba zmierzone.
   1. Pole telefonu mialo 190x28 px i wisialo z boku na innej wysokosci niz reszta,
      bo wpadlo w kolumne siatki bez zadnego stylu: stylowalem tylko input[type=email].
      Teraz oba pola sa stylowane tak samo i stoja obok siebie w jednym rzedzie.
   2. Tekst zgod mial kontrast 3,12 na granacie, przy wymaganych 4,5 dla AA. Stara
      regula .ra-zgoda z jasnego motywu wygrywala specyficznoscia. */
#ra-lead-box .ra-lead-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
#ra-lead-box .ra-lead-form input[type=email],
#ra-lead-box .ra-lead-form input[type=tel]{width:100%;min-height:56px;padding:0 20px;
  border-radius:999px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.08);
  color:#fff;font:600 15px/1 'Montserrat'}
#ra-lead-box .ra-lead-form input[type=tel]::placeholder{color:rgba(255,255,255,.5);font-weight:500}
#ra-lead-box .ra-lead-form input[type=email]:focus,
#ra-lead-box .ra-lead-form input[type=tel]:focus{outline:none;border-color:var(--mt);
  background:rgba(255,255,255,.12)}
#ra-lead-box .ra-lead-form .ra-btn{grid-column:1 / -1;width:100%}
#ra-lead-box .ra-lead-form .ra-zgoda{grid-column:1 / -1;color:rgba(255,255,255,.82)}
#ra-lead-box .ra-lead-form .ra-zgoda span{color:rgba(255,255,255,.82);font-size:13px;line-height:1.55}
@media (max-width:760px){
  #ra-lead-box .ra-lead-form{grid-template-columns:1fr}
}

/* ---------- PAS WEZWANIA W SRODKU WYNIKU ----------
   Zmierzone: pierwsze wezwanie bylo na 50 px, a nastepne dopiero na 751. Siedemset
   pikseli bez niczego, dokladnie tam, gdzie czytelnik przechodzi przez cztery obszary
   i trzy priorytety, czyli w chwili najwiekszej gotowosci. */
/* ---------- PAS WEZWANIA Z KONTAKTEM ----------
   Wezwanie NIE stoi juz jako piata kolumna obok czterech kart. Zmierzone: karty
   scisnely sie do 223 px i trzy z czterech tytulow lamaly sie na dwie linie.
   Teraz karty maja pelna szerokosc, a wezwanie jest pasem pod nimi.
   Numer i adres sa WPROST na wierzchu, bo celem tej strony jest to, zeby osoba,
   ktora tu trafila, wiedziala jak sie skontaktowac, a nie zeby szukala. */
.ra-pas{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:28px;align-items:center;
  margin:26px 0;padding:26px 30px;border-radius:20px;
  background:linear-gradient(150deg,#050a30,#0c1a4e);color:#fff}
.ra-pas .ra-pas-tx b{display:block;font:800 20px/1.3 'Montserrat';letter-spacing:-.02em;color:#fff}
.ra-pas .ra-pas-tx span{display:block;margin-top:7px;font:500 13.5px/1.6 'Montserrat';
  color:rgba(255,255,255,.76);max-width:52ch}
.ra-pas-kontakt{display:flex;flex-direction:column;gap:4px;padding-right:28px;
  border-right:1px solid rgba(255,255,255,.18)}
.ra-pas-tel{font:800 20px/1.25 'Montserrat';color:var(--mt);text-decoration:none;letter-spacing:-.01em}
.ra-pas-mail{font:600 13.5px/1.4 'Montserrat';color:rgba(255,255,255,.76);text-decoration:none}
.ra-pas-tel:hover,.ra-pas-mail:hover{text-decoration:underline}
.ra-pas-tel:focus-visible,.ra-pas-mail:focus-visible{outline:2px solid var(--mt);outline-offset:3px;border-radius:4px}
@media (max-width:980px){
  .ra-pas{grid-template-columns:1fr;gap:20px}
  .ra-pas-kontakt{flex-direction:row;align-items:baseline;gap:18px;padding:0 0 18px;
    border-right:0;border-bottom:1px solid rgba(255,255,255,.18)}
  .ra-pas .ra-akcja-glowna{width:100%}
}

/* ---------- CELE KLIKALNE: MINIMUM 44 px ----------
   Zmierzone na telefonie: szesc elementow klikalnych mialo od 19 do 36 px wysokosci,
   przy wymaganym minimum 44 px (Apple HIG) i 48 dp (Material). Numer telefonu mial
   25 px, adres e-mail 19 px, czyli akurat te, w ktore ktos ma realnie trafic palcem. */
.ra-kryte-b{min-height:44px;padding:0 20px}
.ra-pas-tel,.ra-pas-mail{display:inline-flex;align-items:center;min-height:44px}
.ra-pas-kontakt{gap:0}
@media (max-width:980px){ .ra-pas-kontakt{flex-wrap:wrap;gap:0 18px} }
.ra-sticky-b{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
/* Etykieta "Co dalej" mial 10 px. Najmniejszy stopien w tym widoku to 11 px. */
.ra-akcje-nag{font-size:11px}
/* Drugi przebieg pomiaru: te dwa mialy rowno 40 px, czyli ciagle ponizej progu 44. */
.ra-akcja-druga,.ra-pyt-go{min-height:44px}

/* ---------- PULAPKA ANTYSPAMOWA ----------
   Blad z 10.09: reguly dla .ra-pulapka NIE BYLO w tym pliku wcale, wiec pole
   "Nie wypelniaj tego pola" stalo widoczne pod adresem strony w obu formularzach.
   Chowamy poza kadrem zamiast display:none, bo prostsze boty pomijaja pola ukryte
   deklaracja display i wtedy pulapka nic nie lapie. */
.ra-pulapka{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Odznaka reCAPTCHA chowana zgodnie z warunkami Google: zamiast niej idzie
   zdanie z odnosnikami do zasad Google pod przyciskiem (klasa .ra-recaptcha-nota). */
.grecaptcha-badge{visibility:hidden}
.ra-recaptcha-nota{margin:10px auto 0;max-width:520px;text-align:center;
  font:400 11px/1.5 'Montserrat',sans-serif;color:rgba(255,255,255,.55)}
.ra-recaptcha-nota a{color:rgba(255,255,255,.75);text-decoration:underline}
.ra-recaptcha-nota a:hover{color:#80dfa0}
.ra-lead-box .ra-recaptcha-nota{color:rgba(255,255,255,.5)}
.ra-recaptcha-nota{max-width:640px;text-wrap:balance}

/* ---------- ROZWIJANE UWAGI: KOLOR MARKI ZAMIAST RDZY ----------
   Przelacznik akordeonu byl caly w #c2410c i czytal sie jak komunikat bledu, a to
   po prostu przycisk. Tekst idzie na granat, a rangę problemu niesie kropka. */
.ra-co summary{color:var(--gr)}
.ra-co summary::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--zle)}
.ra-co summary span{text-decoration-color:rgba(5,10,48,.3)}
@media (hover:hover) and (pointer:fine){
  .ra-co summary:hover span{text-decoration-color:var(--mtd)}
}
/* Kafel bez uwag mial w tym miejscu samo zdanie i wygladal na niedokonczony. */
.ra-obszar.czysto p{display:inline-flex;align-items:center;gap:7px;min-height:44px;
  padding:0 14px 0 11px;border-radius:999px;background:rgba(128,223,160,.16);
  font:700 13px/1 'Montserrat'}
.ra-obszar.czysto p::before{content:'';width:14px;height:14px;border-radius:50%;
  background:var(--mtd) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}

/* ---------- PYTANIA DO CHATGPT ----------
   Przycisk stal 590 px od konca pytania i wygladal jakby nalezal do niczego.
   Wiersz z linia dzielaca wiaze pytanie z jego przyciskiem. */
.ra-prompty ol{gap:0}
.ra-prompty ol li{align-items:center;padding:13px 0;border-top:1px solid rgba(255,255,255,.13)}
.ra-prompty ol li:first-child{border-top:0;padding-top:4px}
.ra-prompty ol li:last-child{padding-bottom:4px}
.ra-pyt-t{font:600 14.5px/1.5 'Montserrat'}

/* Siatka obszarow rozciagala karty do wysokosci najwyzszej z nich. Po otwarciu
   jednego akordeonu trzy pozostale karty stawaly sie pustymi bialymi slupami na
   1200 px. Kazda karta ma teraz swoja wlasna wysokosc. */
.ra-obszary{align-items:start}

/* ---------- OTWARTY OBSZAR NA CALA SZEROKOSC ----------
   Rozwinieta karta byla slupem tekstu na 980 px wysokosci przy 300 px szerokosci,
   a obok stalo 780 px pustki. Otwarta karta bierze cala szerokosc wiersza i uklada
   uwagi w trzech kolumnach, wiec ta sama tresc ma okolo 400 px zamiast 980. */
/* PROBA Z PRZESKOKIEM NA CALA SZEROKOSC COFNIETA. Otwarta karta przeskakiwala do
   nowego wiersza siatki, czyli "teleportowala sie" zamiast rozwijac, i Marcin od razu
   to wylapal. Zostaje rozwijanie W MIEJSCU, plynne, a problem, ktory tamto mialo
   rozwiazac (sasiednie karty rozciagane do wysokosci otwartej), zalatwia samo
   `align-items:start` na siatce. Nie wracac do grid-column:1/-1. */
.ra-co{interpolate-size:allow-keywords}
.ra-co::details-content{
  block-size:0;overflow:hidden;
  transition:block-size .34s cubic-bezier(.23,1,.32,1),content-visibility .34s allow-discrete}
.ra-co[open]::details-content{block-size:auto}
@media (prefers-reduced-motion:reduce){ .ra-co::details-content{transition:none} }
}
/* Lista pytan byla wciecie 20 px wzgledem naglowka i przycisku kopiowania. */
.ra-prompty ol{padding-left:0;list-style:none}
.ra-kopiuj{margin-top:18px}

/* ---------- FORMULARZ LEADA: KOLEJNOSC I SZEROKOSC ----------
   Zgody stały POD przyciskiem wysylki, czyli ktos zatwierdzal formularz zanim
   zobaczyl, na co sie zgadza. Teraz ida nad przyciskiem, a nota o reCAPTCHA
   zamyka blok. Przycisk mial 1312 px szerokosci i wygladal jak pasek, a nie
   jak przycisk. */
#ra-lead-box .ra-lead-form .ra-btn{width:auto;justify-self:start;min-width:280px;margin-top:4px}
#ra-lead-box .ra-lead-form .ra-recaptcha-nota{grid-column:1 / -1;margin:2px 0 0;max-width:none;
  text-align:left;text-wrap:pretty}
@media (max-width:640px){
  #ra-lead-box .ra-lead-form .ra-btn{width:100%;justify-self:stretch}
}
/* Pola leada dostaly widoczne etykiety, wiec po wpisaniu tresci nadal wiadomo,
   co jest gdzie. Placeholder pokazuje teraz format, a nie powtarza etykiete. */
#ra-lead-box .ra-lead-form .ra-pole{min-width:0}
#ra-lead-box .ra-lead-form .ra-pole input{width:100%;min-height:56px;padding:0 20px;
  border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);
  color:#fff;font:600 15.5px/1 'Montserrat'}
#ra-lead-box .ra-lead-form .ra-pole input::placeholder{color:rgba(255,255,255,.42);font-weight:500}
#ra-lead-box .ra-lead-form .ra-pole input:focus{outline:none;border-color:var(--mt);background:rgba(255,255,255,.12)}
/* Pole e-mail rozlalo sie na 460 px: .ra-pole jest kontenerem flex w kolumnie,
   wiec input rosl razem z wysokoscia komorki siatki. */
#ra-lead-box .ra-lead-form{align-items:start}
#ra-lead-box .ra-lead-form .ra-pole{align-self:start}
#ra-lead-box .ra-lead-form .ra-pole input{flex:none;height:56px}
/* Kwadrat zgody mial 19 px. Powiekszony i z pelnowymiarowym wierszem etykiety,
   zeby dalo sie w niego trafic palcem, a nie tylko w tekst obok. */
#ra-lead-box .ra-lead-form .ra-zgoda{min-height:44px;align-items:center;padding:2px 0}
#ra-lead-box .ra-lead-form .ra-zgoda input{width:22px;height:22px;margin-top:0}
/* Rodzaj podstrony przy adresie w surowych danych. */
.ra-zp-l--url li{display:flex;align-items:baseline;gap:10px}
.ra-zp-typ{flex:none;font:600 11px/1.4 'Montserrat';font-style:normal;color:var(--tx);
  padding:2px 8px;border-radius:999px;background:rgba(216,222,250,.5)}

/* Sprzezenie dotykowe na przelaczniku akordeonu. Kazdy inny element klikalny na tej
   stronie ma :hover, :focus-visible i :active, ten mial tylko dwa pierwsze. */
.ra-co summary{transition:transform .16s var(--ez)}
.ra-co summary:active{transform:scale(.99)}
@media (prefers-reduced-motion:reduce){ .ra-co summary{transition:none} }

/* ---------- STALE WEZWANIE PRZY WYNIKU ----------
   Ten sam blad co przy pulapce: markup `.ra-sticky` istnial od 8.09, a reguly CSS
   nie bylo w tym pliku wcale, wiec element lezal w zwyklym przeplywie strony i nic
   nie przyklejal. Pomiar: miedzy ostatnim wezwaniem a formularzem jest 1375 px na
   desktopie i 2471 px na telefonie, czyli poltora ekranu bez zadnego kontaktu.
   Pigulka trzyma sie prawego dolnego rogu przez caly czas czytania wyniku. */
.ra-sticky{position:fixed;right:24px;bottom:24px;z-index:40;
  display:flex;align-items:center;gap:14px;padding:11px 11px 11px 20px;
  border-radius:999px;background:var(--gr);color:#fff;
  box-shadow:0 1px 0 rgba(5,10,48,.05),0 26px 50px -24px rgba(5,10,48,.7);
  transition:opacity .3s var(--ez),transform .3s var(--ez)}
.ra-sticky > span{font:600 13.5px/1.3 'Montserrat';white-space:nowrap}
.ra-sticky-b{padding:0 20px;border:0;border-radius:999px;background:var(--mt);color:var(--gr);
  font:700 13.5px/1 'Montserrat';cursor:pointer;white-space:nowrap;
  transition:transform .2s var(--ez)}
.ra-sticky-b:active{transform:scale(.97)}
.ra-sticky-b:focus-visible{outline:3px solid var(--mt);outline-offset:3px}
@media (hover:hover) and (pointer:fine){ .ra-sticky-b:hover{transform:translateY(-1px)} }
/* Chowa sie, gdy na ekranie jest formularz albo stopka strony: dwa wezwania obok
   siebie to szum, a pigulka zaslanialaby pole do wpisania adresu. */
.ra-sticky.schowany{opacity:0;transform:translateY(18px);pointer-events:none}
@media (max-width:640px){
  .ra-sticky{left:12px;right:12px;bottom:12px;justify-content:space-between;
    padding:10px 10px 10px 16px;gap:10px}
  .ra-sticky > span{font-size:12.5px;white-space:normal}
}
@media (prefers-reduced-motion:reduce){ .ra-sticky,.ra-sticky-b{transition:none} }

/* ---------- KARTA WYNIKU: WERDYKT ZAMIAST GWIAZDEK ----------
   Bylo: liczba, cztery gwiazdki i etykieta "Czesciowa dostepnosc", czyli trzy
   urzadzenia mowiace to samo, i 60 procent pustej bieli obok. Gwiazdki wylecialy
   (czytaly sie jak ocena w sklepie), a w ich miejscu stoi zdanie o tym, CO ten
   wynik znaczy dla firmy. To samo zdanie co w PDF, z jednej funkcji w PHP. */
.ra-glowa-lewa{align-items:flex-start;gap:30px;padding:30px 32px;flex-wrap:nowrap}
.ra-licznik{align-self:center}
.ra-glowa-tx{flex:1;min-width:0}
.ra-glowa-dom{display:block;font:700 13px/1 'Montserrat';letter-spacing:.02em;color:var(--nb)}
.ra-glowa-tx h2{margin:9px 0 0;font:800 25px/1.2 'Montserrat';letter-spacing:-.025em;
  text-wrap:balance}
.ra-glowa-opis{margin:10px 0 0;max-width:62ch;font:500 14.5px/1.62 'Montserrat';color:var(--tx)}
.ra-glowa-tx .ra-meta{margin-top:12px;padding-top:12px;border-top:1px solid var(--ln)}
/* Drugie dzialanie bylo odnosnikiem tekstowym o polowe slabszym od przycisku.
   Teraz obrys: nadal wyraznie slabsze od mietowego, ale widac, ze to przycisk. */
.ra-akcja-druga{min-height:46px;padding:0 20px;border:1px solid rgba(255,255,255,.28);
  border-radius:999px;color:#fff;
  transition:border-color .2s,background .2s,transform .16s cubic-bezier(.23,1,.32,1)}
.ra-akcja-druga:hover{border-color:var(--mt);background:rgba(255,255,255,.06);transform:translateY(-1px)}
.ra-akcja-druga:active{transform:scale(.97)}
@media (max-width:760px){
  .ra-glowa-lewa{flex-wrap:wrap;gap:18px;padding:24px 22px}
  .ra-licznik{align-self:flex-start}
  .ra-glowa-tx h2{font-size:21px}
}
@media (prefers-reduced-motion:reduce){ .ra-akcja-druga{transition:none} }

/* ---------- "ZNALEZLISMY JESZCZE X UWAG": JASNY, NIE GRANATOWY ----------
   Po przeniesieniu pasa kontaktowego pod priorytety stanely obok siebie dwa
   granatowe bloki w odstepie 26 px i czytaly sie jak jedna ciemna plama. Ten blok
   INFORMUJE, a nie wzywa, wiec oddaje granat temu, ktory ma przycisk. Jeden ciemny
   blok w widoku znaczy jedno dzialanie glowne. */
.ra-reszta{margin-top:30px;background:rgba(216,222,250,.42);color:var(--gr);
  box-shadow:none;border:1px solid var(--ln)}
.ra-reszta-l{color:var(--nb)}
.ra-reszta-t span{color:var(--tx)}
.ra-pas{margin-top:36px}
/* Linie 545 do 547 ustawiaja bialy tekst z selektorem `.ra-naprawy .ra-reszta-t b`,
   czyli o klase mocniejszym niz moj. Po zmianie tla na jasne tekst byl bialy na
   jasnym i nie dalo sie go przeczytac. */
.ra-naprawy .ra-reszta-t b{color:var(--gr)}
.ra-naprawy .ra-reszta-t span{color:var(--tx)}
.ra-naprawy .ra-reszta-l{color:var(--nb)}
/* Na telefonie liczba i tekst staly obok siebie w waskiej kolumnie, wiec zdanie
   werdyktu lamalo sie na dziewiec linii, a pod liczba zostawala pusta kolumna. */
@media (max-width:760px){
  .ra-glowa-tx{flex:1 0 100%}
  .ra-licznik{padding-bottom:4px;border-bottom:1px solid var(--ln);width:100%}
}

/* Odnosnik "lub zadzwon" w pasie zamykajacym ma 15 px wysokosci. Pas jest
   komponentem WSPOLNYM dla calej witryny (parts/cta-band.php), wiec nie ruszam go
   globalnie bez zgody. Tu poprawka jest ograniczona do tego landingu selektorem
   `.ra`, bo to jedno z wezwan, o ktore chodzi w tym narzedziu. */
.ra .ctab-tel{display:inline-flex;align-items:center;min-height:44px}

/* Kroki: miedzy numerem a tytulem stalo 60 px pustki, wiec kafle wygladaly na
   niedokonczone, a krotszy tekst zostawial pod soba dziure. Numer bliżej tytulu,
   tresc wyzej, kafle nadal rownej wysokosci, bo to jeden ciag trzech krokow. */
.ra-krok3{padding:26px 28px}
.ra-krok3 span{margin-bottom:16px}
.ra-krok3 h3{margin:0 0 8px}
.ra-krok3 p{margin:0}

/* ---------- KAFEL BEZ UWAG TEZ SIE ROZWIJA ----------
   Marcin: "niech sie rozwijaja wszystkie kafelki". Obszar bez uwag mial tylko
   pigulke "bez uwag" i nie dalo sie go otworzyc, wiec cztery karty zachowywaly sie
   na trzy sposoby. Teraz kazda ma ten sam gest, tyle ze pod spodem jest lista
   sprawdzen ZALICZONYCH. */
.ra-co--ok summary{color:var(--mtd)}
.ra-co--ok summary::before{background:var(--mtd)}
.ra-co--ok summary span{text-decoration-color:rgba(39,120,70,.35)}
.ra-co--ok li b{font:600 13px/1.4 'Montserrat';color:var(--gr)}
.ra-co--ok ul{gap:7px}
.ra-co--ok li{display:flex;align-items:flex-start;gap:8px}
.ra-co--ok li::before{content:'';flex:none;width:14px;height:14px;margin-top:1px;border-radius:50%;
  background:rgba(39,120,70,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23277846' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
@media (hover:hover) and (pointer:fine){
  .ra-co--ok summary:hover span{text-decoration-color:var(--mtd)}
}

/* ---------- WEZWANIE DOKLADNIE W MOMENCIE ZASLONY ----------
   Marcin: "jak tylko zaczyna byc zasloniety wynik, to CTA znowu" i "nic nie ma byc
   polowicznie". Blok "Znalezlismy jeszcze X uwag" jest tym momentem, a nie mial
   wlasnego przycisku, bo pas kontaktowy stal 36 px nizej. Teraz przycisk jest TU,
   a pas pod spodem zostaje samym kontaktem, bez drugiego przycisku. */
.ra-reszta-b{background:var(--gr);color:#fff;box-shadow:0 16px 34px -14px rgba(5,10,48,.55)}
@media (hover:hover) and (pointer:fine){
  .ra-reszta-b:hover,.ra-reszta-b:focus-visible{background:#0c1a4e}
}
.ra-reszta-b:focus-visible{outline:3px solid var(--nb);outline-offset:3px}
/* Pas bez przycisku: sam kontakt, wiec rozklada sie na dwie kolumny zamiast trzech. */
.ra-pas--cichy{grid-template-columns:minmax(0,1fr) auto}
@media (max-width:900px){ .ra-pas--cichy{grid-template-columns:1fr} }
/* W pasie bez przycisku kreska po prawej oddzielala kontakt od pustki. */
.ra-pas--cichy .ra-pas-kontakt{border-right:0;padding-right:0}
@media (max-width:980px){ .ra-pas--cichy .ra-pas-kontakt{border-bottom:0;padding-bottom:0} }

/* ---------- WEJSCIE Z RAPORTU: BEZ FORMULARZA AUDYTU ----------
   Klik w wezwanie w raporcie przenosi na landing, ktorego gora jest formularz
   "Sprawdz dostepnosc". Ktos, kto ma juz raport, odbiera to jako "kazali mi zaczac
   od nowa", nawet jesli audyt sie nie uruchamia. Chowamy formularz audytu i pasek
   postepu, zostawiamy sam formularz kontaktowy. */
body.ra-z-raportu #ra-form,
body.ra-z-raportu .ra-pod,
body.ra-z-raportu #ra-postep,
body.ra-z-raportu .ra-sticky{display:none !important}
body.ra-z-raportu .ra-hero{padding-bottom:56px}

/* Przypomnienie wyniku przy formularzu, gdy ktos przyszedl z raportu. */
.ra-lead-wynik{display:inline-flex;align-items:baseline;gap:6px;margin:0 0 14px;
  padding:8px 16px 8px 14px;border-radius:999px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14)}
.ra-lead-wynik b{font:800 22px/1 'Montserrat';letter-spacing:-.03em;color:var(--mt)}
.ra-lead-wynik.ra--slabo b{color:#ffb59b}
.ra-lead-wynik.ra--srednio b{color:#9fd0ff}
.ra-lead-wynik span{font:700 12px/1 'Montserrat';color:rgba(255,255,255,.55)}
.ra-lead-wynik i{font:600 12.5px/1 'Montserrat';font-style:normal;color:rgba(255,255,255,.7);
  margin-left:6px;padding-left:10px;border-left:1px solid rgba(255,255,255,.2)}
/* Wdowa: zdanie werdyktu konczylo sie samotnym "firmie." w trzeciej linii. */
.ra-glowa-opis,.ra-pas-tx span,.ra-reszta-t span{text-wrap:pretty}
/* H1 po twardej spacji w "modele AI" lamal sie na cztery linie z samotnym "strony".
   Szerszy limit i wyrownane lamanie: trzy linie o zblizonej dlugosci. */
.ra-hero h1{max-width:21ch;text-wrap:balance}

/* ---------- ZGASNIECIE PANELU POSTEPU ----------
   Wyjscie subtelniejsze od wejscia (Jakub Krehel): mniejsze przesuniecie niz przy
   wejsciu wyniku (16 px), to samo rozmycie. Animowane tylko opacity, transform
   i filter. Przy prefers-reduced-motion JS pomija te klase, wiec skok zostaje. */
.ra-postep{transition:opacity .22s cubic-bezier(.23,1,.32,1),transform .22s cubic-bezier(.23,1,.32,1),filter .22s cubic-bezier(.23,1,.32,1)}
.ra-postep.znika{opacity:0;transform:translateY(-6px);filter:blur(4px);pointer-events:none}
@media (prefers-reduced-motion:reduce){ .ra-postep{transition:none} }

/* Kicker w hero na telefonie: wersalikowy, rozstrzelony napis nie miescil sie
   w 390 px, lamal sie na dwie linie, a mietowa kropka zostawala osierocona na
   gorze po lewej, jak przypadkowy piksel. Ponizej 640 px kropka znika, napis idzie
   jako zwykly blok wysrodkowany, z wyrownanym lamaniem. */
@media (max-width:640px){
  .ra-hero-srodek .ra-kick,.ra-kick{display:block;max-width:34ch;margin-inline:auto;
    text-align:center;text-wrap:balance;line-height:1.45;letter-spacing:.1em}
  .ra-kick .d{display:none}
}

/* ---------- FOKUS Z KLAWIATURY: PRZYWROCONY ----------
   Motyw nadrzedny ma w style-main.css regule `:active, :focus { outline:none !important }`.
   `!important` bije kazda pozniejsza zwykla regule, a `:focus` pasuje zawsze wtedy,
   gdy pasuje `:focus-visible`, wiec WSZYSTKIE obrysy fokusu z klawiatury na tej
   stronie byly zabijane: moje reguly nadawaly szerokosc i kolor (zmierzone: 3 px,
   wlasciwy kolor), a styl obrysu zostawal `none`. Osoba na klawiaturze nie widziala,
   gdzie jest. Naprawa ograniczona do landingu selektorem `.ra`; globalnie to decyzja
   o zmianie w calej witrynie. Myszka nadal bez obrysu, tak jak chcial motyw. */
.ra :focus-visible{outline-style:solid !important}
.ra :focus:not(:focus-visible){outline:none}

/* Blad walidacji w formularzu leada: pole z czerwonawym obrysem, komunikat pod
   przyciskiem w tym samym slocie co blad serwera. Kolor #ffc9b4 na granacie
   050a30 daje kontrast ok. 12:1. */
#ra-lead-box .ra-lead-form input[aria-invalid="true"],
#ra-lead-box .ra-lead-form .ra-pole input[aria-invalid="true"]{border-color:#ffc9b4;box-shadow:0 0 0 3px rgba(255,201,180,.22)}
#ra-lead-box .ra-lead-form .ra-zgoda input[aria-invalid="true"]{outline:2px solid #ffc9b4;outline-offset:2px}
#ra-lead-box .ra-lead-form .ra-blad{grid-column:1 / -1;margin:2px 0 0;font:600 13.5px/1.5 'Montserrat';color:#ffc9b4}

/* Karta CTA na koncu strony (wspolny komponent cta-band): .ctab-txt ma flex:1 1 360px,
   czyli podstawe liczona w poziomie dla ukladu w rzedzie. Po przelaczeniu na kolumne
   (720 px) ta sama podstawa staje sie WYSOKOSCIA bloku tekstu i miedzy akapitem
   a przyciskiem zostaje 250 px pustego granatu. Tu tylko landing raportu; ten sam
   blad jest na innych stronach z ta karta, ale to osobna decyzja. */
/* Trzy klasy, bo regula komponentu siedzi w <style> w tresci strony, czyli za tym plikiem. */
@media (max-width:720px){ .ra .netim-ctaband .ctab-txt{flex-basis:auto} }

/* Link do polityki w zgodzie leada: etykieta stoi na granacie, domyslny niebieski linku
   ginal w tle. Kolor tekstu, podkreslenie, fokus jak reszta formularza. */
.ra-zgoda a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.ra-zgoda a:hover{color:#80dfa0}

/* Link powrotu do podgladu raportu pod formularzem leada (wejscie z PDF). */
.ra-lead-powrot{display:inline-flex;align-items:center;gap:8px;margin-top:18px;min-height:44px;
  font:600 13.5px/1.3 'Montserrat';color:rgba(255,255,255,.72);text-decoration:underline;text-underline-offset:3px}
.ra-lead-powrot::before{content:'';width:9px;height:9px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.ra-lead-powrot:hover{color:#80dfa0}
.ra-lead-powrot:focus-visible{outline:2px solid #80dfa0;outline-offset:3px;border-radius:4px}