/* HARI v3 — jasny system „Galeria Secesji" (wspólny dla wszystkich podstron) */
:root{
  --paper-01:#F4EEE2; --paper-02:#ECE4D4; --paper-bright:#FBF7EF; --sand:#E6D6B2; --sage-wash:#E5E8DE;
  --ink:#1C1E22; --ink-body:#2C2E29; --ink-soft:#565246; --ink-mut:#6E6A5E;
  --gold:#B07C24; --gold-deep:#8A5A1A; --gold-hi:#E6C879;
  --sage-ink:#45584C; --terra-ink:#8A4E28; --denim-ink:#3C5568;
  --line:rgba(28,30,34,.13);
  --shadow:0 24px 48px -34px rgba(28,30,34,.22);
  --serif:'Lora',Georgia,serif; --sans:'Instrument Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper-01);color:var(--ink-body);font-family:var(--sans);
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--serif);color:var(--ink);font-weight:500;margin:0;text-wrap:balance;letter-spacing:-.01em}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.eyebrow{font-size:.8125rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}
.grain{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* buttons */
.pill{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-weight:600;font-size:1rem;
  padding:14px 16px 14px 26px;border-radius:999px;background:var(--ink);color:var(--paper-bright);
  border:1px solid var(--ink);cursor:pointer;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.pill .a{display:grid;place-items:center;width:32px;height:32px;border-radius:999px;
  background:rgba(230,200,121,.18);color:var(--gold-hi);transition:transform .3s}
.pill:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(28,20,8,.45)}
.pill:hover .a{transform:translateX(3px)}
.pill:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
button.pill{font-family:var(--sans)}
.pill--outline{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.pill--outline .a{background:rgba(176,124,36,.14);color:var(--gold-deep)}
.pill--outline:hover{background:var(--paper-bright);box-shadow:0 12px 24px -16px rgba(28,20,8,.35)}
/* ujednolicony przycisk testu (feedback Mohana 2026-07-12): gruba ramka 4px
   + kółeczko wariant B (pełne czarne, biała strzałka) — wybór Mohana */
.pill--test{background:transparent;color:var(--ink);border:4px solid var(--ink);
  font-size:1.05rem;padding:14px 16px 14px 28px;gap:14px}
.pill--test .a{width:38px;height:38px;background:var(--ink);color:var(--paper-bright)}
.pill--test:hover{background:var(--paper-bright);box-shadow:0 12px 24px -16px rgba(28,20,8,.35)}
.ghost{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:500;
  border-bottom:1px solid var(--gold);padding-bottom:2px;transition:color .25s,border-color .25s;background:none;border-top:0;border-inline:0;cursor:pointer;font-size:1rem;font-family:var(--sans)}
.ghost:hover{color:var(--gold-deep);border-color:var(--gold-deep)}
.ghost:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}

[id]{scroll-margin-top:110px}

/* header */
.top{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(12px,1.8vw,20px) clamp(20px,5vw,64px);transition:background .35s,box-shadow .35s;
  background:linear-gradient(180deg,rgba(248,242,230,.92) 0%,rgba(248,242,230,.6) 55%,rgba(248,242,230,0) 100%)}
.top.solid{background:rgba(251,247,239,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:50px;width:auto}
.brand b{font-family:var(--sans);font-weight:500;font-size:1.02rem;color:var(--ink)}
.nav{display:flex;align-items:center;gap:clamp(14px,1.6vw,26px)}
.nav a{text-decoration:none;color:var(--ink-body);font-size:.95rem;font-weight:500;transition:color .2s}
/* zakładki krojem TEKSTOWYM (bezszeryfowym) — prośba klientki powtórzona 19.08, mail 261362 pkt 5:
   „czcionka przy logo (…) aby była nie taka jak nagłówkowa ale taka jak tekst — styl Calibri —
   i podobnie nazwy zakładek (…) ta w stylu Times New Roman (…) przy nazwach zakładek i nazwie
   programu nie wygląda dobrze". Wzorem jest strona Fundacji, gdzie menu dziedziczy krój tekstowy.
   Zastępuje wariant W2 (szeryfowy, wybór Mohana 15.08) — zmiana na jego polecenie z 19.08.
   nowrap: bez tego „Dla firm" i „Profil HARI" łamią się na dwie linie przy 1440 px. */
.nav a:not(.pill){font-family:var(--sans);font-size:.99rem;letter-spacing:.01em;white-space:nowrap}
.nav a:not(.pill):hover{color:var(--gold-deep)}
.nav a[aria-current="page"]{color:var(--gold-deep)}
.nav .pill{padding:11px 22px;font-size:.92rem}
.nav .pill .a{display:none}

/* burger + mobile menu */
.burger{display:block;appearance:none;background:none;border:0;cursor:pointer;padding:10px;z-index:70}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;transition:transform .3s,opacity .3s}
.menu{position:fixed;inset:0;z-index:60;background:rgba(251,247,239,.98);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;justify-content:center;padding:0 clamp(24px,8vw,80px);
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.menu.open{opacity:1;visibility:visible}
.menu a{font-family:var(--sans);font-size:clamp(1.5rem,5vw,2rem);color:var(--ink);text-decoration:none;
  padding:.45rem 0;border-bottom:1px solid var(--line);transition:color .2s,padding-left .2s}
.menu a:hover{color:var(--gold-deep);padding-left:8px}
.menu a[aria-current="page"]{color:var(--gold-deep)}
.menu .menu__meta{margin-top:1.6rem;font-size:.9rem;color:var(--ink-soft);font-family:var(--sans)}
.menu .menu__meta a{font-family:var(--sans);font-size:.9rem;border:0;padding:0;display:inline;color:var(--gold-deep)}
body.menu-locked{overflow:hidden}
body.menu-locked .top{z-index:70}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1100px){ .nav a:not(.pill){display:none} .burger{display:block} }
@media (max-width:900px){ .brand b{display:none} }
@media (max-width:560px){ .nav .pill{display:none} }

/* ===== HERO scroll-scrub (home) ===== */
.cine{position:relative;height:500vh}
.cine__stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--paper-01)}
#stage{position:absolute;inset:0;width:100%;height:100%;display:block}
/* bez „mgły" (feedback Mohana 2026-07-12): kolaże w pełnych kolorach,
   tylko wąskie przejście w tło strony na dole */
