/* =========================================================================
   Biuro Rachunkowe „Bilans" — Jarosław Osika, Zamość
   Kolory semantyczne: --brand / --accent / --paper …
   Fonty: Fraunces (nagłówki), Manrope (tekst), IBM Plex Mono (liczby)
   ========================================================================= */

/* ---------- PALETA ---------- */
:root{
  --ink:#0B1F19;
  --brand:#123528;
  --brand-2:#1B4A38;
  --brand-3:#2A5C47;
  --accent:#C9A24E;        /* akcent na ciemnym / przyciski */
  --accent-ink:#8A6B24;    /* akcent-tekst na JASNYM (kontrast AA) */
  --accent-soft:#E4CE9A;   /* akcent na ciemnym tekst */
  --accent-btn-fg:#231a06; /* tekst na przycisku akcentowym */
  --paper:#F5F1E7;
  --cream:#FBF8F0;
  --muted:#4A6152;         /* tekst pomocniczy na jasnym */
  --muted-dark:#9DB6A8;    /* tekst pomocniczy na ciemnym */
  --line-dark:rgba(233,224,200,.16);
  --line-light:rgba(18,53,40,.12);
  --ph:#DDD6C4;            /* placeholder-tło (zdjęcia) */

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;
  --wrap:1180px;--radius:16px;--ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:clamp(1rem,.96rem + .3vw,1.12rem);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;transition:background .4s var(--ease)}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:600;line-height:1.05;letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.2rem,4vw,2.4rem)}
#ofirmie,#oferta,#cennik,#dlakogo,#proces,#dlaczego,#aktualnosci,#wskazowki,#linki,#hobby,#kontakt{scroll-margin-top:84px}
.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--brand);color:var(--paper);padding:.7rem 1.1rem;border-radius:0 0 10px 0}
.skip-link:focus{left:0}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}

.eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:.6rem;font-weight:500}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6}
.eyebrow--accent{color:var(--accent-ink)}
.muted{color:var(--muted);opacity:.9}
.acc{color:var(--accent-ink)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font-family:var(--sans);font-weight:700;font-size:.98rem;padding:.85rem 1.4rem;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s,border-color .25s;white-space:nowrap}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn--lg{padding:1.05rem 1.7rem;font-size:1.02rem}
.btn--block{width:100%;padding:1.05rem 1.5rem}
.btn--accent{background:var(--accent);color:var(--accent-btn-fg);border-color:var(--accent)}
.btn--accent:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 12px 26px -12px var(--accent)}
.btn--brand{background:var(--brand);color:var(--paper);border-color:var(--brand)}
.btn--brand:hover{background:var(--brand-2);transform:translateY(-2px)}
.btn--ghost-light{background:transparent;color:var(--paper);border-color:var(--line-dark)}
.btn--ghost-light:hover{border-color:var(--accent-soft);background:rgba(233,224,200,.06);transform:translateY(-2px)}

/* ============================ HEADER ============================ */
.site-header{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding:.8rem clamp(1.2rem,4vw,2.4rem);background:color-mix(in srgb,var(--paper) 84%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line-light)}
.brand{display:inline-flex;align-items:center;gap:.6rem}
.brand__mark{width:38px;height:38px}
.brand__name{font-family:var(--serif);font-weight:600;font-size:1.42rem;letter-spacing:-.02em;color:var(--brand)}
.brand__name em{color:var(--accent-ink);font-style:normal}
.nav{display:flex;align-items:center;gap:1.3rem}
.nav__links{display:flex;align-items:center;gap:1.3rem}
.nav__links a{font-weight:600;font-size:.92rem;color:var(--brand);position:relative;padding:.2rem 0}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--accent);transition:width .3s var(--ease)}
.nav__links a:hover::after{width:100%}
.nav__right{display:flex;align-items:center;gap:1rem}
.nav__phone .txt{font-variant-numeric:tabular-nums}


.nav__toggle{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:none;cursor:pointer}
.nav__toggle span{display:block;width:24px;height:2px;background:var(--brand);transition:.3s var(--ease)}

/* ============================ HERO ============================ */
.hero{position:relative;background:radial-gradient(120% 90% at 85% -10%,var(--brand-2) 0%,transparent 55%),radial-gradient(90% 80% at 0% 110%,var(--ink) 0%,transparent 50%),var(--brand);color:var(--paper);overflow:hidden;padding:clamp(2rem,4vw,3.4rem) 0 clamp(2.2rem,4.6vw,3.9rem)}
.hero__grain{position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.hero__inner{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.2rem,4vw,2.4rem);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.hero__copy{max-width:38ch}
.hero__title{font-size:clamp(3.1rem,4.2rem + 3vw,6.6rem);font-weight:600;letter-spacing:-.03em;margin:1.3rem 0 0}
.hero__title .acc{color:var(--accent);font-style:italic;font-weight:500}
.hero__title .acc-dot{color:var(--accent)}
.hero__lead{margin-top:1.5rem;font-size:clamp(1.05rem,1rem + .3vw,1.22rem);color:var(--paper);opacity:.86;max-width:46ch;line-height:1.6}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.hero__reassure{margin-top:1.6rem;font-size:.9rem;color:var(--muted-dark);display:flex;align-items:center;gap:.55rem}
.hero__reassure .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 4%,transparent)}}
.hero__scrollcue{position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);z-index:2;font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-dark);display:flex;flex-direction:column;align-items:center;gap:.5rem}
.hero__scrollcue span{width:1px;height:34px;background:linear-gradient(var(--accent),transparent);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.5);opacity:.4;transform-origin:top}50%{transform:scaleY(1);opacity:1;transform-origin:top}}

