/* A363: publiczna strona «Funkcje» behoo.eu — uzupełnienie behoo.css (kolory, siatka, przyciski, panele, stopka stamtąd). Mobile first. */
.fn-hero{padding:34px 0 10px}
.fn-hero .lead{max-width:62ch}
.fn-hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;align-items:center}
.fn-hero .pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.fn-demo-f{display:inline;margin:0}
.fn-okruchy{display:flex;gap:8px;align-items:center;margin:0 0 18px;font-size:13.5px;color:var(--muted)}
.fn-okruchy a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* karty funkcji na stronie głównej «Funkcje» */
.fn-karty{display:grid;grid-template-columns:1fr;gap:16px;margin:26px 0}
.fn-karta{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;color:inherit;text-decoration:none;transition:transform .15s,box-shadow .15s}
.fn-karta:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(24,30,48,.14)}
.fn-karta:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fn-miniatura{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--surface);border-bottom:1px solid var(--glass-line)}
.fn-miniatura img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.fn-karta-tresc{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;position:relative}
.fn-karta-tresc .tile{position:absolute;top:-26px;right:16px;width:46px;height:46px}
.fn-karta-tresc .tile svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fn-karta h2{font-size:20px;margin:0}
.fn-karta p{margin:0;color:var(--muted);font-size:15px}
.fn-wiecej{margin-top:4px;font-weight:600;color:var(--accent);font-size:14.5px}

/* pasy z przyciskami */
.fn-pas{display:grid;grid-template-columns:1fr;gap:16px;align-items:center;border-radius:20px;padding:22px;margin:22px 0}
.fn-pas h2{font-size:clamp(20px,2.8vw,26px)}
.fn-pas p{color:var(--muted)}
.fn-pas-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* podstrona: tekst + zrzut */
.fn-sekcja{padding:6px 0}
.fn-blok{display:grid;grid-template-columns:1fr;gap:16px;margin:16px 0}
.fn-tekst{border-radius:20px;padding:20px 22px}
.fn-tekst h2{font-size:clamp(20px,2.8vw,26px);margin:0 0 10px}
.fn-tekst p{margin:0 0 10px;color:var(--muted)}
.fn-tekst ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.fn-tekst li{position:relative;padding-left:22px}
.fn-tekst li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.fn-fig{margin:0}
.fn-fig img{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--glass-line);box-shadow:0 14px 40px rgba(24,30,48,.16);background:var(--surface)}
.fn-fig figcaption{margin-top:8px;font-size:13px;color:var(--muted)}
.fn-waski .fn-fig img{max-width:300px;margin-inline:auto}
.fn-waski .fn-fig figcaption{text-align:center}
.fn-wkrotce{margin:22px 0}
.fn-inne{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;margin:6px 0 30px;padding:0}
.fn-inne a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;font-size:14.5px}

@media (min-width:760px){
  .fn-karty{grid-template-columns:repeat(2,1fr)}
  .fn-pas{grid-template-columns:1fr auto;padding:26px 30px}
  .fn-waski{grid-template-columns:1fr 340px;align-items:start}
}
@media (min-width:1000px){
  .fn-karty{grid-template-columns:repeat(3,1fr)}
  .fn-hero{padding:48px 0 14px}
}
@media (prefers-reduced-motion:reduce){.fn-karta{transition:none}.fn-karta:hover{transform:none}}