/* ============================================================
   Etap 32f — podserwisy publiczne (weryfikacja podpisu, CertumSign,
   e-Doreczenia, narzedzia SSL) w systemie wizualnym etapu 32.
   Ladowany jako OSTATNI arkusz w czterech bazach tych modulow, wiec
   wygrywa kolejnoscia. Znaczniki i klasy wr-/cs-/ed- zostaja — trzyma
   sie ich skrypt weryfikacji i testy. Wartosci tylko z tokens.css.
   ============================================================ */
.wr{--wr-noc:var(--c-bg-dark);--wr-noc-2:var(--c-bg-dark);--wr-r-xl:var(--r-md);--wr-r-2xl:var(--r-md);--f-sans:var(--f-text);font-family:var(--f-text)}
.wr h1,.wr h2,.wr h3,.wr h4,.wr .wr-marka,.wr .btn,.wr .wr-nav-cta{font-family:var(--f-display)}
.wr h1{font-weight:var(--fw-normal);letter-spacing:-.022em}
.wr h2{font-weight:var(--fw-medium)}
.wr .wr-marka{font-weight:var(--fw-semibold)}

/* naglowek: ten sam zolty przycisk co "Odnow podpis" w sklepie */
.wr .wr-nav .wr-nav-cta{border-radius:var(--r-md);background:var(--c-akcent);color:var(--c-akcent-ink)}
.wr .wr-nav .wr-nav-cta:hover{background:var(--c-ink);color:var(--c-bg)}
.wr .wr-podmenu a{border-radius:var(--r-md)}
.wr .btn{border-radius:var(--r-md)}
.wr .btn-primary{background:var(--c-brand-600);border-color:var(--c-brand-600);box-shadow:none}
.wr .btn-primary:hover{background:var(--c-ink);border-color:var(--c-ink)}

/* hero: grafit z giloszem zamiast jasnego gradientu */
.wr .wr-hero,.wr .cs-hero{position:relative;overflow:hidden;background:var(--c-bg-dark);color:var(--c-ink-inv);border-bottom:0}
.wr .wr-hero-tlo{display:none}
.wr .wr-hero > .wrap,.wr .cs-hero > .wrap{position:relative}
.wr .n-rozeta{position:absolute;width:46rem;aspect-ratio:1;right:-13rem;top:-15rem;pointer-events:none}
.wr .n-gil path{fill:none;stroke:var(--c-gilosz-inv);stroke-width:.7;vector-effect:non-scaling-stroke}
.wr .wr-hero h1,.wr .cs-hero h1{color:var(--c-ink-inv)}
.wr .wr-akcent{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--c-brand-600)}
.wr .wr-hero .wr-akcent,.wr .cs-hero .wr-akcent{color:var(--c-cert)}
.wr .wr-hero .wr-lead,.wr .cs-hero .cs-lead,.wr .cs-hero .cs-punkty li,.wr .cs-hero .cs-drobne{color:var(--c-ink-inv-2)}
.wr .wr-hero .wr-lead strong,.wr .cs-hero .cs-lead strong{color:var(--c-ink-inv)}
.wr .cs-hero .cs-drobne a{color:var(--c-cert)}
.wr .wr-hero .wr-plakietka,.wr .cs-hero .wr-plakietka{padding:0;border:0;border-radius:0;background:none;box-shadow:none;font-size:var(--t-sm);color:var(--c-ink-inv-2)}
.wr .wr-hero .wr-kropka,.wr .cs-hero .wr-kropka{display:none}
.wr .cs-hero .cs-punkty li{padding-left:1.5rem}
.wr .cs-hero .cs-punkty li::before{top:.72em;width:.75rem;height:2px;border-radius:0;background:var(--c-akcent)}
.wr .cs-hero .btn-secondary{background:transparent;color:var(--c-ink-inv);border-color:var(--c-line-inv)}
.wr .cs-hero .btn-secondary:hover{background:transparent;color:var(--c-ink-inv);border-color:var(--c-ink-inv)}
.wr .cs-hero-obraz,.wr .wr-narzedzie{box-shadow:none}
.wr .wr-hero .wr-zaufanie svg{color:var(--c-cert)}
.wr .wr-hero .wr-zaufanie span{color:var(--c-ink-inv-2)}
.wr .wr-hero .wr-zaufanie b{color:var(--c-ink-inv)}

/* pole wgrywania pliku: plasko, bez gradientow */
.wr .wr-pole{background:var(--c-bg-mgla)}
.wr .wr-pole.nad{background:var(--c-bg)}
.wr .wr-pole-ikona{border-radius:var(--r-md);background:var(--c-brand-600);box-shadow:none}
.wr .wr-pole-tytul{font-family:var(--f-display);font-weight:var(--fw-medium)}

@media (max-width:48rem){.wr .n-rozeta{width:125vw;right:-50vw;top:-5rem;opacity:.75}}