/* WAGA */
.scale{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:1rem}
.scale__caption{display:flex;flex-direction:column;align-items:center;gap:.3rem;margin-bottom:.4rem;min-height:74px;justify-content:flex-end}
.scale__eq{font-family:var(--serif);font-size:3.4rem;line-height:1;color:var(--accent);font-weight:600;opacity:0;transform:scale(.4);transition:opacity .5s var(--ease),transform .6s var(--ease);text-shadow:0 0 26px color-mix(in srgb,var(--accent) 50%,transparent)}
.scale.is-balanced .scale__eq{opacity:1;transform:scale(1)}
.scale__status{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-dark);opacity:0;transition:opacity .5s ease .25s}
.scale.is-balanced .scale__status{opacity:1;color:var(--accent-soft)}
/* --- waga jako SVG: belka obraca się o --rot, miski wiszą pionowo (kontr-rotacja) --- */
.scale{--rot:-11deg}
.scale.is-balanced{--rot:0deg}
.scale__svg{width:min(520px,100%);height:auto;overflow:visible;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.35))}
.beam{transform-box:view-box;transform-origin:230px 96px;transform:rotate(var(--rot));
  transition:transform 1.7s var(--ease);will-change:transform}
.hang{transform-box:view-box;transform:rotate(calc(-1 * var(--rot)));
  transition:transform 1.7s var(--ease)}
.hang--l{transform-origin:60px 96px}
.hang--r{transform-origin:400px 96px}

/* konstrukcja */
.beam__bar{stroke:var(--accent-ink);stroke-width:.6;stroke-opacity:.5}
.beam__ticks line{stroke:var(--accent-ink);stroke-width:1.4;stroke-opacity:.75;stroke-linecap:round}
.beam__knob{fill:var(--accent-soft);stroke:var(--accent-ink);stroke-width:1}
.needle{fill:var(--accent-soft);opacity:.95}
.pivot__knife{stroke:var(--accent-ink);stroke-width:.6;stroke-opacity:.6}
.pivot__cap{fill:var(--accent);stroke:var(--accent-soft);stroke-width:1.6;
  filter:drop-shadow(0 0 12px color-mix(in srgb,var(--accent) 55%,transparent))}
.pivot__dot{fill:var(--accent-soft)}
.column__ring{fill:var(--accent-soft);opacity:.85}
.base__inner{fill:var(--accent-ink);opacity:.45}
.cords path{stroke:var(--accent);stroke-width:1.1;stroke-opacity:.75;fill:none}
.dish{stroke:var(--accent-soft);stroke-width:1;stroke-opacity:.9}
.dish__side{fill:var(--accent-ink);opacity:.55}
.dish__inner{fill:none;stroke:var(--accent-ink);stroke-width:.8;stroke-opacity:.4}
.dish__gleam{fill:none;stroke:#fff;stroke-width:1.4;stroke-opacity:.32;stroke-linecap:round}

/* --- UKRYTE WEJŚCIE DO PANELU (prawa szalka wagi) ---
   Bez napisu i bez ikony: klient wie, gdzie kliknąć. Na hover miska lekko
   „ożywa" (mocniejszy połysk + rozjaśnienie), a klawiaturowy focus MUSI być
   wyraźny, bo to jedyna droga do panelu dla kogoś, kto nie używa myszy. */
.pan-link{cursor:pointer}
.pan-link .dish,.pan-link .dish__side,.pan-link .dish__inner,
.pan-link .dish__gleam,.pan-link text{transition:filter .28s var(--ease),stroke-opacity .28s}
.pan-link:hover .dish__gleam,.pan-link:focus-visible .dish__gleam{stroke-opacity:.7}
.pan-link:hover .dish,.pan-link:focus-visible .dish{filter:brightness(1.07)}
.pan-link:hover .pan__val--ok,.pan-link:focus-visible .pan__val--ok{filter:brightness(1.18)}
.pan-link:focus-visible{outline:3px solid var(--accent-soft);outline-offset:6px;border-radius:12px}
@media (prefers-reduced-motion:reduce){
  .pan-link .dish,.pan-link .dish__side,.pan-link .dish__inner,
  .pan-link .dish__gleam,.pan-link text{transition:none}
}
.beam__shine{stroke:var(--accent-soft);stroke-width:1;stroke-opacity:.55;stroke-linecap:round}
.beam__rivet{fill:var(--accent-ink);opacity:.6}
.beam__eye{fill:none;stroke:var(--accent-ink);stroke-width:1.1;stroke-opacity:.7}

/* tarcza ze skalą */
.dial__arc{fill:none;stroke:var(--accent);stroke-opacity:.28;stroke-width:1;stroke-dasharray:2 5}
.dial__ticks line{stroke:var(--accent);stroke-opacity:.45;stroke-width:1.4;stroke-linecap:round}
.dial__tick--mid{stroke:var(--accent-soft);stroke-opacity:.9;stroke-width:2}

/* teksty na szalkach */
.pan__val{fill:var(--accent-soft);font-family:var(--mono);font-weight:600;font-size:22px;
  text-anchor:middle;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.pan__val--ok{fill:var(--accent);font-family:var(--serif);font-size:30px}
/* same dolary zamiast kwoty — szerszy odstęp, żeby nie zlewały się w jedną plamę */
.pan__val--kasa{letter-spacing:.06em}
.pan__label{fill:var(--muted-dark);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.13em;text-anchor:middle}
.pan__unit{fill:var(--muted-dark);font-family:var(--sans);font-size:10px;text-anchor:middle;opacity:.85}
.needle{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 65%,transparent))}
.scale__foot{margin-top:.2rem;text-align:center;font-size:.82rem;color:var(--muted-dark);max-width:32ch}

