/* ═══════════ TOKENS ═══════════ */
:root{
  --cream:#faf5ec;
  --cream-2:#f4ecdd;
  --paper:#fffdf8;
  --ink:#372a1c;
  /* Paleta pogłębiona 16.08.2026 — poprzednie wartości dawały 14 błędów kontrastu
     w motywie jasnym (audyt H-1). Zmierzone po zmianie, na tle --cream #faf5ec:
       --muted #736149 → 5.47:1 (było #8a7861 = 3.91)
       --terra #96582a → 5.19:1 jako tekst, 5.35:1 dla białego tekstu na tym tle
                          (było #b5763f = 3.44 i 3.54) */
  --muted:#736149;
  --terra:#96582a;
  --terra-deep:#7d451d;
  --blush:#e9c9b4;
  --line:rgba(55,42,28,.14);
  --serif:'Vollkorn',Georgia,serif;
  --sans:'Mulish',system-ui,sans-serif;
  --hand:'Caveat',cursive;
  --ease:cubic-bezier(.22,1,.36,1);
  --sh:0 18px 44px -18px rgba(55,42,28,.28);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.7;
  font-size:16.5px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* Krótkie strony (np. blog z 3 kartami) kończyły się w połowie ekranu
     i pod stopką wyłaniało się tło — widoczne „ucięcie". Kolumna flex
     z rozciąganym <main> dokleja stopkę do dołu przy każdej długości treści. */
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
main{flex:1 0 auto}
::selection{background:var(--blush);color:var(--ink)}

/* ═══════════ SIERŚĆ — lamparcie rozetki jako tapeta strony ═══════════
   Grafiki fur-*-v2.webp to bezszwowe kafelki-lustra 2×2 (okres powtórzenia
   2× większy niż źródłowy print — na żadnym ekranie nie widać powtórki
   ani połączenia), 79/131 KB. Warstwa fixed = tapeta nieruchoma
   względem ekranu, nie „jedzie" ze scrollem; karty z własnym tłem
   zostają czyste, wzór gra między nimi. */
:root{--fur:url("fur-light-v2.webp")}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    /* Welon w kolorze motywu: print zostaje tapetą, ale tekst znów ma
       spokojne podłoże i pełny kontrast. color-mix bierze z --cream,
       więc w obu motywach stapia się z paletą bez nowych barw. */
    linear-gradient(color-mix(in srgb,var(--cream) 62%,transparent) 0 0),
    var(--cream) var(--fur) repeat;
  /* Kafelek-lustro szerszy niż viewport (170vw, do 2300 px): powtórka
     w poziomie zawsze wypada poza ekranem; w pionie okres ~1150 px też
     przekracza typową wysokość okna. Skala rozetki zachowana na każdym
     ekranie — na telefonie kafelek ~1040 px. */
  background-size:auto,clamp(1040px,170vw,2300px) auto;
}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:6px}

/* etykieta tylko dla czytników ekranu — widoczna po sfokusowaniu, gdy to link pomijający */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ═══════════ CELE DOTYKOWE ═══════════
   Pomiar z 16.08.2026 wykazał 17 elementów poniżej 44×44 px, w tym przycisk
   „Porozmawiaj z Carmelą" o wysokości 23 px — poniżej progu WCAG 2.2 SC 2.5.8
   (24 px) na kluczowym CTA. Powiększamy pole klikalne bez zmiany wyglądu tekstu. */
.link-arrow{min-height:44px;display:inline-flex;align-items:center}
/* Wysokość 44 px daje pewny cel dla kciuka; szerokość 40 px, bo przy 44 px przyciski
   języka nachodziły na napis marki na 390 px (zmierzone: 7 px kolizji).
   40×44 i tak z zapasem spełnia WCAG 2.2 SC 2.5.8 (minimum 24×24). */
.lang button{min-width:40px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
/* Marka może się skurczyć zamiast wypychać prawą kolumnę nagłówka. Na wąskich ekranach
   zmniejszamy podpis zamiast go przycinać — „bengal cattery *PL" ma być czytelny w całości. */
header .brand{min-width:0}
header .brand .n{min-width:0}
@media(max-width:430px){
  header .brand .n small{font-size:.78rem;letter-spacing:0}
}
.burger{min-height:44px;justify-content:center}
.theme-btn{min-width:44px;min-height:44px}
#ai-close{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
#ai-chips button{min-height:40px}
footer .legal a,footer .sig a{display:inline-block;padding:6px 0}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;background:none;border:0;color:inherit}
section{scroll-margin-top:96px}

.paw{width:1em;height:1em;display:inline-block;vertical-align:-.12em;fill:var(--terra)}

/* ═══════════ HEADER ═══════════ */
header{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 18px;
  background:rgba(250,245,236,.86);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .4s,box-shadow .4s;
}
header.scrolled{border-bottom-color:var(--line);box-shadow:0 8px 30px -18px rgba(55,42,28,.25)}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:2px solid var(--paper);box-shadow:0 4px 12px -4px rgba(55,42,28,.35);flex:0 0 auto}
.brand img.logo-d{display:none}
[data-theme="dark"] .brand img.logo-l{display:none}
[data-theme="dark"] .brand img.logo-d{display:block}
.brand .n{font-family:var(--serif);font-weight:600;font-size:1.22rem;letter-spacing:.01em;line-height:1.05;white-space:nowrap}
.brand .n small{display:block;font-family:var(--hand);font-weight:600;font-size:.92rem;color:var(--terra);letter-spacing:.02em}
@media(min-width:900px){
  .brand img{width:54px;height:54px}
  .brand .n{font-size:1.32rem}
  .brand .n small{font-size:1rem}
}
@media(min-width:1400px){
  .brand img{width:60px;height:60px}
  .brand .n{font-size:1.42rem}
}
.hdr-right{display:flex;align-items:center;gap:2px}
.lang{display:flex;align-items:center;gap:3px;margin-right:4px}
.lang button{
  font-family:var(--serif);font-weight:600;font-size:.88rem;letter-spacing:.05em;
  color:var(--muted);padding:9px 7px;transition:color .3s;position:relative;
}
.lang button.active{color:var(--terra-deep)}
.lang button.active::after{content:"";position:absolute;left:7px;right:7px;bottom:4px;height:2px;background:var(--terra);border-radius:2px}
/* Separator PL/EN. Był --blush = 1,43:1 na kremie — poniżej progu nawet jak na
   element czysto dekoracyjny. Jest --muted (5,47:1) i aria-hidden w HTML, żeby
   czytnik ekranu nie czytał „ukośnik" między dwoma przyciskami. */
.lang i{font-style:normal;color:var(--muted);font-size:.8rem}
.burger{display:flex;flex-direction:column;gap:5.5px;padding:12px;z-index:1001}
.burger span{width:24px;height:2px;border-radius:2px;background:var(--ink);transition:transform .4s var(--ease),opacity .3s}
.burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