.cine__scrim{position:absolute;inset:0;z-index:10;pointer-events:none;background:
  linear-gradient(0deg,var(--paper-01) 0%,rgba(244,238,226,0) 14%)}
/* JEDNO logo, nieruchome — wspólne dla intro i przebiegu */
.cine__logoC{position:absolute;left:50%;top:41%;transform:translate(-50%,-50%);z-index:19;pointer-events:none}
.cine__logoC img{width:clamp(210px,25.5vw,322px);height:auto;position:relative;transition:opacity .45s;
  filter:drop-shadow(0 1px 0 rgba(251,247,239,.95)) drop-shadow(0 2px 3px rgba(28,30,34,.28)) drop-shadow(0 12px 30px rgba(28,30,34,.3))}
/* na ciemnych klatkach logo przechodzi w JASNE złoto (crossfade, jak litery podpisu) */
.cine__logoC img.lg-bright{position:absolute;left:0;top:0;opacity:0;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.55))}
.cine__logoC.on-dark img.lg-deep{opacity:0}
.cine__logoC.on-dark img.lg-bright{opacity:1}
.cine__logoC::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:165%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(244,238,226,.93),rgba(244,238,226,.52) 58%,transparent 100%)}
.cine__intro{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;padding:calc(41vh + clamp(70px,8.5vw,108px) + clamp(12px,2vh,20px)) clamp(20px,5vw,64px) 0}
/* lokalna poświata TYLKO pod tekstem intro (nie mgła na cały kadr) + matowe szkło */
.cine__intro::before{content:"";position:absolute;left:50%;top:calc(41vh + clamp(40px,5vw,64px));
  transform:translateX(-50%);width:min(960px,96vw);height:50vh;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(244,238,226,.86),rgba(244,238,226,.44) 60%,transparent 100%)}
.cine .pill--test{background:var(--paper-bright)}
.hero__logo{width:clamp(150px,18vw,220px);height:auto;margin:0 auto clamp(.7rem,1.6vh,1.3rem);
  filter:drop-shadow(0 1px 0 rgba(251,247,239,.9)) drop-shadow(0 12px 30px rgba(138,90,26,.3))}
.hero__h1{font-size:clamp(2.2rem,1.6rem + 3vw,4.2rem);line-height:1.05;font-weight:500;margin:0;max-width:15ch}
.hero__h1 em{font-style:italic;font-weight:500;color:var(--gold-deep);display:block}
.hero__sub{color:var(--ink-body);max-width:52ch;margin:.9rem auto 0;font-size:1.12rem}
.hero__cta{margin-top:1.4rem;display:flex;gap:20px;flex-wrap:wrap;align-items:center;justify-content:center}
.hero__micro{margin-top:.8rem;font-size:.85rem;color:var(--ink-soft);letter-spacing:.02em}

/* warstwa trwała podczas przebiegu (wariant A: logo zostaje) */
.cine__persist{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;pointer-events:none;opacity:0;
  padding:calc(41vh + clamp(70px,8.5vw,108px) + clamp(16px,3vh,26px)) clamp(20px,5vw,64px) 0}
.persist__cap{margin:0;position:relative}
.persist__cap::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:150%;height:200%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(244,238,226,.96),rgba(244,238,226,.60) 58%,transparent 100%)}
/* kremowa łuna samych liter — czytelność na ruchomych morfach bez mgły */
.persist__L,.persist__n,.persist__d{text-shadow:0 0 20px rgba(244,238,226,.9),0 0 48px rgba(244,238,226,.65);transition:color .45s,text-shadow .45s}
/* ciemna klatka morfu → jasne litery (adaptacja mierzona z canvasa w hero.js) */
.cine__persist.on-dark .persist__L{color:#FAE089}
.cine__persist.on-dark .persist__n{color:var(--paper-bright)}
.cine__persist.on-dark .persist__d{color:rgba(251,247,239,.88)}
.cine__persist.on-dark .persist__L,.cine__persist.on-dark .persist__n,.cine__persist.on-dark .persist__d{
  text-shadow:0 0 2px rgba(28,30,34,.9),0 1px 6px rgba(28,30,34,.85),0 0 20px rgba(28,30,34,.75),0 0 46px rgba(28,30,34,.6)}
.persist__cap::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:150%;height:200%;border-radius:50%;z-index:-1;opacity:0;transition:opacity .45s;
  background:radial-gradient(closest-side,rgba(28,30,34,.60),rgba(28,30,34,.32) 58%,transparent 100%)}
.cine__persist.on-dark .persist__cap::before{opacity:0}
.cine__persist.on-dark .persist__cap::after{opacity:1}
.persist__cap::before{transition:opacity .45s}
.cine__logoC::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:165%;aspect-ratio:1;border-radius:50%;z-index:-1;opacity:0;transition:opacity .45s;
  background:radial-gradient(closest-side,rgba(28,30,34,.50),rgba(28,30,34,.26) 58%,transparent 100%)}