/* ============================ SECTION HEAD ============================ */
.section__head{max-width:62ch;margin-bottom:clamp(1.2rem,2.4vw,2rem)}
.section__head--center{margin-inline:auto;text-align:center}
.section__head--center .eyebrow{justify-content:center}
.section__title{font-size:clamp(1.9rem,1.5rem + 2.4vw,3.3rem);margin-top:1rem;color:var(--brand)}
.lead{margin-top:1rem;color:var(--muted);font-size:1.08rem;max-width:56ch}
.section__head--center .lead{margin-inline:auto}

/* ============================ STATS ============================ */
.stats{background:var(--cream);border-bottom:1px solid var(--line-light)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{background:var(--cream);padding:clamp(1.6rem,3vw,2.6rem) 1.2rem;text-align:center;border-left:1px solid var(--line-light)}
.stat:first-child{border-left:none}
.stat b{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(2.2rem,1.8rem + 2.2vw,3.4rem);color:var(--brand);line-height:1;letter-spacing:-.02em}
.stat b em{font-style:normal}
.stat b sup{font-family:var(--mono);font-size:.34em;font-weight:500;color:var(--accent-ink);vertical-align:super;margin-left:.12em;letter-spacing:0}
.stat span{display:block;margin-top:.7rem;font-size:.84rem;color:var(--muted);letter-spacing:.01em}

/* ============================ O FIRMIE ============================ */
.about{background:var(--paper);padding:clamp(2rem,4vw,3.5rem) 0}
.about__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.about__portrait{position:relative}
.about__photo{aspect-ratio:4/5;border-radius:var(--radius);background:linear-gradient(160deg,var(--ph),color-mix(in srgb,var(--ph) 70%,var(--brand)));display:flex;align-items:center;justify-content:center;border:1px solid var(--line-light)}
.about__photo-note{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;opacity:.8}
.about__badge{position:absolute;right:-12px;bottom:-16px;background:var(--brand);color:var(--paper);border-radius:14px;padding:1rem 1.2rem;max-width:200px;box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.about__badge b{display:block;font-family:var(--serif);font-size:1.9rem;color:var(--accent-soft);line-height:1}
.about__badge span{display:block;margin-top:.35rem;font-size:.76rem;color:var(--paper);opacity:.85;line-height:1.35}
.about__copy .section__title{margin:1rem 0 1.2rem}
.about__copy p{color:var(--muted);margin-bottom:1rem;max-width:52ch}
.about__copy .lead{color:var(--ink);font-size:1.14rem}
.about__points{margin-top:1.4rem;display:flex;flex-direction:column;gap:.7rem}
.about__points li{display:flex;gap:.7rem;align-items:flex-start;color:var(--ink);font-weight:500}
.about__points li span{color:var(--accent-ink);font-weight:800;flex:none}

/* Polisy OC — konkretne kwoty jako dowód, że ryzyko klienta jest zabezpieczone */
.polisy{
  margin-top:1.7rem;padding:1.1rem 1.3rem;
  background:var(--cream);border:1px solid var(--line-light);
  border-left:3px solid var(--accent);border-radius:var(--radius);
}
.polisy__tytul{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:.85rem;
}
.polisy__lista{display:flex;flex-wrap:wrap;gap:1.6rem}
.polisy__lista li{display:flex;flex-direction:column;gap:.15rem}
.polisy__lista b{
  font-family:var(--serif);font-size:clamp(1.15rem,1rem + .5vw,1.4rem);
  font-weight:600;color:var(--accent-ink);font-variant-numeric:tabular-nums;line-height:1.1;
}
.polisy__lista span{font-size:.85rem;color:var(--muted)}
@media (max-width:520px){ .polisy__lista{gap:1rem 1.4rem} }

/* ============================ OFERTA ============================ */
.services{background:var(--brand);color:var(--paper);padding:clamp(2rem,4vw,3.5rem) 0}
.services .eyebrow--accent{color:var(--accent-soft)}
.services .section__title{color:var(--paper)}
/* ─── Panteon: pięć filarów jako kolumnada (skrót do sekcji niżej) ─── */
.panteon{
  --kamien:color-mix(in srgb,var(--paper) 82%,var(--brand));
  --kamien-c:color-mix(in srgb,var(--paper) 52%,var(--brand));
  --kamien-g:color-mix(in srgb,var(--paper) 94%,var(--brand));
  --kol:5;                            /* liczba filarów */
  --trzon:clamp(34px,3.4vw,50px);     /* średnica kolumny */
  max-width:min(720px,100%);margin:clamp(1.4rem,3vw,2.4rem) auto clamp(1.8rem,3.5vw,2.8rem);
}
/* fronton opiera się dokładnie na skrajnych kolumnach, stylobat jest od niego szerszy */
.panteon__fronton{
  position:relative;margin-inline:auto;
  width:calc(100% - (100% / var(--kol)) + var(--trzon));
}
/* tympanon — trójkątny szczyt z rokiem założenia po rzymsku */
.panteon__tympanon{
  position:relative;height:clamp(44px,5.1vw,74px);
  background:linear-gradient(160deg,var(--kamien-g),var(--kamien) 55%,var(--kamien-c));
  clip-path:polygon(50% 0,100% 100%,0 100%);
  display:flex;align-items:flex-end;justify-content:center;
}
.panteon__tympanon span{
  font-family:var(--mono);font-size:clamp(.6rem,.5rem + .35vw,.78rem);letter-spacing:.24em;
  color:color-mix(in srgb,var(--brand) 88%,transparent);
  padding-bottom:.5em;text-indent:.24em;
}
/* entablatura: fryz u góry, architraw pod nim */
.panteon__belka{
  height:clamp(15px,1.8vw,22px);
  background:linear-gradient(
    var(--kamien-g) 0 2px,
    var(--kamien) 2px 52%,
    var(--kamien-c) 52% 55%,
    color-mix(in srgb,var(--kamien) 92%,var(--brand)) 55% 100%);
  box-shadow:0 2px 0 var(--kamien-c);
}

/* gap:0 — cokoły kolumn stykają się i tworzą ciągły stylobat */
.panteon__rzad{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(var(--kol),1fr);gap:0;align-items:end}

.kolumna{display:block;text-decoration:none;text-align:center}
.kolumna__trzon{
  display:block;height:clamp(104px,13vw,196px);margin:0 auto;width:var(--trzon);
  /* kanelowanie — pionowe żłobienia doryckiej kolumny */
  background:
    repeating-linear-gradient(90deg,
      var(--kamien-c) 0 1px, var(--kamien) 1px 6px, var(--kamien-g) 6px 7px, var(--kamien) 7px 12px);
  border-top:clamp(5px,.7vw,8px) solid var(--kamien-g);   /* kapitel */
  transform-origin:50% 100%;
  /* osobne właściwości scale/translate — wyrastanie kolumny nie kłóci się z hoverem */
  transition:scale .5s var(--ease),translate .35s var(--ease),filter .35s var(--ease),border-color .35s var(--ease);
}
/* kawałek podłogi — sąsiednie tworzą jedną krepidomę pod całą kolumnadą */
.kolumna__cokol{
  display:block;width:100%;height:clamp(7px,.8vw,10px);
  background:var(--kamien);border-top:2px solid var(--kamien-g);
  box-shadow:0 10px 24px -14px rgba(0,0,0,.7);
}
.kolumna__nazwa{
  display:block;margin-top:.7rem;font-family:var(--mono);
  font-size:clamp(.56rem,.48rem + .28vw,.7rem);letter-spacing:.1em;text-transform:uppercase;line-height:1.5;
  color:color-mix(in srgb,var(--paper) 62%,transparent);
  transition:color .3s var(--ease);
}
.kolumna:hover .kolumna__trzon,.kolumna:focus-visible .kolumna__trzon{
  filter:brightness(1.14);border-top-color:var(--accent);translate:0 -4px
}
.kolumna:hover .kolumna__nazwa,.kolumna:focus-visible .kolumna__nazwa{color:var(--accent-soft)}
/* kolumna filaru, który jest właśnie na ekranie */
.kolumna--akt .kolumna__trzon{border-top-color:var(--accent);filter:brightness(1.08)}
.kolumna--akt .kolumna__nazwa{color:var(--accent-soft)}

/* kolumny wyrastają ze stylobatu, gdy sekcja wchodzi w widok */
.panteon.reveal .kolumna__trzon{scale:1 .04}
.panteon.reveal.in .kolumna__trzon{scale:1 1}
.panteon.reveal.in li:nth-child(1) .kolumna__trzon{transition-delay:.05s}
.panteon.reveal.in li:nth-child(2) .kolumna__trzon{transition-delay:.13s}
.panteon.reveal.in li:nth-child(3) .kolumna__trzon{transition-delay:.21s}
.panteon.reveal.in li:nth-child(4) .kolumna__trzon{transition-delay:.29s}
.panteon.reveal.in li:nth-child(5) .kolumna__trzon{transition-delay:.37s}

/* filar wskazany kliknięciem w kolumnę — chwilowe podświetlenie */
.svc--wyroz{animation:filarBlysk 1.6s var(--ease)}
@keyframes filarBlysk{0%,100%{background:transparent}22%{background:color-mix(in srgb,var(--accent) 9%,transparent)}}

@media (max-width:760px){.panteon{display:none}}
@media (prefers-reduced-motion:reduce){
  .panteon.reveal .kolumna__trzon,.panteon.reveal.in .kolumna__trzon{scale:1;transition:none}
  .svc--wyroz{animation:none}
}

.svc{display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,3vw,2.2rem);padding:clamp(1.6rem,3vw,2.4rem) 0;border-top:1px solid var(--line-dark);scroll-margin-top:90px}
.svc__no span{font-family:var(--mono);font-size:1rem;color:var(--accent);border:1px solid var(--line-dark);border-radius:50%;width:52px;height:52px;display:flex;align-items:center;justify-content:center;transition:color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
/* najechanie na filar podświetla jego numer na zielono */
.svc:hover .svc__no span,
.svc:focus-within .svc__no span{
  color:#5FBF7F;border-color:#5FBF7F;
  box-shadow:0 0 0 4px color-mix(in srgb,#5FBF7F 16%,transparent);
}
.svc__main h3{font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);color:var(--paper);margin-bottom:.5rem}
.svc__main>p{color:color-mix(in srgb,var(--paper) 78%,transparent);max-width:62ch;font-size:.98rem;margin-bottom:1rem}
.svc__list{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem 1.6rem;max-width:64ch}
.svc__list li{position:relative;padding-left:1.3rem;color:color-mix(in srgb,var(--paper) 82%,transparent);font-size:.94rem}
.svc__list li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.svc__tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--accent-soft);border:1px solid var(--line-dark);border-radius:999px;padding:.32rem .7rem}
.svc-extra{margin-top:clamp(2rem,4vw,3rem);padding-top:clamp(1.6rem,3vw,2.2rem);border-top:1px solid var(--line-dark)}
.svc-extra .eyebrow--accent{color:var(--accent-soft)}
.svc-extra__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:1.4rem}
.svc-extra__grid b{display:block;color:var(--paper);font-family:var(--serif);font-size:1.16rem;margin-bottom:.35rem}
.svc-extra__grid span{color:color-mix(in srgb,var(--paper) 72%,transparent);font-size:.9rem}