nav{
  position:fixed;inset:0;z-index:950;background:var(--cream-2);
  display:flex;flex-direction:column;justify-content:center;padding:0 9vw;gap:4px;
  clip-path:inset(0 0 100% 0);transition:clip-path .65s var(--ease);
}
nav.open{clip-path:inset(0 0 0 0)}
nav a{
  font-family:var(--serif);font-weight:500;font-size:clamp(1.8rem,7.6vw,2.8rem);
  padding:9px 0;border-bottom:1px dashed var(--line);
  display:flex;align-items:center;justify-content:space-between;
  opacity:0;transform:translateY(22px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s;
}
nav a .paw{opacity:0;transform:translateX(-8px) rotate(-20deg);transition:all .35s var(--ease);font-size:1.3rem}
nav a:hover{color:var(--terra)}
nav a:hover .paw{opacity:1;transform:none}
nav.open a{opacity:1;transform:none}
nav .foot{font-weight:600;margin-top:26px;font-family:var(--hand);font-size:1.35rem;color:var(--muted)}

/* ═══════════ HERO ═══════════ */
.hero{padding:118px 6vw 0;position:relative}
.hero .hand{
  font-family:var(--hand);font-weight:600;font-size:clamp(1.4rem,5vw,1.7rem);
  color:var(--terra);transform:rotate(-2deg);display:inline-block;
}
.hero h1{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(2.5rem,10.4vw,4.9rem);
  line-height:1.08;letter-spacing:-.01em;
  margin-top:10px;text-wrap:balance;
}
.hero h1 em{font-style:italic;color:var(--terra)}
.hero .sub{margin-top:18px;max-width:36ch;color:var(--muted);font-size:clamp(1rem,2.6vw,1.12rem)}
.cta-row{display:flex;align-items:center;gap:20px;margin-top:26px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:600;font-size:.95rem;letter-spacing:.02em;
  padding:15px 28px;border-radius:999px;transition:all .35s var(--ease);
}
.btn-terra{background:var(--terra);color:#fff8ef;box-shadow:0 12px 26px -10px rgba(150,88,42,.55)}
.btn-terra:hover{background:var(--terra-deep);transform:translateY(-2px)}
.link-arrow{
  font-weight:600;font-size:.95rem;color:var(--ink);
  border-bottom:2px solid var(--blush);padding-bottom:2px;transition:border-color .3s,color .3s;
}
.link-arrow:hover{color:var(--terra);border-color:var(--terra)}

.hero-fig{position:relative;margin-top:44px}
.arch{
  border-radius:999px 999px 26px 26px;
  overflow:hidden;border:6px solid var(--paper);box-shadow:var(--sh);
  aspect-ratio:1/1.06;
}
.arch img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero-fig .note{
  position:absolute;right:2vw;bottom:-14px;z-index:2;
  font-family:var(--hand);font-weight:600;font-size:1.45rem;color:var(--terra-deep);
  transform:rotate(-4deg);background:var(--paper);padding:4px 16px;border-radius:999px;
  box-shadow:0 8px 22px -10px rgba(55,42,28,.35);
}
.sticker{
  position:absolute;left:-4px;top:-30px;width:96px;height:96px;z-index:2;
  animation:spin 22s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.sticker text{font-family:var(--sans);font-weight:600;font-size:9.2px;letter-spacing:2.6px;fill:var(--terra-deep);text-transform:uppercase}
.sticker .paw{fill:var(--terra);font-size:22px}

.trust{
  display:flex;align-items:center;gap:14px;margin-top:40px;
  padding:16px 0 0;border-top:1px dashed var(--line);
}
.trust .avs{flex:0 0 auto;display:flex}
.trust .avs img{
  width:40px;height:40px;border-radius:50%;object-fit:cover;
  border:2.5px solid var(--cream);margin-left:-10px;
}
.trust .avs img:first-child{margin-left:0}
.trust p{flex:1;min-width:0;font-size:.84rem;color:var(--muted);line-height:1.5}
.trust p b{color:var(--ink);font-weight:600}

/* ═══════════ TICKER ═══════════ */
.ticker{
  margin-top:64px;padding:14px 0;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--cream-2);
}
.ticker .track{display:flex;width:max-content;animation:tick 26s linear infinite}
.ticker span{
  font-family:var(--hand);font-weight:600;font-size:1.4rem;color:var(--terra-deep);
  white-space:nowrap;padding:0 14px;display:flex;align-items:center;gap:14px;
}
.ticker .paw{font-size:1rem;opacity:.55}
@keyframes tick{to{transform:translateX(-50%)}}

/* ═══════════ SECTIONS ═══════════ */
section{padding:clamp(70px,13vw,120px) 6vw 0}
.hand-label{
  font-family:var(--hand);font-weight:600;font-size:clamp(1.35rem,4.6vw,1.6rem);
  color:var(--terra);transform:rotate(-1.6deg);display:inline-block;margin-bottom:8px;
}
/* .page-head h1 dzieli wygląd z h2 — nagłówek podstrony jest wizualnie tym samym
   elementem, ale semantycznie musi być h1 (jeden na stronę, WCAG 1.3.1 + SEO). */
h2,.page-head h1{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.9rem,7.6vw,3.4rem);line-height:1.14;letter-spacing:-.01em;
  text-wrap:balance;
}
h2 em,.page-head h1 em{font-style:italic;color:var(--terra)}
.lead{color:var(--muted);max-width:56ch;margin-top:16px}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ═══════════ ABOUT ═══════════ */
.about-grid{display:grid;gap:40px;margin-top:42px}
.about-photo{position:relative;max-width:420px}
.about-photo .arch{aspect-ratio:1/1.14}
.about-photo .sig{
  position:absolute;left:50%;bottom:-20px;transform:translateX(-50%) rotate(-3deg);
  font-family:var(--hand);font-weight:600;font-size:1.6rem;color:var(--terra-deep);
  white-space:nowrap;background:var(--paper);border-radius:999px;padding:4px 20px;
  box-shadow:0 8px 22px -10px rgba(55,42,28,.3);
}
.polaroid{
  position:absolute;right:-6px;top:-26px;width:118px;z-index:2;
  background:var(--paper);padding:7px 7px 26px;border-radius:6px;
  box-shadow:0 14px 30px -12px rgba(55,42,28,.4);
  transform:rotate(6deg);
}
.polaroid img{border-radius:3px;aspect-ratio:1;object-fit:cover}
.polaroid figcaption{
  font-family:var(--hand);font-weight:600;font-size:1rem;color:var(--muted);
  text-align:center;margin-top:4px;
}
.polaroid::before{
  content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(-4deg);
  width:64px;height:20px;background:rgba(233,201,180,.75);border-radius:2px;
  box-shadow:0 2px 6px rgba(55,42,28,.15);
}
.about-txt p{color:var(--muted);margin-bottom:16px;max-width:54ch}
.about-txt p b{color:var(--ink);font-weight:600}
.about-txt .hand{font-family:var(--hand);font-weight:600;font-size:1.5rem;color:var(--terra-deep);transform:rotate(-1.5deg);display:inline-block}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.facts span{
  font-size:.8rem;font-weight:600;letter-spacing:.02em;color:var(--terra-deep);
  background:var(--cream-2);border:1px solid var(--line);border-radius:999px;padding:8px 15px;
  display:inline-flex;align-items:center;gap:7px;
}
/* Mulish nie ma w zestawie kursywy, więc <i> dawało FAŁSZYWĄ kursywę — geometryczne
   pochylenie zamiast prawdziwego kroju. To etykiety faktów o zdrowiu, nie cytaty. */
.facts i{font-style:normal}

/* ═══════════ COLORS ═══════════ */
#kolory{padding-right:0}
#kolory .head-pad{padding-right:6vw}
.colors-scroll{
  display:flex;gap:18px;overflow-x:auto;margin-top:38px;padding:10px 6vw 26px 0;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.colors-scroll::-webkit-scrollbar{display:none}
.ccard{
  scroll-snap-align:start;flex:0 0 min(76vw,320px);
  background:var(--paper);border:1px solid var(--line);border-radius:28px;
  padding:14px 14px 22px;box-shadow:0 16px 36px -22px rgba(55,42,28,.3);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.ccard:hover{transform:translateY(-5px);box-shadow:0 24px 44px -22px rgba(55,42,28,.36)}
.ccard .ph{border-radius:200px 200px 18px 18px;overflow:hidden;aspect-ratio:1/1.04}
.ccard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.ccard:hover .ph img{transform:scale(1.05)}
.ccard h3{font-family:var(--serif);font-weight:600;font-size:1.42rem;margin-top:16px;text-align:center}
.ccard .eyes{
  font-family:var(--hand);font-weight:600;font-size:1.22rem;color:var(--terra);
  text-align:center;margin-top:2px;
}
.ccard p{font-size:.9rem;color:var(--muted);text-align:center;margin-top:10px;line-height:1.6;padding:0 6px}
.swipe-hint{
  padding-right:6vw;display:flex;align-items:center;gap:10px;
  font-family:var(--hand);font-size:1.25rem;color:var(--muted);
}
.swipe-hint .paw{animation:nudge 1.6s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}

/* ═══════════ CHARAKTER ═══════════ */
#charakter .wrap{display:grid;gap:36px;margin-top:8px}
.traits{display:grid}
.trait{
  display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:start;
  padding:22px 0;border-bottom:1px dashed var(--line);
}
.trait:first-child{padding-top:8px}
.trait .paw{font-size:1.5rem;margin-top:4px}
.trait h3{font-family:var(--serif);font-weight:600;font-size:1.22rem}
.trait p{grid-column:2;color:var(--muted);font-size:.94rem;max-width:52ch}
.side-photo{position:relative;border-radius:26px;overflow:hidden;border:6px solid var(--paper);box-shadow:var(--sh)}
.side-photo img{aspect-ratio:1/.92;object-fit:cover;width:100%}
.side-photo figcaption{
  position:absolute;left:14px;bottom:12px;font-family:var(--hand);font-weight:600;
  font-size:1.3rem;color:#fff8ef;text-shadow:0 2px 10px rgba(0,0,0,.5);transform:rotate(-2deg);
}

/* ═══════════ KOCIĘTA ═══════════ */
#kociaki{padding-right:0}
#kociaki .head-pad{padding-right:6vw}
.kittens-scroll{
  display:flex;gap:22px;overflow-x:auto;margin-top:40px;padding:24px 6vw 26px 4px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.kittens-scroll::-webkit-scrollbar{display:none}
.kcard{
  scroll-snap-align:start;flex:0 0 min(72vw,290px);
  background:var(--paper);padding:10px 10px 16px;border-radius:10px;
  box-shadow:0 18px 40px -18px rgba(55,42,28,.38);position:relative;
  transition:transform .4s var(--ease);
}
.kcard:nth-child(odd){transform:rotate(-2deg)}
.kcard:nth-child(even){transform:rotate(1.6deg)}
.kcard:hover{transform:rotate(0) translateY(-5px)}
.kcard::before{
  content:"";position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:70px;height:22px;background:rgba(233,201,180,.8);border-radius:2px;
  box-shadow:0 2px 6px rgba(55,42,28,.18);z-index:2;
}
.kcard .ph{border-radius:6px;overflow:hidden;aspect-ratio:1/1;pointer-events:none}
.kcard .ph img{width:100%;height:100%;object-fit:cover}
.kcard .cap{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:10px;padding:0 4px}
.kcard h3{font-family:var(--hand);font-weight:600;font-size:1.5rem;color:var(--ink)}
.kcard .sub{font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.kcard .st{
  margin:8px 4px 0;display:inline-flex;align-items:center;gap:7px;
  font-size:.8rem;font-weight:600;letter-spacing:.03em;border-radius:999px;padding:5px 12px;
}
.kcard .st.free{background:#e9f0e2;color:#4d6b3a}
.kcard .st.res{background:var(--cream-2);color:var(--muted)}
.kcard .st.sold{background:#f3e3d6;color:var(--terra-deep)}
.kcard .ask{
  margin:10px 4px 0;display:inline-flex;align-items:center;gap:6px;
  font-size:.84rem;font-weight:600;color:var(--terra-deep);
  border-bottom:1.5px solid var(--blush);padding-bottom:1px;align-self:flex-start;
  transition:color .3s,border-color .3s;
}
.kcard .ask:hover{color:var(--terra);border-color:var(--terra)}
.kittens-note{padding-right:6vw;font-family:var(--hand);font-size:1.3rem;color:var(--muted);margin-top:2px}

/* ═══════════ ADOPCJA ═══════════ */
.steps{margin-top:44px;display:grid;gap:0;position:relative}
.step{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:0 0 34px;position:relative}
.step:last-child{padding-bottom:0}
.step .n{
  width:44px;height:44px;border-radius:50%;flex:0 0 auto;
  background:var(--paper);border:2px solid var(--blush);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:600;font-size:1.1rem;color:var(--terra-deep);
  position:relative;z-index:2;
}
.step:not(:last-child)::before{
  content:"";position:absolute;left:21px;top:44px;bottom:0;width:2px;
  background:repeating-linear-gradient(180deg,var(--blush) 0 6px,transparent 6px 12px);
}
.step h3{font-family:var(--serif);font-weight:600;font-size:1.25rem;padding-top:8px}
.step p{grid-column:2;color:var(--muted);font-size:.94rem;max-width:52ch;margin-top:2px}
.step p .hand{font-family:var(--hand);font-size:1.2rem;color:var(--terra);font-weight:600}

/* ═══════════ OPINIE ═══════════ */
.quotes{display:grid;gap:26px;margin-top:42px}
.quotes-scroll{
  display:flex;gap:22px;overflow-x:auto;margin-top:42px;padding:16px 6vw 28px 4px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.quotes-scroll::-webkit-scrollbar{display:none}
.quotes-scroll blockquote{flex:0 0 min(82vw,370px);scroll-snap-align:start}
blockquote{
  background:var(--paper);border-radius:6px 26px 26px 26px;padding:26px 24px 22px;
  box-shadow:0 16px 36px -20px rgba(55,42,28,.3);position:relative;
  border:1px solid var(--line);
}
blockquote .paw{position:absolute;top:-13px;left:20px;font-size:1.7rem;background:var(--cream);padding:2px 6px;border-radius:50%}
blockquote p{font-family:var(--serif);font-weight:500;font-size:1.08rem;line-height:1.55;font-style:italic}
blockquote footer{
  margin-top:14px;padding:0;background:none;border-top:0;
  font-family:var(--hand);font-weight:600;font-size:1.3rem;color:var(--terra-deep);
  transform:rotate(-1.5deg);display:inline-block;
}

/* ═══════════ BLOG ═══════════ */
#blog{padding-right:0}
#blog .head-pad{padding-right:6vw}
.blog-scroll{
  display:flex;gap:20px;overflow-x:auto;margin-top:38px;padding:6px 6vw 24px 0;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.blog-scroll::-webkit-scrollbar{display:none}
.bcard{
  scroll-snap-align:start;flex:0 0 min(80vw,330px);
  background:var(--paper);border:1px solid var(--line);border-radius:24px;overflow:hidden;
  box-shadow:0 16px 36px -22px rgba(55,42,28,.3);
  display:flex;flex-direction:column;text-align:left;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.bcard:hover{transform:translateY(-5px);box-shadow:0 24px 46px -22px rgba(55,42,28,.38)}
.bcard .ph{aspect-ratio:16/10;overflow:hidden}
.bcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.bcard:hover .ph img{transform:scale(1.06)}
.bcard .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.bcard .cat{
  font-family:var(--hand);font-weight:600;font-size:1.15rem;color:var(--terra);
}
.bcard h3{font-family:var(--serif);font-weight:600;font-size:1.28rem;line-height:1.25}
.bcard p{font-size:.88rem;color:var(--muted);line-height:1.6}
.bcard .meta{
  margin-top:auto;padding-top:10px;display:flex;justify-content:space-between;align-items:center;
  font-size:.8rem;font-weight:600;letter-spacing:.04em;color:var(--muted);
}
.bcard .meta .read{color:var(--terra-deep);border-bottom:1.5px solid var(--blush);padding-bottom:1px}

/* blog reader */
#reader{
  position:fixed;inset:0;z-index:1700;
  /* Czytnik nie jest już „wycięty" z serwisu: pod mocniejszym welonem (czytanie
     ma pierwszeństwo) leży ta sama sierść co na stronach. */
  background:
    radial-gradient(720px 340px at 50% -70px,rgba(233,201,180,.55),transparent 70%),
    radial-gradient(620px 300px at 50% 108%,rgba(233,201,180,.38),transparent 70%),
    linear-gradient(color-mix(in srgb,var(--cream) 82%,transparent) 0 0),
    var(--cream) var(--fur);
  background-repeat:no-repeat,no-repeat,no-repeat,repeat;
  background-size:auto,auto,auto,clamp(1040px,170vw,2300px) auto;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateY(100%);transition:transform .55s var(--ease);
  visibility:hidden;
}
[data-theme="dark"] #reader{
  background:
    radial-gradient(720px 340px at 50% -70px,rgba(208,154,88,.15),transparent 70%),
    radial-gradient(620px 300px at 50% 108%,rgba(208,154,88,.1),transparent 70%),
    linear-gradient(color-mix(in srgb,var(--cream) 76%,transparent) 0 0),
    var(--cream) var(--fur);
  background-repeat:no-repeat,no-repeat,no-repeat,repeat;
  background-size:auto,auto,auto,clamp(1040px,170vw,2300px) auto;
}
#reader.open{transform:none;visibility:visible}
.reader-inner{max-width:660px;margin:0 auto;padding:0 6vw 90px}
#reader .top{
  position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;
  padding:14px 0;margin-bottom:26px;
  background:rgba(250,245,236,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
#reader .back{
  font-weight:600;font-size:.88rem;color:var(--terra-deep);display:inline-flex;gap:8px;align-items:center;
  border:1.5px solid var(--line);border-radius:999px;padding:8px 16px;
  transition:background .3s,color .3s,border-color .3s,transform .3s;
}
#reader .back:hover{background:var(--terra);border-color:var(--terra);color:#fff8ef;transform:translateX(-2px)}
#reader .rlang{font-weight:600;font-family:var(--hand);font-size:1.25rem;color:var(--terra);transform:rotate(-1.5deg)}
#reader .hero-img{
  border-radius:999px 999px 28px 28px;overflow:hidden;aspect-ratio:1/1.02;margin:8px auto 30px;
  border:6px solid var(--paper);box-shadow:var(--sh);position:relative;max-width:430px;
}
#reader .hero-img::after{
  content:"";position:absolute;inset:12px;border-radius:999px 999px 20px 20px;
  border:1.5px dashed rgba(255,248,239,.55);pointer-events:none;
}
#reader .hero-img img{width:100%;height:100%;object-fit:cover}
#reader .pgal{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:-16px auto 30px;position:relative;z-index:1}
#reader .pgal .pg{
  width:64px;height:64px;border-radius:18px;overflow:hidden;padding:0;cursor:pointer;background:var(--cream-2);
  border:2.5px solid var(--paper);opacity:.6;box-shadow:0 6px 14px -8px rgba(55,42,28,.35);
  transition:opacity .3s,transform .3s,border-color .3s,box-shadow .3s;
}
#reader .pgal .pg img{width:100%;height:100%;object-fit:cover;display:block}
#reader .pgal .pg:hover{opacity:1;transform:translateY(-3px)}
#reader .pgal .pg.on{opacity:1;border-color:var(--terra);box-shadow:0 10px 20px -8px rgba(150,88,42,.55)}
#reader .cat{
  display:block;text-align:center;font-family:var(--hand);font-weight:600;font-size:1.45rem;
  color:var(--terra);transform:rotate(-1.6deg);
}
#reader h1{
  font-family:var(--serif);font-weight:500;font-size:clamp(2rem,7.4vw,2.9rem);line-height:1.12;
  letter-spacing:-.01em;margin:8px 0 12px;text-align:center;
}
#reader .meta{display:flex;justify-content:center;margin-bottom:26px;font-size:.8rem;font-weight:600;letter-spacing:.06em;color:var(--muted)}
#reader .chip{
  display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:6px 15px;
  border:1.5px solid rgba(181,118,63,.45);color:var(--terra-deep);background:var(--paper);
}
#reader .chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--terra)}
#reader .chip-ok{border-color:rgba(127,174,109,.6);color:#5d7f4e}
#reader .chip-ok::before{background:#7fae6d}
[data-theme="dark"] #reader .chip-ok{color:#a9cf9a}
#reader article p{color:#57493a;margin-bottom:18px;font-size:1.02rem;line-height:1.75}
#reader article p:first-of-type::first-letter{
  font-family:var(--serif);font-size:3.4em;float:left;line-height:.85;
  padding:4px 10px 0 0;color:var(--terra-deep);
}
#reader article h3{font-family:var(--serif);font-weight:600;font-size:1.3rem;margin:26px 0 10px}
#reader article ul{margin:0 0 18px 4px;list-style:none}
#reader article ul li{
  color:#57493a;font-size:.98rem;padding:6px 0 6px 28px;position:relative;line-height:1.55;
}
#reader article ul li::before{
  content:"";position:absolute;left:0;top:11px;width:14px;height:14px;
  background:var(--terra);opacity:.85;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cellipse cx='32' cy='43' rx='14' ry='11'/%3E%3Cellipse cx='13' cy='28' rx='6.5' ry='8.5' transform='rotate(-18 13 28)'/%3E%3Cellipse cx='26' cy='17' rx='6.5' ry='8.5' transform='rotate(-6 26 17)'/%3E%3Cellipse cx='40' cy='17' rx='6.5' ry='8.5' transform='rotate(6 40 17)'/%3E%3Cellipse cx='52' cy='29' rx='6.5' ry='8.5' transform='rotate(18 52 29)'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cellipse cx='32' cy='43' rx='14' ry='11'/%3E%3Cellipse cx='13' cy='28' rx='6.5' ry='8.5' transform='rotate(-18 13 28)'/%3E%3Cellipse cx='26' cy='17' rx='6.5' ry='8.5' transform='rotate(-6 26 17)'/%3E%3Cellipse cx='40' cy='17' rx='6.5' ry='8.5' transform='rotate(6 40 17)'/%3E%3Cellipse cx='52' cy='29' rx='6.5' ry='8.5' transform='rotate(18 52 29)'/%3E%3C/svg%3E") center/contain no-repeat;
}
#reader .reader-cta{
  margin-top:40px;border-radius:28px;padding:34px 26px;text-align:center;position:relative;overflow:hidden;
  background:
    radial-gradient(500px 240px at 85% -20%,rgba(217,164,91,.32),transparent 60%),
    linear-gradient(135deg,#3b2b18,#241a0e 70%);
  border:1px solid rgba(224,178,106,.35);box-shadow:0 26px 54px -28px rgba(36,26,14,.6);
}
#reader .reader-cta .hand{font-family:var(--hand);font-weight:600;font-size:1.5rem;color:#e8c07f;display:block;margin-bottom:16px;transform:rotate(-1.4deg)}
#reader .reader-cta .btn-terra{background:var(--blush);color:#372a1c;box-shadow:0 12px 26px -10px rgba(0,0,0,.4)}
#reader .reader-cta .btn-terra:hover{background:#f3dcc9}

