/* ===========================================================
   /ceo — strona dla właścicieli firm.
   Dokładany do site.css, nie zamiast. Tu siedzi tylko to, czego
   nie da się złożyć z klas serwisu: przełącznik dziewięciu zakładek
   i ramki na prawdziwe zrzuty ekranu.
=========================================================== */

/* --- ramka zrzutu ---------------------------------------------------------
   Zrzuty są prawdziwe, więc mają cień i krawędź jak okno, a nie jak grafika.
   Wysokość kadru jest stała (1440x1000), dlatego obrazek nie skacze przy
   zmianie zakładki. */
.ceo-ramka{
  margin:0;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow-lg);
}
.ceo-ramka img{width:100%;height:auto;display:block}
/* Zrzut otwiera się w pełnym rozmiarze. Podpowiadamy o tym tylko tam, gdzie kadr robi
   się nieczytelny, czyli na wąskim ekranie. */
.ceo-lupa{display:block}
.ceo-lupa:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.ceo-lupa__hint{display:none}
.ceo-ramka figcaption{
  padding:12px 16px;
  border-top:1px solid var(--line);
  background:#fbfbfd;
  font-size:.86rem;
  color:var(--muted);
}

/* --- hero ---------------------------------------------------------------- */
.ceo-hero{padding:56px 0 24px}
.ceo-hero h1{max-width:18ch;margin-bottom:.5em}
.ceo-hero .lead{font-size:1.18rem;line-height:1.6;color:#333;max-width:46rem}
.ceo-hero__akcje{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 10px}
.ceo-hero__pod{font-size:.9rem;color:var(--muted);margin:0 0 34px}

/* --- przełącznik zakładek ------------------------------------------------ */
.ceo-demo{
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:28px;
  align-items:start;
}
.ceo-demo__lista{
  display:flex;
  flex-direction:column;
  gap:6px;
  position:sticky;
  top:88px;
}
.ceo-tab{
  display:block;
  width:100%;
  text-align:left;
  padding:12px 14px;
  border:1px solid transparent;
  border-radius:var(--r);
  background:transparent;
  font-family:inherit;
  cursor:pointer;
  transition:background .15s,border-color .15s;
}
.ceo-tab:hover{background:#fff;border-color:var(--line)}
.ceo-tab__nazwa{
  display:block;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--muted);
  margin-bottom:2px;
}
.ceo-tab__pytanie{
  display:block;
  font-size:1.02rem;
  font-weight:600;
  color:var(--graphite);
  line-height:1.35;
}
.ceo-tab[aria-selected="true"]{
  background:#fff;
  border-color:#f1d4d4;
  box-shadow:var(--shadow-sm);
}
.ceo-tab[aria-selected="true"] .ceo-tab__nazwa{color:var(--red)}
.ceo-tab[aria-selected="true"] .ceo-tab__pytanie{color:var(--ink)}
.ceo-tab:focus-visible{outline:2px solid var(--red);outline-offset:2px}

.ceo-demo__ekran{position:relative;min-width:0}
.ceo-panel[hidden]{display:none}

/* --- pas źródeł i bloku o decyzjach --------------------------------------- */
.ceo-pas{
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow-sm);
  margin:0 0 12px;
}
.ceo-pas img{width:100%;height:auto}

/* --- telefony ------------------------------------------------------------- */
.ceo-telefony{
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding:4px 0 14px;
  scroll-snap-type:x mandatory;
}
.ceo-telefon{
  flex:0 0 auto;
  width:190px;
  scroll-snap-align:start;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow);
  margin:0;
}
.ceo-telefon img{width:100%;height:auto}
.ceo-telefon figcaption{
  padding:8px 10px;
  font-size:.8rem;
  color:var(--muted);
  border-top:1px solid var(--line);
  text-align:center;
}

/* --- harmonogram 14 dni ---------------------------------------------------- */
.ceo-kroki{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ceo-krok{
  display:grid;
  grid-template-columns:104px minmax(0,1fr);
  gap:18px;
  align-items:baseline;
  padding:16px 0;
  border-top:1px solid var(--line);
}
.ceo-krok:first-child{border-top:0;padding-top:0}
.ceo-krok__kiedy{
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--red);
}
.ceo-krok__co h3{font-size:1.08rem;margin:0 0 .3em}
.ceo-krok__co p{margin:0;color:var(--muted);font-size:.98rem}

/* --- pytania --------------------------------------------------------------- */
.ceo-pytanie{border-top:1px solid var(--line);padding:20px 0}
.ceo-pytanie:first-child{border-top:0}
.ceo-pytanie h3{font-size:1.08rem;margin:0 0 .4em}
.ceo-pytanie p{margin:0;color:#3f3f46}
.ceo-pytanie p + p{margin-top:.6em}

/* --- czytelność na ciemnym tle ---------------------------------------------
   .lead w site.css jest szary (--muted) pod białe tło. Na sekcjach ciemnych
   ten sam szary spada poniżej progu kontrastu, więc rozjaśniamy go tutaj,
   zamiast dopisywać wyjątek do arkusza całego serwisu. */
.page-ceo section.dark .lead,
.page-ceo section.tint-graphite .lead{color:#c9c9d2}

/* --- węziej ---------------------------------------------------------------- */
@media (max-width:1000px){
  .ceo-demo{grid-template-columns:1fr;gap:18px}
  /* Na wąskim ekranie pytania jadą poziomo nad zrzutem, bo pionowa lista
     zepchnęłaby obrazek poniżej pierwszego przewinięcia. */
  .ceo-demo__lista{
    position:static;
    flex-direction:row;
    overflow-x:auto;
    gap:8px;
    padding-bottom:8px;
  }
  .ceo-tab{width:auto;flex:0 0 auto;max-width:230px;background:#fff;border-color:var(--line)}
  .ceo-tab__pytanie{font-size:.94rem}
  .ceo-lupa__hint{display:inline;color:var(--red);font-weight:600}
}
@media (max-width:640px){
  .ceo-hero{padding:36px 0 16px}
  .ceo-hero__akcje .btn{width:100%;justify-content:center}
  .ceo-krok{grid-template-columns:1fr;gap:6px}
  .ceo-telefon{width:158px}
}