/* ============================ CENNIK ============================ */
.pricing{background:var(--cream);padding:clamp(2rem,4vw,3.5rem) 0}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.price-card{background:var(--paper);border:1px solid var(--line-light);border-radius:var(--radius);padding:1.6rem 1.5rem;transition:transform .3s var(--ease),box-shadow .3s}
.price-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(0,0,0,.3)}
.price-card h3{font-size:1.3rem;color:var(--brand);margin-bottom:1rem;padding-bottom:.8rem;border-bottom:2px solid var(--accent)}
.price-list li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--line-light);font-size:.92rem}
.price-list li:last-child{border-bottom:none}
.price-list span{color:var(--muted)}
.price-list b{font-family:var(--mono);font-weight:600;color:var(--brand);white-space:nowrap;font-size:.9rem}
.price-note{text-align:center;margin-top:2rem;color:var(--muted)}
.price-note a{color:var(--accent-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ============================ DLA KOGO ============================ */
.audience{background:var(--paper);padding:clamp(2rem,4vw,3.5rem) 0}
.audience__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.audience__intro .section__title{margin-top:1rem}
.audience__intro p{margin:1.2rem 0 2rem;color:var(--muted);max-width:42ch}
.audience__list{display:flex;flex-direction:column}
.audience__list li{display:flex;gap:1.1rem;padding:1.35rem 0;border-top:1px solid var(--line-light)}
.audience__list li:last-child{border-bottom:1px solid var(--line-light)}
.audience__tick{font-family:var(--mono);color:var(--accent-ink);font-size:1.2rem;line-height:1.4;flex:none;transition:transform .3s var(--ease)}
.audience__list li:hover .audience__tick{transform:translateX(5px)}
.audience__list b{display:block;color:var(--brand);font-family:var(--serif);font-size:1.22rem;font-weight:600;margin-bottom:.2rem}
.audience__list span{color:var(--muted);font-size:.95rem}

/* ============================ PROCES ============================ */
.process{background:var(--cream);padding:clamp(2rem,4vw,3.5rem) 0}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.4vw,2rem)}
.step{position:relative;padding-top:1.6rem;border-top:2px solid var(--line-light)}
.step::before{content:"";position:absolute;top:-2px;left:0;width:36%;height:2px;background:var(--accent)}
.step__no{font-family:var(--mono);font-size:.9rem;color:var(--accent-ink);font-weight:600;letter-spacing:.1em}
.step h3{font-size:1.3rem;color:var(--brand);margin:.7rem 0 .55rem}
.step p{color:var(--muted);font-size:.96rem}

