/* ===== KCZ Elements — tokeny marki + style komponentów ===== */
/* Tokeny dostępne globalnie, by natywne widgety stylowane klasami
   (.eyebrow, .btn-primary itd.) też miały paletę marki. */
:root{
  --white:#FFFFFF; --champagne:#D5CCBB; --champagne-soft:#EEEAE2;
  --gold:#C6A167; --gold-deep:#A7916B; --green:#1C362A; --green-soft:#2A4838;
  --graphite:#262626; --black:#000000;
  --ink:var(--graphite); --ink-soft:#5b5b5b;
  --line:rgba(38,38,38,.10); --line-2:rgba(38,38,38,.18);
  --shadow:0 30px 70px -40px rgba(38,38,38,.22);
  --shadow-sm:0 10px 28px -18px rgba(38,38,38,.14);
  --font:'Jost','Futura','Century Gothic',sans-serif;
  --ease-3d:cubic-bezier(.16,1,.3,1);
}

/* ===== Pasek postępu (page scroll) ===== */
.kcz-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:100;pointer-events:none}
.kcz-progress__bar{display:block;height:100%;background:var(--gold);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .12s linear}

/* ===== Marquee ===== */
.kcz-marquee{background:var(--champagne);color:var(--green);overflow:hidden;padding:30px 0;white-space:nowrap;position:relative;border-top:1px solid var(--gold-deep);border-bottom:1px solid var(--gold-deep);text-transform:uppercase;letter-spacing:.14em;font-size:.84rem;font-family:var(--font)}
.kcz-marquee__track{display:inline-flex;animation:kcz-mq 36s linear infinite;font-weight:500}
.kcz-marquee__track span{display:inline-flex;align-items:center;gap:42px;padding-left:42px}
.kcz-marquee__track span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}
@keyframes kcz-mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.kcz-marquee__track{animation:none}}

/* ===== Before / After ===== */
.kcz-ba-wrap{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:center;perspective:1400px;font-family:var(--font)}
.kcz-ba{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);user-select:none;touch-action:pan-y;--pos:50%}
.kcz-ba__after,.kcz-ba__before{position:absolute;inset:0;display:grid;place-items:center;background-size:cover;background-position:center}
.kcz-ba__after{background-color:var(--champagne)}
.kcz-ba__before{clip-path:inset(0 calc(100% - var(--pos)) 0 0);filter:saturate(.5) contrast(.95)}
.kcz-ba__before::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.20)}
.kcz-ba__lab{position:absolute;top:16px;font-size:.62rem;font-weight:700;letter-spacing:.22em;color:var(--white);background:rgba(28,54,42,.7);padding:7px 14px;border-radius:980px;backdrop-filter:blur(6px);z-index:2}
.kcz-ba__lab--l{left:16px}.kcz-ba__lab--r{right:16px}
.kcz-ba__handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--white);transform:translateX(-1px);box-shadow:0 0 0 1px rgba(28,54,42,.16);z-index:3}
.kcz-ba__handle::after{content:"⇆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:var(--white);color:var(--green);display:grid;place-items:center;font-size:1.15rem;box-shadow:var(--shadow-sm)}
.kcz-ba__cap{margin-bottom:24px}
.kcz-ba__cap strong{font-weight:600;font-size:1.4rem;display:block;margin-bottom:.5rem;letter-spacing:-.005em;color:var(--green)}
.kcz-ba__cap span{color:var(--ink-soft);line-height:1.6}
.kcz-ba__cases{display:flex;flex-direction:column;gap:10px}
.kcz-ba__case{text-align:left;background:var(--white);border:1.4px solid var(--line-2);border-radius:12px;padding:16px 20px;cursor:pointer;font:inherit;color:var(--ink-soft);transition:border-color .22s,color .22s,background .22s,transform .22s;font-weight:500}
.kcz-ba__case:hover{border-color:var(--gold);transform:translateX(4px)}
.kcz-ba__case.is-active{border-color:var(--green);color:var(--green);background:var(--champagne-soft);font-weight:600}
@media (max-width:980px){.kcz-ba-wrap{grid-template-columns:1fr;gap:36px}}