.cine__logoC::before{transition:opacity .45s;z-index:-1}
.cine__logoC.on-dark::before{opacity:0}
.cine__logoC.on-dark::after{opacity:1}
.hero__h1,.hero__sub,.hero__micro{text-shadow:0 0 20px rgba(244,238,226,.85),0 0 48px rgba(244,238,226,.6)}
.persist__L{font-family:var(--serif);font-size:1.08rem;font-weight:600;letter-spacing:.3em;color:#946C35;text-transform:uppercase}
.persist__n{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--ink);margin-top:.2rem}
.persist__d{font-size:.95rem;color:var(--ink-soft);margin-top:.35rem;max-width:44ch}
.persist__cap .sw{transition:opacity .4s,transform .4s}
.persist__cap.swap .sw{opacity:0;transform:translateY(6px)}

.dots{position:absolute;right:clamp(20px,5vw,64px);bottom:clamp(26px,6vh,54px);z-index:20;display:flex;gap:11px}
.dots button{appearance:none;border:0;background:transparent;cursor:pointer;width:32px;height:32px;display:grid;place-items:center}
.dots i{width:8px;height:8px;border-radius:999px;background:rgba(28,30,34,.24);transition:.3s}
.dots button[aria-current="true"] i{background:var(--gold-deep);width:24px}
.dots button:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px;border-radius:8px}
.scrollcue{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(8px,1.6vh,16px);z-index:19;
  font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft);
  display:flex;align-items:center;gap:9px;transition:opacity .3s}
.scrollcue .m{width:18px;height:29px;border:1.5px solid rgba(28,30,34,.4);border-radius:11px;position:relative}
.scrollcue .m::after{content:"";position:absolute;top:5px;left:50%;width:3px;height:5px;border-radius:2px;background:var(--gold-deep);transform:translateX(-50%);animation:wh 1.8s ease-in-out infinite}
@keyframes wh{0%,100%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}70%{opacity:0;transform:translate(-50%,8px)}}

@media (max-width:900px){
  .cine__scrim{background:linear-gradient(0deg,var(--paper-01) 0%,rgba(244,238,226,0) 18%)}
  .scrollcue{display:none}
}
@media (max-width:560px){
  .cine__logoC{top:34%}
  .cine__logoC img{width:clamp(180px,48vw,225px)}
  .cine__intro{padding-top:calc(34vh + 78px + 12px)}
  .cine__persist{padding-top:calc(34vh + 78px + 16px)}
}

/* ===== NISKIE OKNO — ratunek dla treści hero (2026-08-15) =====
   Zgłoszenie klientki: „brak tekstu po życie". Zmierzone: przy oknie 1440×700
   zdanie ucinało się o 57 px, a przycisk „Poznaj swój Profil HARI" o 153 px;
   przy 1440×800 sam przycisk o 96 px, na iPhonie o 25 px. Powód: blok intro
   startuje na 41vh, a .cine__stage ma overflow:hidden — nadmiar znikał bez śladu.
   Wariant W1 wybrany przez Mohana: PRÓG WYSOKOŚCI OKNA. Powyżej 1040 px kompozycja
   zostaje nietknięta co do piksela; niżej całość (logo + tekst) jedzie w górę
   z zachowanymi odstępami, a typografia lekko maleje.
   Próg 1040 px, nie 900 — bo pomiar pokazał, że przy oknie 1920×1000 ostatnia
   linijka nadal wychodziła poza kadr o 18 px.
   ⚠️ Zmiana dotyczy WYŁĄCZNIE hero strony głównej. */
@media (max-height:1040px) and (min-width:561px){
  .cine__logoC{top:31%}
  .cine__logoC img{width:clamp(180px,20vw,258px)}
  .cine__intro{padding-top:calc(31vh + clamp(58px,7vw,90px) + clamp(8px,1.4vh,14px))}
  .cine__intro::before{top:calc(31vh + clamp(34px,4.2vw,54px));height:44vh}
  .cine__persist{padding-top:calc(31vh + clamp(58px,7vw,90px) + clamp(10px,2vh,18px))}
  .hero__h1{font-size:clamp(1.9rem,1.35rem + 2.5vw,3.3rem)}
  .hero__sub{font-size:1.04rem;margin-top:.75rem}
  .hero__cta{margin-top:1.1rem}
  .hero__micro{margin-top:.6rem}
}
@media (max-height:760px) and (min-width:561px){
  .cine__logoC{top:25%}
  .cine__logoC img{width:clamp(150px,16.5vw,212px)}
  .cine__intro{padding-top:calc(25vh + clamp(48px,5.6vw,72px) + 6px)}
  .cine__intro::before{top:calc(25vh + clamp(28px,3.4vw,44px));height:40vh}
  .cine__persist{padding-top:calc(25vh + clamp(48px,5.6vw,72px) + 10px)}
  .hero__h1{font-size:clamp(1.7rem,1.2rem + 2vw,2.7rem)}
  .hero__sub{font-size:.99rem;margin-top:.6rem}
  .hero__cta{margin-top:.9rem}
  .hero__micro{margin-top:.45rem}
}
/* telefon: ekran wąski, ale też nie zawsze wysoki (iPhone 390×844 gubił przycisk) */
@media (max-width:560px) and (max-height:900px){
  .cine__logoC{top:29%}
  .cine__logoC img{width:clamp(160px,42vw,200px)}
  .cine__intro{padding-top:calc(29vh + 66px + 8px)}
  .cine__intro::before{top:calc(29vh + 38px);height:42vh}
  .cine__persist{padding-top:calc(29vh + 66px + 12px)}
  .hero__sub{font-size:1.02rem;margin-top:.7rem}
  .hero__cta{margin-top:1rem}
}
/* mały telefon (iPhone SE 375×667 i pokrewne) — najciaśniejszy przypadek w serwisie */
@media (max-width:560px) and (max-height:720px){
  .cine__logoC{top:19%}
  .cine__logoC img{width:clamp(132px,34vw,164px)}
  .cine__intro{padding-top:calc(19vh + 50px + 6px)}
  .cine__intro::before{top:calc(19vh + 28px);height:38vh}
  .cine__persist{padding-top:calc(19vh + 50px + 10px)}
  .hero__h1{font-size:1.62rem}
  .hero__sub{font-size:.94rem;margin-top:.55rem}
  .hero__cta{margin-top:.8rem;gap:12px}
  .hero__micro{margin-top:.4rem;font-size:.8rem}
}