/* ============================ DLACZEGO ============================ */
.why{background:var(--brand);color:var(--paper);padding:clamp(2rem,4vw,3.5rem) 0}
.why .eyebrow--accent{color:var(--accent-soft)}
.why .section__title{color:var(--paper)}
.why__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.4vw,1.8rem);margin-top:1rem}
.feat{padding:1.8rem 1.5rem;border-radius:var(--radius);background:linear-gradient(180deg,rgba(233,224,200,.05),rgba(233,224,200,.02));border:1px solid var(--line-dark);transition:transform .3s var(--ease),border-color .3s}
.feat:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.feat__icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);margin-bottom:1.1rem}
.feat__icon svg{width:26px;height:26px}
.feat h3{font-size:1.2rem;color:var(--paper);margin-bottom:.5rem}
.feat p{color:color-mix(in srgb,var(--paper) 76%,transparent);font-size:.92rem}

/* ============================ AKTUALNOŚCI ============================ */
.news{background:var(--cream);padding:clamp(2rem,4vw,3.5rem) 0}
/* ---------- karuzela wpisów ---------- */
.news__ster{display:flex;gap:.6rem;justify-content:flex-end;margin-bottom:1rem}
.news__strzalka{
  width:44px;height:44px;border-radius:50%;flex:none;
  border:1.5px solid var(--line-light);background:transparent;color:var(--brand);
  display:grid;place-items:center;cursor:pointer;
  transition:background .25s,border-color .25s,color .25s,transform .2s,opacity .25s;
}
.news__strzalka svg{width:20px;height:20px}
.news__strzalka:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:var(--accent-btn-fg);transform:translateY(-2px)}
.news__strzalka:disabled{opacity:.3;cursor:default}

.news__tor{
  display:flex;gap:1.4rem;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:.4rem;
  scrollbar-width:none;                  /* systemowy chowamy — mamy własny niżej */
}
.news__tor::-webkit-scrollbar{display:none}
.news__tor>.post{flex:0 0 clamp(270px,31.5%,400px);scroll-snap-align:start}

