/* =====================================================================
   ŁUCZNIK 2026 — WARSTWA 20.0: rytm, skala, podziałka
   Paleta wzorca v2 + jeden ton tła: #F5F6F8 (tylko tło sekcji, nigdy tekst).
   Rytm sekcji: biała → jasna → granatowa. Ramka tylko na tym, co się klika.
   ===================================================================== */
:root{--tone:#F5F6F8;--panel-shadow:0 1px 2px rgba(38,34,97,.04),0 12px 32px rgba(38,34,97,.06)}

/* ---------- 1. Rytm tła sekcji ---------- */
body .hero{background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 62%,var(--tone) 100%)!important}
body .trust,body .finder,body .closeup,body .compare,body #pytania{background:var(--tone)!important}
body .effects,body .models,body .reviews{background:#FFFFFF!important}
body .trust,body .finder,body .effects,body .closeup,body .compare,body .models,body .reviews,body #pytania,body .final{border-top:0!important}
body .finder{padding-top:24px}
body .trust{padding-bottom:8px}
/* przejście tonalne z jasnej sekcji w granatową */
body .box{background-color:var(--navy);background-image:linear-gradient(180deg,var(--navy) 0%,#1d1a4f 100%)}

/* ---------- 2. Karty: ramka tylko na elementach klikanych ---------- */
body .trust-item,body .rv-list blockquote,body .fam,body .m-col,body .m-proj,body .cmp-common,body .final-box,body .faq-list details,body .finder-box,body .pw-box,body .cmp-table,body .cmp-card{border:0!important}
body .trust-item{background:#FFFFFF;box-shadow:var(--panel-shadow)!important}
body .finder-box,body .pw-box{background:#FFFFFF;box-shadow:var(--panel-shadow)!important;border-radius:28px}
body .faq-list details{background:#FFFFFF;box-shadow:0 1px 2px rgba(38,34,97,.05)!important}
body .faq-list details[open]{box-shadow:var(--panel-shadow)!important}
body .cmp-table,body .cmp-card{box-shadow:var(--panel-shadow)!important;background:#FFFFFF}
/* „Bez ryzyka”: granatowa linia nad kolumną (jak w identyfikacji), bez pudełek */
body .rv-list blockquote{background:transparent!important;border-top:2px solid var(--navy)!important;border-radius:0!important;padding:18px 0 6px!important}
/* karty linii na jasnym tle zamiast ramki */
body .fam,body .m-col{background:var(--tone)!important;border-radius:28px}
body .fam .facts span{background:#FFFFFF!important;border:0!important}
body .m-proj{background:#FFFFFF!important}
body .m-img{border:0!important;background:transparent!important}

/* ---------- 3. Efekty: mozaika (jedno duże zdjęcie + trzy mniejsze) ---------- */
@media(min-width:941px){
  .fx-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)!important;gap:22px 22px}
  .fx-grid .fx:nth-child(1){grid-row:span 2;display:flex;flex-direction:column}
  .fx-grid .fx:nth-child(1) .photo{aspect-ratio:auto;flex:1;min-height:420px}
  .fx-grid .fx:nth-child(1) h3{font-size:30px!important;letter-spacing:-.02em}
  .fx-grid .fx:nth-child(4){grid-column:span 2}
  .fx-grid .fx:nth-child(4) .photo{aspect-ratio:21/9}
}
@media(max-width:940px) and (min-width:621px){.fx-grid .fx:nth-child(1){grid-column:span 2}.fx-grid .fx:nth-child(1) .photo{aspect-ratio:16/9}}
@media(max-width:620px){.fx-grid .fx:nth-child(1) .photo{aspect-ratio:4/3}.fx-grid .fx:nth-child(1) h3{font-size:24px!important}}

/* ---------- 4. Linie START: jedna duża maszyna + miniatury ---------- */
.fam-tiles.has-stage{display:flex!important;flex-direction:column;gap:14px}
.fam-stage{margin:0;background:#FFFFFF;border-radius:24px;padding:18px 18px 16px;text-align:center}
.fam-stage img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}
.fam-stage figcaption{font-size:15px;font-weight:600;letter-spacing:.06em;color:var(--navy);margin-top:4px}
.fam-stage figcaption small{display:block;font-size:14px;font-weight:400;letter-spacing:0;margin-top:2px;color:var(--navy)}
.fam-thumbs{display:flex;gap:10px;flex-wrap:wrap}
.fam-thumb{flex:1 1 0;min-width:72px;min-height:48px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px 10px;background:#FFFFFF;border:1px solid var(--line);border-radius:16px;cursor:pointer;font:inherit;font-size:13px;font-weight:600;color:var(--navy)}
.fam-thumb img{width:100%;max-width:120px;height:auto;aspect-ratio:3/2;object-fit:contain}
.fam-thumb[aria-pressed="true"]{border:2px solid var(--navy)}
.fam-thumb:hover{border-color:var(--navy)}
@media(min-width:1001px){body .fam{grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr)!important;padding:48px!important}}

/* ---------- 5. Podziałka jako konstrukcja ---------- */
.scale-xl{position:relative;display:flex;justify-content:space-between;align-items:center;height:44px;max-width:620px;margin:0 0 26px}
.scale-xl i{display:block;flex:none;width:2px;height:14px;background:var(--navy)}
.scale-xl i.M{height:24px}
.scale-xl .ind{position:absolute;top:50%;left:50%;width:4px;height:44px;background:var(--cyan);transform:translate(-50%,-50%)}
.scale-xl.on-dark i{background:#FFFFFF}
@media(max-width:620px){.scale-xl{max-width:100%}.scale-xl i:nth-child(even){display:none}}
/* pasek postępu w nagłówku – wskaźnik idzie z przewijaniem */
.scroll-scale{position:absolute;left:0;right:0;bottom:-1px;height:9px;max-width:none;margin:0;padding:0 max(24px,calc((100% - 1240px)/2));align-items:flex-end;pointer-events:none}
.scroll-scale i{width:1px;height:4px;background:var(--line)}
.scroll-scale i.M{height:7px;background:#C9CCD3}
.scroll-scale .ind{top:auto;bottom:0;width:3px;height:9px;transform:translateX(-50%);left:0;transition:none}
@media(max-width:620px){.scroll-scale i:nth-child(odd):not(.M){display:none}}

/* ---------- 6. Zakończenie: granatowy pas ---------- */
body .final.final-dark{background:var(--navy)!important;padding:96px 0}
body .final-dark .final-box{background:transparent!important;box-shadow:none!important;padding:0!important}
body .final-dark h2,body .final-dark p{color:#FFFFFF!important}
body .final-dark .eyebrow{color:var(--cyan)!important}
body .final-dark h2{font-size:clamp(34px,4.2vw,56px)}
body .final-dark .scale{display:none}
.btn.btn-on-dark{background:#FFFFFF!important;color:var(--navy)!important;border-color:#FFFFFF!important}
.btn.btn-on-dark:hover{background:var(--cyan)!important;border-color:var(--cyan)!important}
footer{border-top:1px solid rgba(255,255,255,.18)}

/* ---------- 7. Większa skala nagłówków sekcji (kontrast skali) ---------- */
@media(min-width:941px){
  .section-head h2{font-size:clamp(38px,3.6vw,54px)}
  .box-copy h2{font-size:clamp(40px,3.8vw,58px)}
}
.section-head{margin-bottom:36px}
/* poprawki po przeglądzie zrzutów */
body .fam.soft{background:var(--tone)!important}
.fx{display:flex;flex-direction:column;align-items:flex-start}
.fx .photo{align-self:stretch}
body .final-dark .btn.btn-on-dark{background:#FFFFFF!important;color:var(--navy)!important;border-color:#FFFFFF!important}
body .final-dark .btn.btn-on-dark:hover{background:var(--cyan)!important;border-color:var(--cyan)!important}
@media(max-width:1000px){body .fam{grid-template-columns:minmax(0,1fr)!important;padding:28px 20px!important;gap:22px}}
@media(max-width:620px){.fam-thumb{min-width:0;font-size:12px}.fam-thumbs{gap:8px}}
@media(max-width:1000px){body .fam .fam-tiles{order:-1}}