/* ===== hero podstron (statyczny) ===== */
.phero{position:relative;padding:clamp(9rem,16vh,12rem) 0 clamp(3.5rem,7vw,5.5rem);overflow:hidden}
.phero--img{min-height:52vh;display:flex;align-items:flex-end}
.phero__bg{position:absolute;inset:0;z-index:-2}
.phero__bg img{width:100%;height:100%;object-fit:cover}
.phero__scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(0deg,var(--paper-01) 4%,rgba(244,238,226,.55) 42%,rgba(244,238,226,.22) 100%)}
.phero h1{font-size:clamp(2.4rem,1.9rem + 2.8vw,4rem);line-height:1.08;margin:.5rem 0 0;max-width:22ch}
.phero .lead{color:var(--ink-soft);margin:1.1rem 0 0;font-size:1.18rem;max-width:56ch}

/* ===== sekcje ===== */
.sec{padding:clamp(4.5rem,9vw,8rem) 0;position:relative}
.sec--bright{background:var(--paper-bright)}
.sec--sage{background:var(--sage-wash)}
.sec--tight{padding:clamp(3rem,6vw,5rem) 0}
.sec__head{max-width:640px}
.sec__head.center{margin:0 auto;text-align:center}
.sec h2{font-size:clamp(2.1rem,1.7rem + 2vw,3.4rem);line-height:1.08;margin:.5rem 0 0}
.sec .lead{color:var(--ink-soft);margin:1rem 0 0;font-size:1.2rem}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.arc{display:flex;justify-content:center;padding-top:clamp(2rem,4vw,3.5rem)}
.arc svg{width:min(300px,64vw)} .arc path{fill:none;stroke:var(--gold);stroke-width:1.3} .arc circle{fill:var(--gold)}
.prose{max-width:70ch}
.prose p{margin:0 0 1.2em}
.prose h2{font-size:clamp(1.7rem,1.4rem+1.4vw,2.4rem);margin:2.2rem 0 .9rem}
.prose h3{font-size:1.3rem;margin:1.8rem 0 .6rem}
.prose ul{padding-left:1.2rem;margin:0 0 1.2em}
.prose li{margin:.35em 0}
.prose .cite{color:var(--ink-soft);font-size:.95rem}

/* proof bar */
.proof{background:var(--paper-02);border-block:1px solid var(--line)}
.proof__in{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1.5rem,5vw,4rem);
  padding:clamp(2rem,4vw,3rem) 0;text-align:center}
.proof__i{min-width:120px}
.proof__n{font-family:var(--serif);font-size:2.3rem;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.proof__l{font-size:.85rem;color:var(--ink-soft);margin-top:.4rem}
.proof__todo{color:var(--gold-deep)}
.proof__n--acc{color:var(--gold-deep)}
.proof__src{text-align:center;font-size:.78rem;font-style:italic;color:var(--ink-mut);
  margin:calc(-1*clamp(1.1rem,2.2vw,1.7rem)) 0 0;padding-bottom:clamp(1.3rem,2.6vw,2rem)}
.proof__src a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.proof__src a:hover{color:var(--gold-deep)}

/* 4 kafle filarów */
.styles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px);margin-top:clamp(2.5rem,5vw,4rem)}
.tile{position:relative;background:var(--paper-bright);border:1px solid var(--line);border-radius:4px;
  padding:12px 12px 20px;box-shadow:var(--shadow);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.tile:hover{transform:translateY(-6px)}
.tile__f{position:relative;aspect-ratio:4/5;border-radius:3px;overflow:hidden;margin-bottom:14px}
.tile__f img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.tile:hover .tile__f img{transform:scale(1.12) translate(2.5%,-2%) rotate(.6deg)}
.tile:nth-child(even):hover .tile__f img{transform:scale(1.12) translate(-2.5%,2%) rotate(-.6deg)}
.tile__f::after{content:"";position:absolute;inset:0;border:1px solid rgba(230,200,121,0);border-radius:3px;transition:border-color .6s}
.tile:hover .tile__f::after{border-color:rgba(230,200,121,.7)}
.tile__L{font-family:var(--serif);font-size:1.5rem;color:var(--gold-deep);line-height:1}
.tile__n{font-family:var(--serif);font-size:1.14rem;color:var(--ink);margin-top:2px}
.tile__d{font-size:.9rem;color:var(--ink-soft);margin-top:7px}

/* karty odbiorców */
.aud{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px);margin-top:clamp(2.5rem,5vw,4rem)}
.acard{position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column;min-height:420px;background:var(--paper-bright)}
.acard__img{position:relative;height:230px;overflow:hidden}
.acard__img img{width:100%;height:100%;object-fit:cover}
.acard__b{padding:clamp(1.4rem,2vw,2rem);display:flex;flex-direction:column;gap:.7rem;flex:1}
.acard h3{font-size:1.6rem}
.acard p{margin:0;color:var(--ink-body);font-size:1rem}
.acard .ghost{margin-top:auto;align-self:flex-start}
.aud__note{text-align:center;margin-top:1.8rem;color:var(--ink-soft)}
.aud__note a{color:var(--gold-deep);font-weight:600;text-decoration:none;border-bottom:1px solid var(--gold)}