/* wejście treści czytnika — miękkie, kaskadowe */
@keyframes rRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes rZoom{from{transform:scale(1.08)}to{transform:none}}
#reader.open #reader-body>*{animation:rRise .65s var(--ease) both}
#reader.open #reader-body>*:nth-child(2){animation-delay:.08s}
#reader.open #reader-body>*:nth-child(3){animation-delay:.14s}
#reader.open #reader-body>*:nth-child(4){animation-delay:.2s}
#reader.open #reader-body>*:nth-child(5){animation-delay:.26s}
#reader.open #reader-body>*:nth-child(n+6){animation-delay:.32s}
#reader.open .hero-img img{animation:rZoom 1.2s var(--ease) both}
#reader.open .reader-cta{animation:rRise .65s .3s var(--ease) both}

/* ═══════════ AFFORDANCE: klikalne karty ═══════════ */
.hint-hand{
  display:inline-block;margin-top:10px;font-family:var(--hand);font-weight:600;
  font-size:1.15rem;color:var(--muted);transform:rotate(-1.4deg);
}
.kcard{cursor:pointer}
.kcard .ph,.bcard .ph,.alum{position:relative}
.kcard .ph::after,.bcard .ph::after,.alum::after{
  content:"";position:absolute;right:10px;bottom:10px;z-index:2;width:38px;height:38px;border-radius:50%;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23b5763f'%3E%3Cellipse cx='32' cy='43' rx='14' ry='11'/%3E%3Cellipse cx='13' cy='28' rx='6.5' ry='8.5' transform='rotate(-18 13 28)'/%3E%3Cellipse cx='26' cy='17' rx='6.5' ry='8.5' transform='rotate(-6 26 17)'/%3E%3Cellipse cx='40' cy='17' rx='6.5' ry='8.5' transform='rotate(6 40 17)'/%3E%3Cellipse cx='52' cy='29' rx='6.5' ry='8.5' transform='rotate(18 52 29)'/%3E%3C/g%3E%3C/svg%3E") center/18px no-repeat;
  box-shadow:0 6px 16px -5px rgba(55,42,28,.55);
  transition:transform .35s var(--ease),background-color .3s;
  animation:pawPulse 2.8s ease-in-out infinite;
  pointer-events:none;
}
.alum::after{top:142px;bottom:auto}
.kcard:hover .ph::after,.bcard:hover .ph::after,.alum:hover::after{
  background-color:var(--terra);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23fff8ef'%3E%3Cellipse cx='32' cy='43' rx='14' ry='11'/%3E%3Cellipse cx='13' cy='28' rx='6.5' ry='8.5' transform='rotate(-18 13 28)'/%3E%3Cellipse cx='26' cy='17' rx='6.5' ry='8.5' transform='rotate(-6 26 17)'/%3E%3Cellipse cx='40' cy='17' rx='6.5' ry='8.5' transform='rotate(6 40 17)'/%3E%3Cellipse cx='52' cy='29' rx='6.5' ry='8.5' transform='rotate(18 52 29)'/%3E%3C/g%3E%3C/svg%3E");
  transform:scale(1.14) rotate(-8deg);
  animation:none;
}
@keyframes pawPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
/* mobile / dotyk — wyraźne, ale kulturalne „dotknij tutaj” */
@keyframes tapPing{
  0%{box-shadow:0 6px 16px -5px rgba(55,42,28,.55),0 0 0 0 rgba(181,118,63,.5)}
  70%{box-shadow:0 6px 16px -5px rgba(55,42,28,.55),0 0 0 17px rgba(181,118,63,0)}
  100%{box-shadow:0 6px 16px -5px rgba(55,42,28,.55),0 0 0 0 rgba(181,118,63,0)}
}
@media (hover:none){
  .kcard .ph::after,.bcard .ph::after,.alum::after{
    width:46px;height:46px;background-size:22px;right:12px;bottom:12px;
    animation:tapPing 2.4s var(--ease) infinite;
  }
  .alum::after{top:134px;bottom:auto}
  .kcard:active .ph::after,.bcard:active .ph::after,.alum:active::after{
    background-color:var(--terra);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23fff8ef'%3E%3Cellipse cx='32' cy='43' rx='14' ry='11'/%3E%3Cellipse cx='13' cy='28' rx='6.5' ry='8.5' transform='rotate(-18 13 28)'/%3E%3Cellipse cx='26' cy='17' rx='6.5' ry='8.5' transform='rotate(-6 26 17)'/%3E%3Cellipse cx='40' cy='17' rx='6.5' ry='8.5' transform='rotate(6 40 17)'/%3E%3Cellipse cx='52' cy='29' rx='6.5' ry='8.5' transform='rotate(18 52 29)'/%3E%3C/g%3E%3C/svg%3E");
  }
}