/* własny pasek — zawsze widoczny, można go chwycić i przeciągnąć */
.news__pasek{
  position:relative;height:8px;border-radius:99px;
  background:var(--line-light);margin-top:.9rem;cursor:pointer;
  touch-action:none;
}
.news__kciuk{
  position:absolute;top:0;left:0;height:100%;min-width:40px;
  border-radius:99px;background:var(--accent);
  transition:filter .2s;
}
.news__pasek:hover .news__kciuk{filter:brightness(1.08)}
.news__kciuk.chwycony{filter:brightness(1.15)}
@media (prefers-reduced-motion:reduce){.news__tor{scroll-behavior:auto}}
.post{background:var(--paper);border:1px solid var(--line-light);border-radius:var(--radius);padding:1.8rem;display:flex;flex-direction:column}
.post__meta{display:flex;gap:.7rem;align-items:center;margin-bottom:1rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.post__cat{background:var(--accent);color:var(--accent-btn-fg);padding:.2rem .6rem;border-radius:999px;font-weight:600}
.post h3{font-size:1.4rem;color:var(--brand);margin-bottom:.7rem}
.post p{color:var(--muted);font-size:.96rem;margin-bottom:1.2rem}
.post__link{margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;color:var(--accent-ink);font-weight:600;font-size:.92rem}
.post__link svg{width:1.1em;height:1.1em;transition:transform .25s}
.post__link:hover svg{transform:translateX(4px)}
.post--soon{background:transparent;border-style:dashed;justify-content:center}
.post--soon h3,.post--soon p{color:var(--muted)}

/* ============================ WSKAZÓWKI ============================ */
.tips{background:var(--paper);padding:clamp(2rem,4vw,3.5rem) 0}
.tips__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.tip{padding:1.6rem;border-radius:var(--radius);background:var(--cream);border:1px solid var(--line-light)}
.tip__no{font-family:var(--mono);font-size:.85rem;color:var(--accent-ink);font-weight:600}
.tip h3{font-size:1.16rem;color:var(--brand);margin:.7rem 0 .5rem}
.tip p{color:var(--muted);font-size:.92rem}
.tips__note{margin-top:2rem;text-align:center;font-size:.86rem;color:var(--muted)}

/* ============================ PRZYDATNE LINKI ============================ */
.links{background:var(--cream);padding:clamp(2rem,4vw,3.5rem) 0}
.links__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.link-card{display:flex;flex-direction:column;gap:.25rem;padding:1.3rem 1.4rem;background:var(--paper);border:1px solid var(--line-light);border-radius:12px;transition:transform .25s var(--ease),border-color .25s}
.link-card:hover{transform:translateY(-3px);border-color:var(--accent)}
.link-card b{color:var(--brand);font-family:var(--serif);font-size:1.14rem}
.link-card span{color:var(--muted);font-size:.86rem}

/* ============================ HOBBY ============================ */
.hobby{background:var(--paper);padding:clamp(2rem,4vw,3.5rem) 0}
.hobby__gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.hobby__ph{aspect-ratio:4/3;border-radius:12px;background:linear-gradient(150deg,var(--ph),color-mix(in srgb,var(--ph) 60%,var(--brand)));display:flex;align-items:center;justify-content:center;border:1px solid var(--line-light)}
.hobby__ph span{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);opacity:.75}
/* Kafel ze zdjęciem wgranym z panelu. To <figure>, więc trzeba zerować
   domyślny margines przeglądarki — inaczej siatka się rozjeżdża. */
.hobby__ph--foto{margin:0;padding:0;overflow:hidden;background:var(--ph)}
/* podpis zdjęcia z panelu — pasek na dole kafla, czytelny na każdym zdjęciu */
.hobby__ph--opis{position:relative}
.hobby__opis{position:absolute;left:0;right:0;bottom:0;padding:.85rem .9rem .7rem;font-size:.86rem;line-height:1.35;color:#fff;background:linear-gradient(to top,rgba(11,31,25,.88) 0%,rgba(11,31,25,.6) 55%,transparent 100%);border-radius:0 0 12px 12px;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.hobby__ph--foto img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}

/* ============================ KONTAKT ============================ */
.contact{background:var(--ink);color:var(--paper);padding:clamp(2rem,4vw,3.5rem) 0;position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 20% 0%,color-mix(in srgb,var(--brand-2) 60%,transparent),transparent 60%);pointer-events:none}
.contact__grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.contact .eyebrow--accent{color:var(--accent-soft)}
.contact__shout{font-size:clamp(2.6rem,2rem + 4vw,5rem);color:var(--paper);margin:1rem 0 1.2rem;letter-spacing:-.03em}
.contact__sub{color:color-mix(in srgb,var(--paper) 78%,transparent);max-width:40ch;margin-bottom:2rem}
.contact__phone{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--serif);font-weight:600;font-size:clamp(1.8rem,1.4rem + 2vw,2.8rem);color:var(--accent);letter-spacing:-.01em;transition:color .25s,transform .25s var(--ease)}
.contact__phone svg{color:var(--accent-soft)}
.contact__phone:hover{transform:translateX(4px)}
.contact__meta{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 2rem;margin-top:2.4rem}
.contact__k{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-soft);margin-bottom:.4rem}
.contact__v{color:color-mix(in srgb,var(--paper) 88%,transparent);font-size:.98rem;line-height:1.5}
a.contact__v:hover{color:var(--accent-soft)}
/* telefony do działów — wypełniane przez pana Osikę w panelu */
.contact__dept{margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid color-mix(in srgb,var(--paper) 18%,transparent)}
.contact__k--head{margin-bottom:1.1rem}
.contact__dept-list{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 2rem;margin:0;padding:0;list-style:none}
.contact__dept-tel{display:inline-block;font-family:var(--mono);letter-spacing:.02em}
.leadform{background:rgba(233,224,200,.04);border:1px solid var(--line-dark);border-radius:var(--radius);padding:clamp(1.6rem,3vw,2.4rem)}
.leadform h3{font-size:1.5rem;color:var(--paper);margin-bottom:1.3rem}
.field{margin-bottom:1.05rem}
.field label{display:block;font-size:.82rem;font-weight:600;color:color-mix(in srgb,var(--paper) 74%,transparent);margin-bottom:.4rem}
.field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:1rem;color:var(--paper);background:color-mix(in srgb,var(--ink) 55%,transparent);border:1px solid var(--line-dark);border-radius:11px;padding:.8rem .95rem;transition:border-color .25s,box-shadow .25s}
.field textarea{resize:vertical;min-height:74px}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-dark)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.field select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23C9A24E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .95rem center;padding-right:2.4rem}
.field select option{background:var(--brand);color:var(--paper)}
.leadform__note{margin-top:.9rem;font-size:.82rem;color:var(--muted-dark);text-align:center}
.leadform.is-sent .leadform__note{color:var(--accent-soft)}
/* Odpowiedź formularza. Kolor NIE jest jedynym nośnikiem informacji — treść
   komunikatu sama mówi, co się stało, więc daltonista i czytnik ekranu
   dostają tę samą wiadomość co reszta. */