/* kroki */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,30px);margin-top:clamp(2.5rem,5vw,4rem)}
.step__n{font-family:var(--serif);font-style:italic;font-size:3rem;
  background:linear-gradient(120deg,#9A6B1E,#E6C879 42%,#C8952F 66%,#8A5A1A);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.step h3{font-size:1.3rem;margin-top:.4rem}
.step p{margin:.5rem 0 0;color:var(--ink-soft);font-size:.95rem}
.steps__rhythm{text-align:center;margin-top:2.4rem;font-family:var(--serif);font-style:italic;color:var(--gold-deep);font-size:1.15rem}

/* oddech — rytm 4-7-8 (wdech 4 s → zatrzymaj 7 s → wydech 8 s = cykl 19 s) */
.breath{background:var(--paper-bright);text-align:center;overflow:hidden}
.breath__disc{position:relative;width:min(400px,80vw);aspect-ratio:1;margin:2rem auto 0;display:grid;place-items:center}
.breath__disc img{width:100%;height:100%;object-fit:cover;animation:breathe478 19s ease-in-out infinite;
  -webkit-mask-image:radial-gradient(closest-side,#000 50%,transparent 74%);
  mask-image:radial-gradient(closest-side,#000 50%,transparent 74%)}
@keyframes breathe478{0%{transform:scale(.82)}21%{transform:scale(1.12)}57.9%{transform:scale(1.12)}100%{transform:scale(.82)}}
.breath__seq{display:grid;place-items:center;margin-top:1.6rem;min-height:11.5rem}
.breath__seq .bw{grid-area:1/1;font-family:var(--serif);font-style:italic;color:var(--gold-deep);
  font-size:clamp(2.2rem,7vw,3.6rem);line-height:1.1;opacity:0}
/* technika HA-RI (życzenie klientki): słowo fazy jak dawniej + wielka sylaba do wypowiedzenia */
.breath__seq .bph{display:flex;flex-direction:column;align-items:center;gap:.02em}
.bph__l{font-family:var(--serif);font-style:italic;font-size:clamp(2.2rem,7vw,3.6rem);
  color:var(--gold-deep);line-height:1.1}
.bph__s{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--gold-deep);
  font-size:clamp(2.6rem,8vw,4.2rem);line-height:1.05}
.bph__s--hold{font-size:clamp(1.6rem,4.5vw,2.2rem);letter-spacing:.12em;padding:.45em 0;color:var(--gold)}
/* autorska buźka: uśmiech w niedomkniętym okręgu (motyw logo), kreska jak kaligrafia */
.bph__smile{width:.84em;height:.84em;vertical-align:0;margin-left:.3em;
  display:inline-block;color:var(--gold);opacity:0;animation:bsm 19s ease-in-out infinite}
@keyframes bsm{0%,78%{opacity:0}84%,100%{opacity:1}}
.bw--1{animation:bw1 19s ease-in-out infinite}
.bw--2{animation:bw2 19s ease-in-out infinite}
.bw--3{animation:bw3 19s ease-in-out infinite}
/* słowa NIE nachodzą na siebie: każde gaśnie do zera, pauza, dopiero wtedy następne */
@keyframes bw1{0%{opacity:0}3%{opacity:1}14%{opacity:1}17.5%{opacity:0}100%{opacity:0}}
@keyframes bw2{0%{opacity:0}21%{opacity:0}24%{opacity:1}50%{opacity:1}53.5%{opacity:0}100%{opacity:0}}
@keyframes bw3{0%{opacity:0}58%{opacity:0}61%{opacity:1}90.5%{opacity:1}94%{opacity:0}100%{opacity:0}}

/* spotlight */
.spot{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.spot__img{border-radius:6px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
/* wariant W3 (Mohan 2026-08-12): grafika szersza od kolumny tekstu — TYLKO na stronie
   glownej (.sci = NAUKA, .spot--foto-prawo = PROFIL HARI). Osobny modyfikator, bo klasa
   .spot jest uzywana takze na dla-firm.html, gdzie szerokosci kolumn maja zostac. */
.spot--foto-prawo{grid-template-columns:.82fr 1.18fr}
/* PUNKTOWA naprawa proporcji — wylacznie obrazy w sekcjach .sci i .spot (home + dla-firm,
   decyzja Mohana 2026-08-12: „Napraw tez na Dla firm"). ZADNEJ reguly zbiorczej na img —
   globalny img{height:auto} zostal wycofany 11.08 na jego polecenie. */
.sci__img img,.spot__img img{width:100%;height:auto}
.spot ul{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.7rem}
.spot li{position:relative;padding-left:1.7rem;color:var(--ink-body)}
.spot li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:999px;
  background:linear-gradient(120deg,#C8952F,#E6C879)}
.spot .pill{margin-top:1.8rem}

/* nauka */
.sci{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.sci__img{border-radius:6px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.pillars{display:grid;gap:1rem;margin-top:1.6rem}
.pillar{padding:1rem 1.2rem;background:var(--paper-bright);border:1px solid var(--line);border-radius:4px}
.pillar b{font-family:var(--serif);font-weight:500;color:var(--ink)}
.pillar span{display:block;color:var(--ink-soft);font-size:.9rem;margin-top:.2rem}

/* opinie */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px);margin-top:clamp(2.5rem,5vw,4rem)}
.quote{background:var(--paper-bright);border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow);
  padding:clamp(1.3rem,2vw,1.8rem);display:flex;flex-direction:column;gap:.9rem}
.quote blockquote{margin:0;font-size:1rem;color:var(--ink-body)}
.quote blockquote::before{content:"„";font-family:var(--serif);font-size:2.2rem;line-height:.5;display:block;
  color:var(--gold);margin:0 0 .55rem}
.quote figcaption{margin-top:auto;font-family:var(--serif);color:var(--ink);font-size:.98rem}
.quote figcaption span{display:block;font-family:var(--sans);color:var(--ink-soft);font-size:.82rem;margin-top:.15rem}

/* pojedynczy pull-quote (dla-szkol/firm; przełamanie ściany kart w rekomendacjach) */
.pullq{max-width:46rem;margin:0 auto;text-align:center}
.pullq blockquote{margin:0;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.3rem,1.05rem + 1.2vw,1.85rem);line-height:1.42;color:var(--ink);text-wrap:balance}
.pullq blockquote::before{content:"„";color:var(--gold);font-style:normal}
.pullq figcaption{margin-top:1.2rem;font-family:var(--sans);color:var(--ink-soft);font-size:.9rem}
.pullq figcaption b{color:var(--ink);font-weight:600;font-style:normal}

/* karty publikacji */
.pubs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px);margin-top:clamp(2.5rem,5vw,4rem)}
.pub{position:relative;background:var(--paper-bright);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.pub:hover{transform:translateY(-6px)}
.pub__img{height:170px;overflow:hidden}
.pub__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.pub:hover .pub__img img{transform:scale(1.05)}
.pub__b{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.pub h3{font-size:1.12rem;line-height:1.3}
.pub h3 a{color:inherit;text-decoration:none}
.pub h3 a::after{content:"";position:absolute;inset:0}
.pub p{margin:0;font-size:.9rem;color:var(--ink-soft)}
.pub__more{margin-top:auto;color:var(--gold-deep);font-weight:600;font-size:.9rem}

/* formularze */
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.4rem;margin-top:2.2rem;max-width:760px}
.form .full{grid-column:1/-1}
.field label{display:block;font-size:.85rem;font-weight:600;color:var(--ink);letter-spacing:.02em;margin-bottom:.4rem}
.field input,.field textarea,.field select{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:4px;
  background:var(--paper-bright);color:var(--ink-body);font-family:var(--sans);font-size:1rem;transition:border-color .25s,box-shadow .25s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(176,124,36,.14)}
.field textarea{min-height:130px;resize:vertical}
.field--check{display:flex;gap:.7rem;align-items:flex-start;font-size:.85rem;color:var(--ink-soft)}
.field--check input{width:18px;height:18px;margin-top:.2em;accent-color:var(--gold-deep);flex:none}
.form__note{grid-column:1/-1;font-size:.82rem;color:var(--ink-mut)}
.form__ok{grid-column:1/-1;background:var(--sage-wash);border:1px solid rgba(69,88,76,.25);border-radius:6px;
  padding:1.2rem 1.4rem;color:var(--sage-ink);display:none}
.form__ok.show{display:block}

/* trenerzy */
.woj{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.woj button{appearance:none;border:1px solid var(--line);background:var(--paper-bright);border-radius:999px;
  padding:8px 16px;font-family:var(--sans);font-size:.88rem;color:var(--ink-body);cursor:pointer;transition:.25s}
.woj button:hover{border-color:var(--gold)}
.woj button[aria-pressed="true"]{background:var(--ink);color:var(--paper-bright);border-color:var(--ink)}
.trainers{display:grid;gap:1rem;margin-top:2rem}
.trainer{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;background:var(--paper-bright);
  border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow);padding:1.2rem 1.5rem}
.trainer__mono{flex:none;width:56px;height:56px;border-radius:999px;display:grid;place-items:center;
  font-family:var(--serif);font-size:1.4rem;color:var(--gold-deep);background:rgba(230,200,121,.22);border:1px solid rgba(176,124,36,.3)}
.trainer__b{flex:1;min-width:220px}
.trainer__b h3{font-size:1.15rem}
.trainer__b p{margin:.2rem 0 0;font-size:.9rem;color:var(--ink-soft)}
.trainer__meta{font-size:.82rem;color:var(--ink-mut)}
.placeholder-note{margin-top:2rem;padding:1rem 1.3rem;border:1px dashed rgba(138,90,26,.45);border-radius:6px;
  background:rgba(230,200,121,.1);color:var(--gold-deep);font-size:.9rem}

/* finał CTA */
.final{position:relative;background:var(--sand);text-align:center;overflow:hidden;isolation:isolate}
.final__bg{position:absolute;inset:0;z-index:-1;object-fit:cover;width:100%;height:100%;opacity:.9}
.final__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(230,214,178,.55),rgba(244,238,226,.2))}
.final h2{font-size:clamp(2.3rem,1.8rem + 2.4vw,3.6rem)}
.final p{color:var(--ink-body);max-width:48ch;margin:1rem auto 2rem}
.final__cta{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.final small{display:block;margin-top:2rem;color:var(--ink-soft);font-size:.82rem}

/* stopka */
.foot{background:var(--paper-02);border-top:1px solid var(--line);padding:clamp(3rem,5vw,4.5rem) 0 2rem}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.foot__brand img{height:88px}
.foot__brand p{color:var(--ink-soft);font-size:.9rem;max-width:34ch;margin:.9rem 0 0}
.foot h4{font-family:var(--sans);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 .8rem}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.foot a{color:var(--ink-body);text-decoration:none;font-size:.92rem}
.foot a:hover{color:var(--gold-deep)}
.foot__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line);font-size:.82rem;color:var(--ink-soft)}
.foot__bottom a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid rgba(110,106,94,.4)}
.foot__bottom a:hover{color:var(--gold-deep);border-color:var(--gold-deep)}