/* ═══════════ FAQ ═══════════ */
.faq{margin-top:38px;border-top:1px dashed var(--line)}
.faq-item{border-bottom:1px dashed var(--line)}
.faq-item button{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:20px 0;text-align:left;
  font-family:var(--serif);font-weight:600;font-size:1.12rem;color:var(--ink);
  transition:color .3s;
}
.faq-item button:hover{color:var(--terra-deep)}
.faq-item .ico{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--blush);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;color:var(--terra-deep);transition:transform .45s var(--ease),background .3s;
}
.faq-item.open .ico{transform:rotate(45deg);background:var(--blush)}
.faq-item .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.faq-item.open .ans{grid-template-rows:1fr}
.faq-item .ans > div{overflow:hidden}
.faq-item .ans p{color:var(--muted);font-size:.94rem;padding:0 34px 20px 0;max-width:60ch}

/* ═══════════ KONTAKT ═══════════ */
#kontakt{padding-left:6vw;padding-right:6vw}
.contact-card{
  background:var(--ink);color:#f5ecdd;border-radius:34px;
  padding:clamp(38px,8vw,64px) clamp(24px,6vw,56px);
  position:relative;overflow:hidden;text-align:center;
}
.contact-card::before,.contact-card::after{
  content:"";position:absolute;border-radius:50%;
  border:1.5px solid rgba(233,201,180,.18);
}
.contact-card::before{width:280px;height:280px;right:-110px;top:-110px}
.contact-card::after{width:200px;height:200px;left:-90px;bottom:-90px}
.contact-card .hand-label{color:var(--blush)}
.contact-card h2{color:#fbf3e4}
.contact-card h2 em{color:var(--blush)}
.contact-card .lead{color:rgba(245,236,221,.72);margin-left:auto;margin-right:auto}
.contact-card .cta-row{justify-content:center;position:relative;z-index:2}
.contact-card .btn-terra{background:var(--blush);color:var(--ink);box-shadow:0 12px 26px -10px rgba(0,0,0,.4)}
.contact-card .btn-terra:hover{background:#f3dcc9}
.contact-card .link-arrow{color:#f5ecdd;border-color:rgba(233,201,180,.5)}
.contact-card .link-arrow:hover{color:var(--blush);border-color:var(--blush)}
.direct{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px;position:relative;z-index:2}
.direct a{
  display:inline-flex;align-items:center;gap:9px;font-size:.9rem;font-weight:600;letter-spacing:.02em;
  color:#f5ecdd;border:1.5px solid rgba(233,201,180,.4);border-radius:999px;padding:9px 18px;
  transition:background .3s,border-color .3s,color .3s,transform .3s;
}
.direct a:hover{background:rgba(233,201,180,.14);border-color:var(--blush);color:var(--blush);transform:translateY(-2px)}
.direct a svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* ═══════════ FOOTER ═══════════ */
footer{
  margin-top:clamp(70px,13vw,120px);padding:40px 6vw calc(30px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--cream-2);
  display:flex;flex-direction:column;gap:20px;
}
footer .cols{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between}
footer .sig{font-size:.86rem;color:var(--muted)}
footer .sig a{font-weight:600;color:var(--terra-deep);border-bottom:2px solid var(--blush);padding-bottom:1px}
footer .legal{font-size:.82rem;color:var(--muted)}
.socials{display:flex;gap:10px;justify-content:center;margin:26px 0 20px}
.socials a{
  width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--terra-deep);
  transition:background .3s,border-color .3s,color .3s,transform .3s,box-shadow .3s;
}
.socials a:hover{background:var(--terra);border-color:var(--terra);color:#fff8ef;transform:translateY(-3px);box-shadow:0 10px 20px -8px rgba(181,118,63,.55)}
.socials a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
footer .hand{font-family:var(--hand);font-weight:600;font-size:1.3rem;color:var(--terra);transform:rotate(-1.5deg)}

/* ═══════════ AI ASSISTANT ═══════════ */
#ai-fab{
  position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:1500;
  width:62px;height:62px;border-radius:50%;
  background:linear-gradient(145deg,var(--terra) 0%,var(--terra-deep) 100%);color:#fff8ef;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 32px -8px rgba(150,88,42,.6);
  transition:transform .35s var(--ease),box-shadow .3s;
}
#ai-fab::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid var(--terra);opacity:0;animation:fabPulse 3.2s var(--ease) infinite;
}
@keyframes fabPulse{0%{transform:scale(.82);opacity:.55}70%{transform:scale(1.22);opacity:0}100%{opacity:0}}
#ai-fab:hover{transform:scale(1.07) rotate(-4deg);box-shadow:0 18px 40px -10px rgba(150,88,42,.7)}
#ai-fab .paw{font-size:1.9rem;fill:#fff8ef}
#ai-fab .dot{
  position:absolute;top:3px;right:3px;width:13px;height:13px;border-radius:50%;
  background:#7fae6d;border:2.5px solid var(--cream);
}
#ai-fab .fab-label{
  position:absolute;right:72px;top:50%;transform:translateY(-50%) rotate(-2deg);
  font-family:var(--hand);font-weight:600;font-size:1.2rem;color:var(--terra-deep);
  white-space:nowrap;pointer-events:none;
  text-shadow:0 1px 0 var(--cream),0 -1px 0 var(--cream),1px 0 0 var(--cream),-1px 0 0 var(--cream);
}
.ai-teaser{
  position:fixed;right:18px;bottom:calc(94px + env(safe-area-inset-bottom));z-index:1490;
  max-width:min(250px,64vw);
  background:var(--paper);border:1.5px solid var(--line);border-radius:20px 20px 5px 20px;
  padding:13px 17px;text-align:left;cursor:pointer;
  font-family:var(--hand);font-weight:600;font-size:1.2rem;line-height:1.3;color:var(--ink);
  box-shadow:0 16px 36px -16px rgba(55,42,28,.45);
  opacity:0;transform:translateY(12px) scale(.9);transform-origin:bottom right;
  transition:opacity .45s var(--ease),transform .45s var(--ease),border-color .3s;
  pointer-events:none;
}
.ai-teaser b{font-weight:600;color:var(--terra-deep)}
.ai-teaser.show{opacity:1;transform:none;pointer-events:auto}
.ai-teaser:hover{border-color:var(--terra)}
.ai-teaser::after{
  content:"";position:absolute;right:16px;bottom:-7px;width:13px;height:13px;
  background:var(--paper);border-right:1.5px solid var(--line);border-bottom:1.5px solid var(--line);
  transform:rotate(45deg);
}
#ai-panel{
  position:fixed;z-index:1600;left:0;right:0;bottom:0;
  height:min(80svh,660px);
  background:var(--cream);border-radius:30px 30px 0 0;overflow:hidden;
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;
  transform:translateY(106%);visibility:hidden;
  transition:transform .55s var(--ease),box-shadow .3s,visibility 0s .6s;
}
#ai-panel.open{
  transform:none;visibility:visible;
  box-shadow:0 -24px 70px rgba(55,42,28,.35);
  transition:transform .55s var(--ease),box-shadow .3s;
}
#ai-head{
  display:flex;align-items:center;gap:12px;padding:15px 18px;
  background:linear-gradient(120deg,var(--blush) 0%,var(--cream-2) 58%,var(--paper) 100%);
  border-bottom:1px solid var(--line);
}
#ai-head img{
  width:46px;height:46px;border-radius:50%;object-fit:cover;
  border:2.5px solid var(--paper);box-shadow:0 6px 14px -5px rgba(55,42,28,.35);
}
#ai-head .t{flex:1}
#ai-head .t b{font-family:var(--serif);font-weight:600;font-size:1.14rem;display:block;line-height:1.15}
#ai-head .t span{
  display:inline-flex;align-items:center;gap:6px;margin-top:2px;
  font-family:var(--hand);font-weight:600;font-size:1.05rem;color:#5d7f4a;
}
#ai-head .t span::before{
  content:"";width:8px;height:8px;border-radius:50%;background:#7fae6d;
  box-shadow:0 0 0 3px rgba(127,174,109,.28);
}
#ai-close{
  padding:8px;color:var(--muted);font-size:1.6rem;line-height:1;border-radius:50%;
  transition:color .3s,transform .3s,background .3s;
}
#ai-close:hover{color:var(--terra-deep);background:rgba(255,253,248,.65);transform:rotate(90deg)}
#ai-log{
  flex:1;overflow-y:auto;padding:20px 18px;display:flex;flex-direction:column;gap:12px;
  -webkit-overflow-scrolling:touch;
  background-image:radial-gradient(rgba(181,118,63,.055) 1.4px,transparent 1.5px);
  background-size:24px 24px;
}
#ai-log::-webkit-scrollbar{width:5px}
#ai-log::-webkit-scrollbar-thumb{background:var(--blush);border-radius:99px}
.msg{max-width:85%;padding:12px 16px;font-size:.93rem;line-height:1.6;animation:msgIn .45s var(--ease)}
@keyframes msgIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.msg.bot{
  background:var(--paper);border:1px solid var(--line);align-self:flex-start;position:relative;
  margin-left:38px;border-radius:6px 20px 20px 20px;box-shadow:0 8px 20px -12px rgba(55,42,28,.3);
}
.msg.bot::before{
  content:"";position:absolute;left:-38px;top:0;width:28px;height:28px;border-radius:50%;
  background:var(--cream-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23b5763f'%3E%3Cellipse cx='32' cy='43' rx='14' ry='11'/%3E%3Cellipse cx='13' cy='28' rx='6.5' ry='8.5' transform='rotate(-18 13 28)'/%3E%3Cellipse cx='26' cy='17' rx='6.5' ry='8.5' transform='rotate(-6 26 17)'/%3E%3Cellipse cx='40' cy='17' rx='6.5' ry='8.5' transform='rotate(6 40 17)'/%3E%3Cellipse cx='52' cy='29' rx='6.5' ry='8.5' transform='rotate(18 52 29)'/%3E%3C/g%3E%3C/svg%3E") center/16px no-repeat;
  border:1.5px solid var(--line);box-shadow:0 4px 10px -4px rgba(55,42,28,.3);
}
.msg.bot a{color:var(--terra-deep);font-weight:600;text-decoration:underline;text-decoration-color:var(--blush)}
.msg.user{
  background:linear-gradient(135deg,var(--terra) 0%,var(--terra-deep) 100%);
  color:#fff8ef;align-self:flex-end;border-radius:20px 6px 20px 20px;font-weight:500;
  box-shadow:0 8px 18px -10px rgba(150,88,42,.55);
}
.typing{
  display:inline-flex;gap:5px;padding:15px 18px;background:var(--paper);border:1px solid var(--line);
  border-radius:6px 20px 20px 20px;align-self:flex-start;margin-left:38px;position:relative;
  box-shadow:0 8px 20px -12px rgba(55,42,28,.3);
}
.typing::before{
  content:"";position:absolute;left:-38px;top:0;width:28px;height:28px;border-radius:50%;
  background:var(--cream-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23b5763f'%3E%3Cellipse cx='32' cy='43' rx='14' ry='11'/%3E%3Cellipse cx='13' cy='28' rx='6.5' ry='8.5' transform='rotate(-18 13 28)'/%3E%3Cellipse cx='26' cy='17' rx='6.5' ry='8.5' transform='rotate(-6 26 17)'/%3E%3Cellipse cx='40' cy='17' rx='6.5' ry='8.5' transform='rotate(6 40 17)'/%3E%3Cellipse cx='52' cy='29' rx='6.5' ry='8.5' transform='rotate(18 52 29)'/%3E%3C/g%3E%3C/svg%3E") center/16px no-repeat;
  border:1.5px solid var(--line);
}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--terra);animation:tp 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
#ai-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 18px 12px;scrollbar-width:none}
#ai-chips::-webkit-scrollbar{display:none}
#ai-chips button{
  flex:0 0 auto;font-size:.8rem;font-weight:600;color:var(--terra-deep);
  border:1.5px solid var(--blush);border-radius:999px;padding:8px 15px;background:var(--paper);
  box-shadow:0 4px 10px -6px rgba(55,42,28,.25);
  transition:all .3s;
}
#ai-chips button:hover{background:var(--terra);color:#fff8ef;border-color:var(--terra);transform:translateY(-2px)}
#ai-form{display:flex;flex-wrap:wrap;gap:10px;padding:12px 14px 8px;border-top:1px solid var(--line);background:var(--paper)}
/* nota o AI + link do polityki prywatności — wymóg przejrzystości wobec użytkownika */
#ai-note{
  flex:0 0 100%;order:3;
  margin:0;padding:0 16px calc(11px + env(safe-area-inset-bottom));background:var(--paper);
  font-size:.78rem;line-height:1.5;color:var(--muted);text-align:center;
}
#ai-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
#ai-note a:hover{opacity:.85}
#ai-form input{
  flex:1;background:var(--cream);border:1.5px solid var(--line);color:var(--ink);
  font-family:var(--sans);font-size:.95rem;padding:13px 18px;border-radius:999px;outline:none;
  transition:border-color .3s,box-shadow .3s;
}
#ai-form input:focus{border-color:var(--terra);box-shadow:0 0 0 4px rgba(181,118,63,.14)}
#ai-form button{
  width:49px;height:49px;border-radius:50%;flex:0 0 auto;color:#fff8ef;
  background:linear-gradient(145deg,var(--terra) 0%,var(--terra-deep) 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 18px -8px rgba(150,88,42,.6);
  transition:box-shadow .3s,transform .3s;
}
#ai-form button:hover{transform:rotate(-8deg) scale(1.06);box-shadow:0 12px 24px -8px rgba(150,88,42,.7)}
#ai-form button .paw{font-size:1.3rem;fill:#fff8ef}

