/* Strona główna, wersja D (wybór Adriana 7.10.2026): zakładki branż i pasek kart.
   Wzorzec statyczny: spectra-one/strona-glowna-opcje/d-zakladki-pasek.html.
   Galeria gotowych stron wzoru ma osobny arkusz (strona-glowna-gotowe.css). */

/* Podstawa (podstawa.html) daje <main> wcięcie 48/20 px, przez które ciemne pasy
   nie dochodziły do krawędzi, a pasek kart nie wystawał za ekran jak we wzorcu D. */
.strona-startowa main{padding:0}

/* — Nagłówek sekcji szablonów — */
.top{padding:130px max(24px,6vw) 70px;position:relative}
.top h1{font-size:clamp(38px,5.4vw,76px);line-height:.98;letter-spacing:-.045em;margin:0 0 18px}
.top h1 em{font-style:normal;color:var(--purple)}
.top .lead{font-size:18px;line-height:1.55;max-width:640px;color:#3b3c36;margin:0}
.top .lead b{color:var(--ink)}
.top-d{padding-right:0;overflow:hidden}
.d-head{padding-right:max(24px,6vw);max-width:900px}

/* — Zakładki: radia + :has(), działają bez JavaScriptu — */
.zakladki{display:flex;gap:8px;flex-wrap:wrap;margin:34px 0 26px;padding:0 max(24px,6vw) 0 0;border:0;min-width:0}
.zk-legenda{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.zk-radio{position:absolute;width:1px;height:1px;margin:0;opacity:0}
.zakladki label,.zk-wkrotce{display:inline-flex;align-items:center;gap:4px;margin:0;min-height:44px;font:700 14px/1.2 'DM Sans',sans-serif;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:99px;padding:0 16px}
.zakladki label{cursor:pointer}  /* podstawa.html: label{display:block;margin…} */
.zakladki label b{color:var(--purple)}
.zk-radio:checked+label{background:var(--ink);color:#fff;border-color:var(--ink)}
.zk-radio:checked+label b{color:var(--lime)}
.zk-radio:focus-visible+label{outline:3px solid #5839c8;outline-offset:3px}
.zk-wkrotce{opacity:.45;border-style:dashed}

/* — Pasek kart — */
.pasek{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px max(24px,6vw) 22px 2px;scrollbar-width:thin}
.pasek:focus-visible{outline:3px solid #5839c8;outline-offset:2px}
.wz{position:relative;display:flex;flex-direction:column;gap:12px;color:var(--ink);min-width:0;flex:0 0 min(420px,78vw);scroll-snap-align:start}
.wz-link{display:flex;flex-direction:column;gap:12px;color:inherit;text-decoration:none}
.wz-shot{display:block;overflow:hidden;border-radius:14px;background:#ddd;aspect-ratio:1.34;box-shadow:0 1px 0 var(--line),0 18px 40px #11120f14}
.wz-shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .7s}
.wz-link:hover .wz-shot img{transform:scale(1.04)}
.wz-txt{display:grid;gap:2px}
.wz-txt small{font:700 11px 'Manrope',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--purple)}
.wz-txt b{font:700 20px 'Manrope',sans-serif;letter-spacing:-.02em}
.wz-txt i{font-style:normal;color:var(--muted);font-size:14px}
.wz-go{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--lime);color:var(--ink);font-weight:700;opacity:0;transform:translateY(6px);transition:.3s}
.wz-link:hover .wz-go,.wz-link:focus-visible .wz-go{opacity:1;transform:none}
.wz-komb{margin:0;font-size:13px;line-height:1.45;color:var(--muted)}
.wz-komb b{font:800 15px 'Manrope',sans-serif;color:var(--ink)}
.wz-komb span{display:block;margin-top:2px}
.wz-gotowe{align-self:flex-start;display:inline-flex;gap:10px;align-items:center;padding:10px 16px;border:1px solid var(--ink);border-radius:99px;font:700 13px 'DM Sans',sans-serif;color:var(--ink);text-decoration:none;transition:background .2s,color .2s}
.wz-gotowe span{color:var(--purple)}
.wz-gotowe:hover{background:var(--ink);color:#fff}
.wz-gotowe:hover span{color:var(--lime)}

/* — Pod paskiem — */
.d-dol{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;padding-right:max(24px,6vw)}
.wz-rozwoj{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;margin:0}
.wz-rozwoj span{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px #c7ff2f40;flex:none}
.d-darmo{margin:0;font-size:14px}

/* — Kroki i promocja. Poprawka z zrzutu Adriana: pod krokami zostawało 130 px
   pustego ciemnego pasa, a karta promocji stykała się z krawędzią ciemnej sekcji.
   Krótszy dół kroków i wyraźny, równy odstęp nad kartą. — */
.strona-startowa .process{padding-bottom:clamp(56px,6vw,84px)}
.promo-pas{padding-top:clamp(56px,6vw,84px);padding-bottom:clamp(56px,6vw,84px)}
.promo{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) auto;gap:36px;align-items:center;background:var(--ink);color:var(--paper);border-radius:28px;padding:48px max(28px,4vw)}
.promo h2{margin:0;color:#fff;font-size:clamp(36px,3.6vw,56px)}
.promo h2 em{color:var(--lime);font-style:normal}
.promo p{margin:0;color:#c9c8bf;line-height:1.6}
.promo .kicker{color:var(--lime)}
.promo .button{justify-self:start}

@media (max-width:1100px){.promo{grid-template-columns:1fr}}
@media (max-width:640px){
  .top{padding-top:110px}
  .top .lead{font-size:16px}
  .promo{padding:36px 24px;border-radius:22px}
  .promo .button{justify-self:stretch}
}