@media (max-width:900px){
  .styles{grid-template-columns:1fr 1fr} .steps{grid-template-columns:1fr 1fr}
  .aud{grid-template-columns:1fr} .spot,.sci{grid-template-columns:1fr}
  .quotes,.pubs{grid-template-columns:1fr 1fr}
  .form{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr 1fr} .foot__brand{grid-column:1/-1}
}
@media (max-width:560px){
  .styles{grid-template-columns:1fr 1fr} .quotes,.pubs{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .cine{height:100svh}
  .dots,.scrollcue,.cine__persist{display:none}
  .breath__disc img{animation:none}
  .breath__seq{display:flex;gap:1.6em;justify-content:center;flex-wrap:wrap}
  .breath__seq .bw{animation:none;opacity:1}
  .bph__smile{animation:none;opacity:1}
  .reveal{opacity:1;transform:none;transition:none}
  .scrollcue .m::after{animation:none}
  html{scroll-behavior:auto}
}

/* === P2 — kosmetyka (web-critic) === */
/* P2-1: numery kroków w sekcjach sage — solid gold-deep (jasny gradient znikał na sage-wash) */
.sec--sage .step__n{background:none;-webkit-text-fill-color:var(--gold-deep);color:var(--gold-deep)}
/* P2-2: eyebrow w finale — ciemniejsze złoto dla kontrastu na piasku */
.final .eyebrow{color:#7A4E14}
/* P2-15: focus-visible na przełącznikach województw i akordeonie */
.woj button:focus-visible,.acc summary:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
/* P2-8: podnagłówki w kontakcie jako h2 (hierarchia h1->h2), rozmiar jak dawne h3 */
.contact h2{font-family:var(--serif);font-size:1.35rem;font-weight:600;margin:0}
/* P2-9: skip-link „Przejdź do treści" — widoczny dopiero na focusie */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--paper-bright);
  padding:.65rem 1.1rem;border-radius:0 0 6px 0;font-size:.9rem;text-decoration:none}