/* DIARY */
.dline{margin-top:44px;display:grid}
.ditem{display:grid;grid-template-columns:auto 1fr;gap:16px;padding-bottom:28px;position:relative}
.ditem:last-child{padding-bottom:0}
.ditem .wk{width:44px;height:44px;border-radius:50%;background:var(--paper);border:2px solid var(--blush);display:flex;align-items:center;justify-content:center;font-family:var(--hand);font-weight:600;font-size:1.2rem;color:var(--terra-deep);position:relative;z-index:2}
.ditem:not(:last-child)::before{content:"";position:absolute;left:21px;top:44px;bottom:0;width:2px;background:repeating-linear-gradient(180deg,var(--blush) 0 6px,transparent 6px 12px)}
.dcard{background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:grid;grid-template-columns:104px 1fr;box-shadow:0 14px 30px -20px rgba(55,42,28,.3)}
.dcard .dph{min-height:122px}
.dcard .dph img{width:100%;height:100%;object-fit:cover}
.dcard .dbody{padding:14px 16px}
.dcard h3{font-family:var(--serif);font-weight:600;font-size:1.1rem}
.dcard p{font-size:.86rem;color:var(--muted);line-height:1.55;margin-top:4px}
/* WAITING LIST */
.wl-card{margin-top:44px;background:var(--paper);border:1px solid var(--line);border-radius:26px;padding:clamp(24px,6vw,40px);box-shadow:var(--sh);max-width:660px}
.wl-card form{display:grid;gap:12px;margin-top:18px}
.wl-card input,.wl-card select,.wl-card textarea{width:100%;background:var(--cream);border:1.5px solid var(--line);border-radius:999px;padding:13px 18px;font-family:var(--sans);font-size:.95rem;color:var(--ink);outline:none;transition:border-color .3s}
.wl-card textarea{border-radius:20px;resize:vertical;min-height:120px;line-height:1.6}
/* sam kolor ramki to za słaby wskaźnik fokusu — dokładamy pierścień (audyt E-1) */
.wl-card input:focus,.wl-card select:focus,.wl-card textarea:focus{border-color:var(--terra);box-shadow:0 0 0 3px rgba(150,88,42,.22)}
.wl-card input[aria-invalid="true"]{border-color:#a33a2b}
/* honeypot — poza ekranem, niewidoczny i niedostępny dla czytników */
.wl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wl-err{
  margin-top:12px;padding:12px 16px;border-radius:14px;
  background:rgba(163,58,43,.08);border:1px solid rgba(163,58,43,.3);
  color:#8c2f22;font-size:.88rem;line-height:1.5;
}
.wl-err a{color:inherit;font-weight:600}
[data-theme="dark"] .wl-err{background:rgba(230,120,100,.12);border-color:rgba(230,120,100,.35);color:#f0b3a6}
.wl-card select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2396582a' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center}
.wl-card .btn{justify-content:center}
.wl-ok{display:none;text-align:center;padding:22px 0 8px}
.wl-ok .hand{font-family:var(--hand);font-weight:600;font-size:1.7rem;color:var(--terra-deep)}
.wl-card.sent form{display:none}
.wl-card.sent .wl-ok{display:block}
.wl-note{font-size:.8rem;color:var(--muted);margin-top:12px;text-align:center}
/* ═══════════ REZERWACJA MIEJSCA POD TREŚĆ Z JS ═══════════
   Karuzele i listy są wypełniane przez app.js po załadowaniu strony. Zanim to nastąpi,
   kontenery mają zerową wysokość i treść pod nimi „podskakuje” — pomiar z 16.08.2026
   pokazał z tego powodu CLS 0,04. Rezerwujemy wysokość zbliżoną do docelowej.
   min-height, nie height: gdy treść jest wyższa, kontener normalnie rośnie. */
.colors-scroll{min-height:344px}
.kittens-scroll{min-height:392px}
.quotes-scroll{min-height:250px}
.blog-scroll{min-height:398px}
.alumni-scroll{min-height:210px}
.dline{min-height:460px}
.faq{min-height:420px}
@media(min-width:900px){
  .colors-scroll{min-height:392px}
  .kittens-scroll{min-height:436px}
  .blog-scroll{min-height:430px}
}

/* CENA */
.price-card{
  margin-top:34px;background:var(--paper);border:1px solid var(--line);
  border-radius:26px;padding:clamp(24px,6vw,40px);box-shadow:var(--sh);max-width:760px;
}
.price-card .lead{margin-top:0}
.price-inc-t{margin-top:26px;font-weight:600}
.price-inc{list-style:none;margin-top:12px;display:grid;gap:9px}
.price-inc li{display:flex;align-items:flex-start;gap:11px;line-height:1.55}
.price-inc .paw{width:17px;height:17px;flex:0 0 auto;margin-top:5px;fill:var(--terra)}
.price-note{
  margin-top:24px;padding:15px 18px;border-radius:16px;
  background:var(--cream-2);border:1px solid var(--line);font-size:.94rem;
}
.price-card .cta-row{margin-top:26px}

/* HEALTH */
.badges{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:40px}
.badge{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:22px 16px;text-align:center;box-shadow:0 14px 30px -22px rgba(55,42,28,.3)}
.badge b{font-family:var(--serif);font-weight:600;font-size:1.3rem;color:var(--terra-deep);display:block}
.badge span{font-size:.78rem;color:var(--muted);display:block;margin-top:6px;line-height:1.45}
.health-hand{margin-top:24px;font-family:var(--hand);font-weight:600;font-size:1.4rem;color:var(--terra);transform:rotate(-1.5deg);display:inline-block}
/* ═══════════ WIEDZA / COAPE ═══════════ */
.hero-coape{
  display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  font-family:var(--serif);font-weight:600;font-size:.88rem;letter-spacing:.04em;
  color:var(--terra-deep);border:1.5px solid rgba(181,118,63,.5);border-radius:999px;
  padding:8px 18px;transition:background .3s,border-color .3s,transform .3s;
}
.hero-coape:hover{background:rgba(181,118,63,.1);border-color:var(--terra);transform:translateY(-1px)}
.hero-coape .paw{fill:var(--terra)}
.know-panel{
  position:relative;overflow:hidden;border-radius:34px;
  padding:clamp(34px,6.5vw,70px) clamp(22px,5vw,64px);
  background:
    radial-gradient(900px 480px at 88% -10%,rgba(217,164,91,.28),transparent 60%),
    radial-gradient(700px 420px at -8% 110%,rgba(181,118,63,.18),transparent 55%),
    linear-gradient(135deg,#3b2b18,#241a0e 70%);
  border:1px solid rgba(224,178,106,.35);
  box-shadow:0 34px 70px -34px rgba(36,26,14,.65);
  color:#f5ecdd;
}
.know-panel::after{
  content:"COAPE";position:absolute;right:-14px;bottom:-46px;pointer-events:none;
  font-family:var(--serif);font-weight:600;font-size:clamp(6rem,18vw,13rem);letter-spacing:.08em;
  color:transparent;-webkit-text-stroke:1.5px rgba(224,178,106,.16);
}
.know-panel .hand-label{color:#e8c07f}
.know-panel h2{color:#fbf3e4;max-width:20ch}
.know-panel h2 em{color:#e8c07f}
.know-txt p{color:rgba(245,236,221,.85)}
.know-txt b{color:#eec98f;font-weight:600}
.know-txt .hand{font-size:1.35rem;font-weight:600;color:#e8c07f;display:inline-block;transform:rotate(-1.4deg)}
.know-grid{display:grid;gap:34px;margin-top:38px;align-items:center}
/* ── Karta COAPE ────────────────────────────────────────────────────────────
   To biały „dyplom" leżący na ciemnym panelu — i taki jest w OBU motywach,
   bo .know-panel ma ciemne tło niezależnie od theme'u. Dlatego jej wnętrze NIE
   może używać tokenów motywu: --ink i --muted odwracają się w ciemnym i tekst
   stawał się kremowy na białym (zmierzone 1,2:1 — praktycznie niewidoczny).
   Zamiast tego karta ma własne, stałe tokeny kontekstowe. Zmierzone na #fffdf8:
   ink 13,7:1 · muted 6,7:1 · accent 6,2:1. */
.know-card{
  --card-bg:#fffdf8;
  --card-ink:#372a1c;
  --card-muted:#6a5842;
  --card-accent:#8d5127;
  background:var(--card-bg);border:1px solid rgba(224,178,106,.5);border-radius:24px;
  padding:38px 30px;text-align:center;position:relative;color:var(--card-ink);
  box-shadow:0 24px 50px -24px rgba(0,0,0,.55);transform:rotate(1.1deg);transition:transform .4s var(--ease);
}
.know-card:hover{transform:rotate(0) scale(1.015)}
.know-card::after{content:"";position:absolute;inset:11px;border:1.5px dashed rgba(141,81,39,.45);border-radius:16px;pointer-events:none}
.know-card b{font-family:var(--serif);font-weight:600;font-size:2.5rem;letter-spacing:.14em;color:var(--card-accent);display:block}
.kc-sub{display:block;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--card-muted);margin-top:6px}
.kc-line{display:block;font-family:var(--serif);font-weight:500;font-size:1.05rem;margin-top:16px;line-height:1.5;color:var(--card-ink)}
.kc-line + .kc-line{margin-top:2px;font-family:var(--sans);font-weight:400;font-size:.9rem;color:var(--card-muted)}
.kc-status{display:inline-block;margin-top:18px;font-family:var(--hand);font-weight:600;font-size:1.25rem;font-style:normal;color:var(--card-accent);border:1.5px solid rgba(141,81,39,.5);border-radius:999px;padding:3px 16px;transform:rotate(-1.8deg);background:rgba(233,201,180,.3)}
.know-list{list-style:none;display:grid;gap:12px;margin-top:42px;position:relative;z-index:2}
.know-list li{display:flex;align-items:center;gap:12px;background:rgba(255,248,239,.07);border:1px solid rgba(233,201,180,.25);border-radius:16px;padding:14px 18px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:background .3s,border-color .3s}
.know-list li:hover{background:rgba(255,248,239,.12);border-color:rgba(232,192,127,.5)}
.know-list li .paw{flex:0 0 auto;fill:#d9a45b}
.know-list li span{font-size:.92rem;line-height:1.45;color:#f0e4cf}
@media(min-width:700px){.know-list{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){
  .know-grid{grid-template-columns:1.08fr .92fr;gap:56px}
  .know-list{grid-template-columns:repeat(3,1fr)}
}

/* ALUMNI */
.alumni-scroll{display:flex;gap:16px;overflow-x:auto;margin-top:30px;padding:6px 2px 20px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.alumni-scroll::-webkit-scrollbar{display:none}
.alum{scroll-snap-align:start;flex:0 0 150px;cursor:pointer;transition:transform .35s var(--ease)}
.alum:hover{transform:translateY(-5px)}
.alum:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:16px}
.alum img{width:150px;height:190px;object-fit:cover;border-radius:16px;border:4px solid var(--paper);box-shadow:0 12px 26px -14px rgba(55,42,28,.35)}
.alum:nth-child(odd){transform:rotate(-2deg)}
.alum:nth-child(even){transform:rotate(2deg)}
.alum figcaption{font-family:var(--hand);font-weight:600;font-size:1.12rem;color:var(--muted);text-align:center;margin-top:8px}
/* PEDIGREE + PROFILE */
.ped{margin-top:12px;display:grid;gap:10px}
.ped-row{display:flex;gap:10px;justify-content:center}
.ped-box{
  flex:1;max-width:170px;background:var(--paper);border:1.5px solid var(--blush);border-radius:16px;
  padding:12px 10px;text-align:center;box-shadow:0 12px 24px -18px rgba(55,42,28,.35);
  transition:transform .3s var(--ease),border-color .3s;
}
.ped-box:hover{transform:translateY(-2px);border-color:var(--terra)}
.ped-box.main{border-color:var(--terra);background:linear-gradient(160deg,var(--paper),var(--cream-2))}
.ped-box b{font-family:var(--serif);font-weight:600;font-size:1rem;display:block}
.ped-box span{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ped-x{text-align:center;font-family:var(--hand);color:var(--terra);font-size:1.35rem;line-height:1}
.pfacts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:20px 0}
.pfacts div{
  position:relative;overflow:hidden;background:var(--paper);border:1px solid var(--line);
  border-radius:16px;padding:13px 16px;box-shadow:0 12px 24px -18px rgba(55,42,28,.35);
}
.pfacts div::after{
  content:"";position:absolute;right:-8px;bottom:-10px;width:46px;height:46px;
  background:var(--blush);opacity:.4;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cellipse cx='32' cy='43' rx='14' ry='11'/%3E%3Cellipse cx='13' cy='28' rx='6.5' ry='8.5' transform='rotate(-18 13 28)'/%3E%3Cellipse cx='26' cy='17' rx='6.5' ry='8.5' transform='rotate(-6 26 17)'/%3E%3Cellipse cx='40' cy='17' rx='6.5' ry='8.5' transform='rotate(6 40 17)'/%3E%3Cellipse cx='52' cy='29' rx='6.5' ry='8.5' transform='rotate(18 52 29)'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cellipse cx='32' cy='43' rx='14' ry='11'/%3E%3Cellipse cx='13' cy='28' rx='6.5' ry='8.5' transform='rotate(-18 13 28)'/%3E%3Cellipse cx='26' cy='17' rx='6.5' ry='8.5' transform='rotate(-6 26 17)'/%3E%3Cellipse cx='40' cy='17' rx='6.5' ry='8.5' transform='rotate(6 40 17)'/%3E%3Cellipse cx='52' cy='29' rx='6.5' ry='8.5' transform='rotate(18 52 29)'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pfacts span{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block}
.pfacts b{font-family:var(--serif);font-weight:600;font-size:1.02rem}
.kcard .ph{cursor:pointer}
.pask{margin-top:22px;width:100%}
.ph3{
  font-family:var(--serif);font-weight:600;font-size:1.25rem;margin:26px 0 10px;
  display:flex;align-items:center;gap:11px;
}
.ph3::before{content:"";flex:0 0 22px;height:2.5px;border-radius:2px;background:linear-gradient(90deg,var(--terra),var(--blush))}
.ptxt{color:#57493a;line-height:1.75;font-size:.98rem}
@media(min-width:900px){.dcard{grid-template-columns:190px 1fr}.dcard .dbody{padding:20px 24px}.badges{grid-template-columns:repeat(4,1fr)}}

/* ═══════════ DESKTOP ═══════════ */
@media(min-width:900px){
  body{font-size:17px}
  .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:150px;padding-bottom:20px}
  .hero-fig{margin-top:0}
  .about-grid{grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}
  #charakter .wrap{grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
  .colors-scroll,.blog-scroll{gap:24px}
  .quotes{grid-template-columns:1fr 1fr;gap:34px}
  .steps{grid-template-columns:repeat(2,1fr);gap:34px 60px}
  .step:not(:last-child)::before{display:none}
  .faq{max-width:760px}
  #ai-panel{left:auto;right:26px;bottom:26px;width:410px;border-radius:26px;border:1px solid var(--line)}
}
/* THEME TOGGLE */
.theme-btn{
  width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--terra-deep);
  margin-right:4px;transition:border-color .3s,transform .3s;background:transparent;
}
.theme-btn:hover{border-color:var(--terra);transform:rotate(-8deg)}
.theme-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* DARK THEME — brandowe brązy i złoto, nie czerń */
[data-theme="dark"]{
  --fur:url("fur-dark-v2.webp");
  --cream:#221a11;
  --cream-2:#2a2015;
  --paper:#31261a;
  --ink:#f2e7d5;
  --muted:#b3a288;
  --terra:#d09a58;
  --terra-deep:#e2b57f;
  --blush:#7d5c3e;
  --line:rgba(240,228,205,.15);
  --sh:0 18px 44px -18px rgba(0,0,0,.55);
}
[data-theme="dark"] header{background:rgba(34,26,17,.88)}
/* W ciemnym print jest kontrastowy sam z siebie — welon lżejszy niż w jasnym. */
[data-theme="dark"] body::before{
  background-image:linear-gradient(color-mix(in srgb,var(--cream) 50%,transparent) 0 0),var(--fur);
}
[data-theme="dark"] #reader .top{background:rgba(34,26,17,.92)}
[data-theme="dark"] .kcard .st.free{background:rgba(127,174,109,.2);color:#a9cf9a}
[data-theme="dark"] .kcard .st.sold{background:rgba(181,118,63,.22);color:#e0b48d}
[data-theme="dark"] #ai-head .t span{color:#a9cf9a}
[data-theme="dark"] #reader article p,[data-theme="dark"] .ptxt{color:#cbbba0}
[data-theme="dark"] .contact-card{background:#3a2a19;border:1px solid rgba(224,178,106,.28)}
/* W ciemnym --terra to JASNY bursztyn (#d09a58) — biały tekst dawał na nim 2,36:1.
   Ciemny atrament na tym samym tle daje 6,87:1. Dotyczy wszystkich przycisków terra,
   nie tylko tego w karcie kontaktu (audyt: główne CTA „Poznaj kocięta"). */
[data-theme="dark"] .btn-terra{color:#241a0e}
[data-theme="dark"] .btn-terra .paw{fill:#241a0e}
[data-theme="dark"] .contact-card .btn-terra{background:var(--terra);color:#241a0e}
/* --blush w ciemnym (#7d5c3e) na tle karty kontaktu #3a2a19 dawał 2,28:1 → 8,05:1 */
[data-theme="dark"] .contact-card .hand-label{color:#e8c07f}
[data-theme="dark"] .brand img{border-color:var(--line)}
[data-theme="dark"] .bcard,[data-theme="dark"] .ccard,[data-theme="dark"] .kcard,[data-theme="dark"] blockquote,[data-theme="dark"] .dcard,[data-theme="dark"] .badge,[data-theme="dark"] .know-card,[data-theme="dark"] .know-list li{box-shadow:0 16px 36px -22px rgba(0,0,0,.55)}
::placeholder{color:var(--muted);opacity:.8}

/* ═══════════ OGRANICZONY RUCH ═══════════
   Poprzednia wersja kasowała wszystko globalnie (animation/transition = .01ms na *).
   Skutek uboczny: wskaźnik pisania czatu zamierał na opacity .25 — użytkownik
   klikał „wyślij" i przez ~3 s nie dostawał żadnej informacji, że bot pracuje.
   Teraz znika RUCH, a zostaje ZMIANA STANU. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  /* 1. Przejścia zostają, ale są za krótkie, by dało się odczuć przemieszczenie.
        Kolor, tło i obrys nadal widocznie się zmieniają — to jest sprzężenie zwrotne. */
  *,*::before,*::after{
    transition-duration:.12s!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
  }

  /* 2. Pętle dekoracyjne wyłączamy całkowicie i zerujemy przesunięcie,
        żeby nie zostawić elementu w losowej klatce. */
  .ticker .track,.sticker,.swipe-hint .paw,#ai-fab::after,.ai-teaser{
    animation:none!important;transform:none!important;
  }

  /* 3. Wejścia sekcji: pokazujemy od razu w stanie docelowym, bez wjeżdżania. */
  .reveal,.reveal.in{opacity:1!important;transform:none!important}

  /* 4. WYJĄTEK — sprzężenie zwrotne musi przetrwać.
        Kropki „bot pisze" zostają w pełni widoczne zamiast zamarzać na 25% krycia.
        Do tego dochodzi tekstowa etykieta (.typing::after) i aria-busy z app.js. */
  .typing i{animation:none!important;opacity:1!important;transform:none!important}
  .typing::after{
    content:attr(data-label);
    font-size:.82rem;color:var(--muted);align-self:center;margin-left:4px;white-space:nowrap;
  }
}

/* ═══════════ MULTI-PAGE ═══════════ */
.page-head{padding:124px 6vw 0}
.page-head+.flat{padding-top:34px}
nav a.on{color:var(--terra)}
nav a.on .paw{opacity:1;transform:none}
.teaser-link{margin-top:26px;display:inline-block}

/* ═══════════ UX POLISH: desktop nav, scroll arrows, touch ═══════════ */
html{-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.kcard:active,.ccard:active,.bcard:active{transition-duration:.1s}
.theme-btn{width:42px;height:42px}
@media(max-width:899px){
  .wl-card input,.wl-card select,#ai-form input{font-size:16px}
}
/* desktop inline nav */
.topnav{display:none}
@media(min-width:900px){
  .topnav{display:flex;align-items:center;gap:24px;margin-right:16px}
  .topnav a{font-family:var(--serif);font-weight:500;font-size:.98rem;color:var(--muted);position:relative;padding:6px 2px;transition:color .3s}
  .topnav a:hover{color:var(--terra-deep)}
  .topnav a.on{color:var(--terra-deep)}
  .topnav a.on::after{content:"";position:absolute;left:2px;right:2px;bottom:0;height:2px;background:var(--terra);border-radius:2px}
  .burger{display:none}
}
/* scroll arrows (desktop) */
.scroller{position:relative}
.sc-btn{
  position:absolute;top:34%;z-index:6;width:46px;height:46px;border-radius:50%;
  background:var(--paper);border:1px solid var(--line);
  box-shadow:0 10px 24px -10px rgba(55,42,28,.4);
  color:var(--terra-deep);font-size:1.5rem;line-height:1;
  display:none;align-items:center;justify-content:center;
  transition:opacity .3s,transform .3s,background .3s;
}
.sc-btn:hover{transform:scale(1.08);background:var(--cream-2)}
.sc-btn.prev{left:4px}
.sc-btn.next{right:calc(6vw + 4px)}
@media(min-width:900px){
  .sc-btn{display:flex}
  .sc-btn[disabled]{opacity:0;pointer-events:none}
}
@media(min-width:1400px){.sc-btn.next{right:4px}}
/* centered container on very wide screens */
@media(min-width:1400px){
  section,.hero,.page-head{padding-left:calc(50vw - 640px);padding-right:calc(50vw - 640px)}
  header,footer{padding-left:calc(50vw - 640px);padding-right:calc(50vw - 640px)}
}