.leadform__note--ok{color:#8FD3A8;font-weight:600}
.leadform__note--zle{color:#F0A9A0;font-weight:600}
/* Obowiązek informacyjny przy zbieraniu danych (art. 13 RODO) — drobny druk
   pod przyciskiem, z linkiem do pełnej polityki. */
.leadform__rodo{margin-top:.8rem;font-size:.74rem;line-height:1.5;color:var(--muted-dark);text-align:center}
.leadform__rodo a{color:var(--accent-soft);text-decoration:underline;text-underline-offset:.18em}
.leadform__rodo a:hover{color:var(--accent)}

/* ============================ FOOTER ============================ */
.site-footer{background:var(--brand);color:color-mix(in srgb,var(--paper) 78%,transparent);padding:clamp(2rem,3.6vw,3rem) 0 1.6rem;position:relative;overflow:hidden}
.footer__top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2rem;position:relative;z-index:2}
.footer__brand p{margin-top:1rem;max-width:40ch;font-size:.92rem;color:color-mix(in srgb,var(--paper) 68%,transparent)}
.footer__brand .brand__name{color:var(--paper)}
.footer__col h4{font-family:var(--sans);font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-soft);margin-bottom:1rem}
.footer__col a,.footer__hours{display:block;color:color-mix(in srgb,var(--paper) 74%,transparent);font-size:.94rem;padding:.28rem 0;transition:color .2s}
.footer__col a:hover{color:var(--accent-soft)}
.footer__legal{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2.8rem;padding-top:1.6rem;border-top:1px solid var(--line-dark);font-size:.8rem;color:var(--muted-dark);position:relative;z-index:2}
/* Link do polityki prywatności w linijce z NIP-em. Podkreślenie, bo na tym
   drobnym stopniu pisma sam kolor nie wystarcza, żeby odróżnić go od tekstu. */
.footer__legal-link{color:var(--accent-soft);text-decoration:underline;text-underline-offset:.2em}
.footer__legal-link:hover{color:var(--accent)}
.footer__watermark{position:absolute;left:0;right:0;bottom:-.18em;text-align:center;z-index:1;pointer-events:none;font-family:var(--serif);font-weight:600;font-size:clamp(5rem,22vw,17rem);line-height:.8;color:color-mix(in srgb,var(--paper) 4%,transparent);letter-spacing:.02em}

/* ============================ CALLBAR ============================ */
.callbar{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:90;display:none;align-items:center;justify-content:center;gap:.6rem;background:var(--accent);color:var(--accent-btn-fg);font-weight:800;padding:.95rem;border-radius:999px;box-shadow:0 14px 30px -10px rgba(0,0,0,.5)}
.callbar svg{width:1.2em;height:1.2em}