.skip-link:focus{left:0}
/* P2-7: stagger reveal w gridach — subtelna kaskada wejścia */
.styles>.reveal:nth-child(2),.steps>.reveal:nth-child(2),.quotes>.reveal:nth-child(2),.pubs>.reveal:nth-child(2){transition-delay:.08s}
.styles>.reveal:nth-child(3),.steps>.reveal:nth-child(3),.quotes>.reveal:nth-child(3),.pubs>.reveal:nth-child(3){transition-delay:.16s}
.styles>.reveal:nth-child(4),.steps>.reveal:nth-child(4),.quotes>.reveal:nth-child(4),.pubs>.reveal:nth-child(4){transition-delay:.24s}

/* stopka: social media Fundacji jako ikony w JEDNYM POZIOMYM rzedzie
   (decyzja Mohana 2026-08-11b: nie w pionie, tylko w poziomie) */
.foot__sm{display:flex;flex-direction:row;flex-wrap:wrap;gap:.55rem;align-items:center;margin-top:.5rem}
.foot__sm a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--line);border-radius:999px;color:inherit;
  transition:color .25s,border-color .25s}
.foot__sm a:hover,.foot__sm a:focus-visible{color:var(--gold);border-color:var(--gold)}
.foot__sm svg{width:21px;height:21px;display:block}

/* Link do siostrzanej strony Fundacji Life Balance (stopka, 20/20 stron).
   Ustalenie Mohana: HARI ma prowadzić do strony Fundacji. Świadomie BEZ logo LB —
   marek nie mieszamy; wystarczy nazwa + znak wyjścia na zewnątrz. */
.foot__lb{display:inline-flex;align-items:center;gap:.35rem}
.foot__lb svg{width:13px;height:13px;flex:0 0 auto;opacity:.75;transition:opacity .2s ease,transform .2s ease}
.foot__lb:hover svg,.foot__lb:focus-visible svg{opacity:1;transform:translate(1px,-1px)}

/* ══════════════════════════════════════════════════════════════════════════
   OZNACZENIE TREŚCI AI — art. 50 AI Act (warstwa druga)
   ══════════════════════════════════════════════════════════════════════════
   [ZAPIS HISTORYCZNY — ten plik NIE ISTNIEJE od 18.09, patrz .ai-anchor--foto niżej]
   15.08 ikona została WYPALONA W PLIK zdjęcia (assets/sekcje/tworczyni_dr-ciesla.jpg,
   _narzedzia/oznacz-ai.py). Tu dochodzi warstwa STRONY: klikalne pole dokładnie na tej
   ikonie + podpis „Wygenerowane przez AI" po najechaniu + link do podstrony wyjaśniającej.
   Metoda 1:1 jak na stronie Fundacji Life Balance (polecenie Mohana 17.08:
   „zrób tą warstwę drugą, tak jak u Fundacji").

   ⚠️ Kotwicą jest OSOBNA klasa .ai-anchor, NIE .spot__img — bo .spot__img występuje także
   na index.html i dla-firm.html, a ta poprawka ma ruszyć WYŁĄCZNIE zdjęcie dr Cieśli
   na tworczyni.html (zasada: poprawka zmienia tylko wskazany element). */

