/* Lokamo :: ciemne rozdzialy strony glownej (rytm jasny/ciemny).
   Rozdzial: <section class="ch ch--dark" data-dark> (data-dark przelacza ton naglowka
   w assets/site/chrome.js). Scena na ciemnym tle: .stage-d zamiast .stage-l.
   Tekst na ciemnym ma kontrast >= 4.5:1, takze w nieaktywnych krokach.
   Wlasciciel pliku: agent "rytm". */
.ch--dark{--d-cobalt:#5470FF;--d-cobalt-t:#8FA0FF;background:var(--ink);color:#fff}
.ch--dark .ch__label{color:var(--mist)}
.ch--dark .ch__label .ico--ring{color:#fff}
.ch--dark .ch__t{color:#fff}
.ch--dark .ch__lead{color:var(--d-text)}
.ch--dark .lnk{color:#fff}
.ch--dark :focus-visible{outline-color:var(--d-cobalt-t)}

/* ---------- Kroki opowiesci (.beat) i podpisy sceny (.cap) ---------- */
.ch--dark .beat h3,.ch--dark .cap h3{color:#fff}
.ch--dark .beat p:not(.beat__n),.ch--dark .cap p{color:var(--d-text)}
.ch--dark .beat__n{color:var(--mist)}
.ch--dark .beat.is-on .beat__n{color:var(--d-cobalt-t)}
/* Pasek postepu: tor, biezacy krok w kobalcie, krok zrobiony w bieli */
.ch--dark .cap__bar{background:rgba(255,255,255,.16)}
.ch--dark .cap__bar::after{background:var(--d-cobalt)}
.ch--dark :is(.cap,.beat).is-done .cap__bar::after{background:#fff}
@media (min-width:1000px){
  /* nieaktywny krok przygaszony kolorem, nie przezroczystoscia: #8E8E94 na #0D0D0F
     to ok. 5,8:1 takze dla 12-pikselowego numeru kroku */
  .ch--dark :is(.cap,.beat):not(.is-on) :is(h3,p){color:#8E8E94}
}
@media (max-width:999px){
  .ch--dark .cap{border-top-color:var(--d-line2)}
  html:not(.js) .ch--dark .cap{opacity:1}
}

/* ---------- Scena na ciemnym tle ---------- */
.stage-d{position:relative;border-radius:24px;background:radial-gradient(120% 85% at 50% 0%,#1C1C21 0%,#151518 55%,#111114 100%);overflow:hidden;isolation:isolate;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.05)}
.stage-d::before{content:"";position:absolute;inset:0;z-index:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.075) 1px,transparent 1.3px);background-size:24px 24px;pointer-events:none}
.stage-d>:not(.scn__pause){z-index:1}
.stage-d .phone{box-shadow:0 2.8em 4em -1.6em rgba(0,0,0,.85),0 .5em 1.2em -.4em rgba(0,0,0,.6)}
.stage-d .scn__pause{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16)}
.stage-d .scn__pause:hover{background:rgba(255,255,255,.18)}

/* ---------- Cennik na ciemnym (#cennik.price.ch--dark) ---------- */
.ch--dark .mod{background:#141417;border-color:rgba(255,255,255,.1)}
.ch--dark .mod:hover{border-color:rgba(255,255,255,.26)}
.ch--dark .mod__box{border-color:rgba(255,255,255,.36)}
.ch--dark .mod__t b,.ch--dark .mod__p{color:#fff}
.ch--dark .mod__t span{color:#ABABB1}
.ch--dark .mod.is-on{background:#181B2B;border-color:var(--d-cobalt);box-shadow:0 0 0 1px var(--d-cobalt)}
.ch--dark .mod.is-on .mod__box{background:var(--d-cobalt);border-color:var(--d-cobalt);color:#fff}
/* Modul w cenie wyzszego planu: wyciszony, ale czytelny */
.ch--dark .mod.is-inc{background:#101013;border-color:rgba(255,255,255,.07)}
.ch--dark .mod.is-inc .mod__box{background:#3A3A41;border-color:#3A3A41;color:#E4E4E8}
.ch--dark .mod.is-inc .mod__t b{color:#DCDCE0}
.ch--dark .mod.is-inc .mod__p{color:#9A9AA0}
.ch--dark .mod:has(input:focus-visible){outline-color:var(--d-cobalt-t)}
/* Podsumowanie: uniesiona grafitowa karta na czarnym tle, bialy przycisk jako jedyny jasny punkt */
.ch--dark .cfg__sum{background:linear-gradient(180deg,#1B1B1F 0%,#131316 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.07)}
.ch--dark .cfg__sum::after{background:#25252B}
.ch--dark .cfg__sum .btn--light:hover{--bg:#E6E6EA}
.ch--dark .cfg__sum .btn[aria-disabled="true"]{--bg:#2A2A30;--fg:var(--d-text)}
/* Telefon: przyklejony pasek z cena odcina sie od czarnego tla */
.ch--dark .cfg__bar{background:rgba(34,34,39,.88);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 16px 36px -14px rgba(0,0,0,.9)}
.ch--dark .beat.is-on .beat__n{color:#B7C1FF}