/* ============================ REVEAL ============================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.scale__beam,.scale__eq,.scale__status{transition:none}.hero__reassure .dot,.hero__scrollcue span{animation:none}}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1000px){
  .hero__inner{grid-template-columns:1fr;gap:2.5rem}
  .hero__copy{max-width:none}.scale{order:2}
  .why__grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:2rem 1.6rem}
  .price-grid{grid-template-columns:repeat(2,1fr)}
  .tips__grid{grid-template-columns:repeat(2,1fr)}
  .about__grid{grid-template-columns:1fr;gap:3rem}
  .about__portrait{max-width:360px}
}
@media (max-width:860px){
  .nav__toggle{display:flex}
  .nav__links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:var(--cream);border-bottom:1px solid var(--line-light);padding:.4rem clamp(1.2rem,4vw,2.4rem) 1.1rem;max-height:0;overflow:hidden;visibility:hidden;transition:max-height .35s var(--ease),visibility .35s}
  .nav__links.open{max-height:420px;visibility:visible}
  .nav__links a{width:100%;padding:.85rem 0;border-bottom:1px solid var(--line-light)}
  .nav__links a::after{display:none}
  .nav{gap:.7rem}
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3){border-left:none}.stat:nth-child(n+3){border-top:1px solid var(--line-light)}
  .audience__grid,.contact__grid{grid-template-columns:1fr}
  .svc__list,.svc-extra__grid,.links__grid,.hobby__gallery{grid-template-columns:1fr}
  .news__tor>.post{flex-basis:82%}
  .svc-extra__grid,.links__grid,.hobby__gallery{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr 1fr}.footer__brand{grid-column:1/-1}
  .callbar{display:flex}body{padding-bottom:4.5rem}
  .contact__meta{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .why__grid,.steps,.price-grid,.tips__grid,.svc-extra__grid,.links__grid,.hobby__gallery{grid-template-columns:1fr}
  .hero__cta .btn{flex:1 1 100%}
  .contact__meta,.contact__dept-list{grid-template-columns:1fr}
  .scale__rig{height:270px}
  .footer__legal{flex-direction:column;gap:.5rem}
  .svc{grid-template-columns:1fr}.svc__no{margin-bottom:-.5rem}
}
@media (max-width:480px){
  .nav__phone .txt{display:none}
  .nav__phone{padding:.7rem;aspect-ratio:1}
}


/* --- ZDJĘCIE WŁAŚCICIELA (wgrywane z panelu) ---
   Pole zostaje dokładnie tam, gdzie było — zmienia się tylko zawartość.
   Dopóki zdjęcia nie ma, strona wygląda identycznie jak dotąd. */
.about__photo{position:relative;overflow:hidden}
.about__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.about__photo.ma-foto{background:none;border-color:transparent}
.about__photo.ma-foto .about__photo-note{display:none}

/* --- LOGO W STOPCE = WEJŚCIE DO PANELU ---
   Drugie wejście obok prawej szalki wagi. Delikatny sygnał, że to klikalne,
   bez napisu „zaloguj" — odwiedzający widzi po prostu logo firmy. */
.brand--panel{transition:opacity .2s, transform .2s}
.brand--panel:hover{opacity:.85; transform:translateY(-1px)}
.brand--panel:focus-visible{outline:2px solid var(--accent); outline-offset:6px; border-radius:8px}

/* ═══════════ Wizytówka wykonawcy („Chcesz taką stronę?") ═══════════
   Ten sam widżet co u pozostałych klientów, ale w palecie Bilansu:
   kremowy pigułka na zieleni, mosiądz zamiast błękitu. */
.promo__pill{
  position:fixed;bottom:20px;right:20px;z-index:8000;
  display:inline-flex;align-items:center;gap:9px;padding:10px 16px;
  border-radius:100px;background:color-mix(in srgb,var(--cream) 95%,transparent);
  border:1px solid var(--accent);box-shadow:0 6px 24px rgba(11,31,25,.28);
  backdrop-filter:blur(8px);cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.promo__pill:hover{transform:translateY(-2px);box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 34%,transparent)}
.promo__pill-ico{display:flex;width:26px;height:26px;align-items:center;justify-content:center;
  border-radius:50%;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-ink)}
.promo__pill-txt{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.05em;color:var(--brand)}

.promo__overlay{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(11,31,25,.55);backdrop-filter:blur(6px)}
.promo__overlay[hidden]{display:none}
.promo__card{
  position:relative;width:100%;max-width:26rem;background:var(--cream);
  border:1px solid var(--line-light);border-radius:18px;
  box-shadow:0 20px 60px rgba(11,31,25,.4);padding:36px 28px;text-align:center;
  animation:promo-in .35s var(--ease);
}
.promo__close{position:absolute;top:12px;right:12px;width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;background:none;border:none;
  color:var(--muted);cursor:pointer;transition:color .2s}
.promo__close:hover{color:var(--brand)}
.promo__badge{width:56px;height:56px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);color:var(--accent-ink)}
.promo__title{font-family:var(--serif);font-weight:600;font-size:1.6rem;line-height:1.15;color:var(--brand)}
.promo__desc{margin-top:12px;font-size:.92rem;line-height:1.65;color:var(--muted)}
.promo__feats{margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:9px;
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  background:color-mix(in srgb,var(--accent) 7%,transparent);border-radius:12px;padding:13px 16px}
.promo__feats span{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:500;color:var(--brand)}
.promo__feats svg{color:var(--accent-ink);flex:none}
.promo__actions{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.promo__cta{display:inline-flex;height:48px;align-items:center;justify-content:center;gap:9px;
  border-radius:100px;background:var(--accent);color:var(--accent-btn-fg);
  font-size:14px;font-weight:700;letter-spacing:.03em;
  transition:transform .3s var(--ease),filter .3s var(--ease)}
.promo__cta:hover{transform:translateY(-2px);filter:brightness(1.08)}
.promo__dismiss{display:inline-flex;height:44px;align-items:center;justify-content:center;
  border-radius:100px;background:none;border:1px solid var(--line-light);color:var(--muted);
  font-size:12px;letter-spacing:.04em;cursor:pointer;transition:color .2s,border-color .2s}
.promo__dismiss:hover{color:var(--brand);border-color:var(--muted)}
.promo__by{margin-top:22px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);opacity:.8}
@keyframes promo-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* na telefonie pasek „Zadzwoń" siedzi na dole — pigułka idzie wyżej */
@media (max-width:760px){ .promo__pill{bottom:76px;right:14px} }