.ai-anchor{position:relative;container-type:inline-size}

.ai-tag{
  --ai-size:24px;                        /* nadpisywane per zdjęcie jednostką cqi */
  position:absolute;z-index:4;
  display:inline-flex;align-items:center;
  padding:0;margin:0;border:0;background:none;
  text-decoration:none;line-height:0;cursor:pointer;
}

/* Ikona plakietki leży DOKŁADNIE na ikonie wypalonej w plik (ten sam ułamek szerokości
   kadru), więc widać JEDEN znak, nie dwa. Tu jest przezroczysta — pracuje jako pole
   klikalne i fokusowalne; widoczny zostaje znak wypalony w plik.

   ⚠️ Selektor MUSI mieć dwie klasy (0-2-0). Przy jednej klasie wygrywała reguła
   `.sci__img img,.spot__img img{width:100%}` (0-1-1) i ikona rozdymała się do
   szerokości kadru — zmierzone 295,4 px zamiast 24 px. Ta sama pułapka co u Fundacji
   05.08, tam z globalnym `img{max-width:100%}`. */
.ai-tag .ai-tag__icon{
  position:relative;z-index:1;
  width:var(--ai-size);height:var(--ai-size);
  /* max-width:none — globalny reset img{max-width:100%} ścinał ikonę PONIŻEJ 24 px,
     bo kontener flex jest shrink-to-fit. Pułapka złapana u Fundacji 05.08. */
  max-width:none;aspect-ratio:1;object-fit:contain;flex:none;display:block;
  opacity:0;
}

/* Podpis — W SPOCZYNKU NIEWIDOCZNY (decyzja Mohana 05.08: „jak najbardziej niewidoczna,
   żeby była zgodnie z prawem"). Wysuwa się po najechaniu albo fokusie z klawiatury. */
.ai-tag__pill{
  display:inline-flex;align-items:center;
  height:calc(var(--ai-size) * .62);
  margin-left:calc(var(--ai-size) * -.13);
  max-width:0;padding:0;opacity:0;overflow:hidden;
  border-radius:999px;
  background:rgba(251,247,239,.86);
  border:1px solid transparent;
  -webkit-backdrop-filter:blur(8px) saturate(1.15);
          backdrop-filter:blur(8px) saturate(1.15);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(9.5px,calc(var(--ai-size) * .36),12px);
  letter-spacing:.02em;line-height:1;white-space:nowrap;
  transition:max-width .34s cubic-bezier(.4,0,.2,1),padding .34s cubic-bezier(.4,0,.2,1),
             opacity .22s ease,border-color .22s ease;
}
.ai-tag:hover .ai-tag__pill,
.ai-tag:focus-visible .ai-tag__pill{
  max-width:16rem;opacity:1;
  padding:0 calc(var(--ai-size) * .34) 0 calc(var(--ai-size) * .42);
  border-color:var(--line);
  box-shadow:0 1px 4px -1px rgba(28,30,34,.18);
}
.ai-tag:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:999px}

/* Telefon i tablet: nie chowamy opisu za gestem, którego nie da się tam wykonać. */
@media (hover:none){
  .ai-tag__pill{
    max-width:16rem;opacity:1;
    padding:0 calc(var(--ai-size) * .34) 0 calc(var(--ai-size) * .42);
    border-color:var(--line);
    box-shadow:0 1px 4px -1px rgba(28,30,34,.18);
  }
}
@media (prefers-reduced-motion:reduce){ .ai-tag__pill{transition:none} }

/* Kotwica zdjęcia dr Cieśli (tworczyni.html).
   7,5 cqi i 2,5 cqi = DOKŁADNIE te same ułamki, którymi _narzedzia/oznacz-ai.py wypalił
   znak w plik (ulamek=7.5, margines=2.5) — dlatego pole klikalne siada na nim co do piksela.
   max(24px, …) to twarda podłoga: minimum Komisji Europejskiej. */
.ai-anchor .ai-tag{--ai-size:clamp(24px, 7.5cqi, 26px);left:2.5cqi;bottom:2.5cqi}

/* Kadr węższy niż 320 px (bardzo wąskie okno): znak WYPALONY spada poniżej 24 px.
   Wtedy oznaczenie przejmuje plakietka — jej ikona przestaje być przezroczystym polem
   i sama staje się widocznym znakiem o twardych 24 px. */
@container (max-width:319px){ .ai-anchor .ai-tag .ai-tag__icon{opacity:1} }

/* 18.09.2026 — odmiana kotwicy dla PORTRETU od klientki (`magda-portret-1400`, ten sam plik
   co u Fundacji w „O ekspertce"). Tam znak AI NIE jest wypalony w plik, więc ikona plakietki
   musi być WIDOCZNA — inaczej oznaczenia nie byłoby wcale. To dokładnie ta usterka, którą
   Fundacja złapała pomiarem 19.08 (ikona miała `opacity:0` przy zdjęciu bez stempla).
   Rozmiar bez zmian: 24 px trzyma `--ai-size`, kanon 24–26 px. */
.ai-anchor--foto .ai-tag .ai-tag__icon{opacity:1}

/* Oświadczenie o AI w stopce (art. 50 AI Act) — na wszystkich stronach serwisu. */
.foot__ai{
  margin:1.1rem 0 0;max-width:74ch;
  font-size:.78rem;line-height:1.62;color:var(--ink-mut);
}
.foot__ai a{color:var(--ink-soft);font-size:inherit;border-bottom:1px solid rgba(110,106,94,.4)}
.foot__ai a:hover{color:var(--gold-deep);border-color:var(--gold-deep)}