/* ════════════════════════════════════════════════════════════
   HEART FOR ANIMALS UA — «Кожен кіт — маленький всесвіт»
   Редизайн cats.html · день/ніч · живі SVG-коти · мур-тест
   ════════════════════════════════════════════════════════════ */

:root{
  /* ДЕНЬ — теплий папір, чорнило, корал */
  --bg:        #f6eee0;
  --bg-2:      #efe4cf;
  --card:      #fffdf6;
  --ink:       #2d2014;
  --ink-soft:  #6d5c4b;
  --ink-faint: #98876f;
  --line:      #e2d5bd;
  --coral:     #e0603a;
  --coral-deep:#bd4a28;
  --coral-soft:#fbe0d2;
  --honey:     #f2b32e;
  --honey-soft:#faeccb;
  --sage:      #7ba374;
  --sage-soft: #e2ecda;
  --berry:     #b95c8a;
  --berry-soft:#f3dfe9;
  --sky:       #6fa8bd;
  --sky-soft:  #ddeaef;
  --star:      #f2b32e;
  --glow:      0 0 0 rgba(0,0,0,0);
  --sh-sm: 0 1px 2px rgba(80,55,30,.07), 0 2px 10px rgba(80,55,30,.06);
  --sh-md: 0 6px 22px rgba(80,55,30,.12), 0 2px 6px rgba(80,55,30,.07);
  --sh-lg: 0 24px 60px rgba(80,55,30,.18), 0 8px 18px rgba(80,55,30,.09);

  --r-sm:12px; --r-md:22px; --r-lg:32px; --r-xl:46px;
  --maxw:1240px;
  --gut: clamp(18px, 4vw, 56px);
  --ff-d:'Unbounded', system-ui, sans-serif;
  --ff-b:'Manrope', system-ui, sans-serif;

  /* очі котів */
  --iris-day:#c98a2c;
  --eye-glow: transparent;
}

/* НІЧ — чорнильний котячий космос */
html[data-theme="night"]{
  --bg:        #14112b;
  --bg-2:      #1b1738;
  --card:      #201c40;
  --ink:       #f3ecdb;
  --ink-soft:  #c0b6d8;
  --ink-faint: #8d84ad;
  --line:      #35305c;
  --coral:     #ff7a50;
  --coral-deep:#ff9068;
  --coral-soft:#3c2547;
  --honey:     #ffc93f;
  --honey-soft:#3a2f52;
  --sage:      #8fc389;
  --sage-soft: #24354a;
  --berry:     #e083b4;
  --berry-soft:#3a2547;
  --sky:       #8fc7de;
  --sky-soft:  #223a52;
  --star:      #ffd76a;
  --sh-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.35);
  --sh-md: 0 6px 22px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
  --sh-lg: 0 24px 60px rgba(0,0,0,.6), 0 8px 18px rgba(0,0,0,.45);
  --eye-glow: rgba(255,214,106,.85);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body{ overflow-x:clip; }
body{
  margin:0; font-family:var(--ff-b); background:var(--bg); color:var(--ink);
  font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .6s ease, color .6s ease;
}
/* зерно паперу */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
html[data-theme="night"] body::before{ opacity:.08; mix-blend-mode:screen; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
h1,h2,h3,h4{ font-family:var(--ff-d); font-weight:700; line-height:1.05; margin:0; letter-spacing:-.01em; }
p{ margin:0; }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); position:relative; }
.section{ padding-block:clamp(70px, 9vw, 140px); position:relative; }
[hidden]{ display:none !important; }
::selection{ background:var(--coral); color:#fff; }

.eyebrow{
  font-family:var(--ff-d); font-weight:600; font-size:.76rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--coral);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:28px; height:2px; background:var(--coral); border-radius:2px; }
.lead{ font-size:clamp(1.05rem,1.4vw,1.26rem); color:var(--ink-soft); max-width:58ch; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--ff-d); font-weight:600; font-size:.95rem;
  padding:.95em 1.6em; border-radius:999px; line-height:1; white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-coral{ background:var(--coral); color:#fff; box-shadow:var(--sh-md); }
.btn-coral:hover{ background:var(--coral-deep); transform:translateY(-2px) rotate(-.5deg); box-shadow:var(--sh-lg); }
html[data-theme="night"] .btn-coral{ color:#1c1029; }
.btn-ink{ background:var(--ink); color:var(--bg); }
.btn-ink:hover{ transform:translateY(-2px) rotate(.5deg); box-shadow:var(--sh-md); }
.btn-ghost{ background:transparent; box-shadow:inset 0 0 0 1.8px var(--line); }
.btn-ghost:hover{ box-shadow:inset 0 0 0 1.8px var(--coral); color:var(--coral); transform:translateY(-2px); }
.btn-lg{ padding:1.12em 1.9em; font-size:1.04rem; }
.btn-sm{ padding:.7em 1.2em; font-size:.84rem; }

.tag{
  display:inline-flex; align-items:center; gap:.4em; font-size:.78rem; font-weight:700;
  padding:.42em .85em; border-radius:999px; background:var(--bg-2); color:var(--ink-soft);
}
.tag.coral{ background:var(--coral-soft); color:var(--coral-deep); }
.tag.honey{ background:var(--honey-soft); color:#8a6410; }
.tag.sage{ background:var(--sage-soft); color:#43663e; }
.tag.berry{ background:var(--berry-soft); color:#8f3f68; }
html[data-theme="night"] .tag.honey{ color:var(--honey); }
html[data-theme="night"] .tag.sage{ color:var(--sage); }
html[data-theme="night"] .tag.berry{ color:var(--berry); }

/* ── header ──────────────────────────────────────────────── */
.site-head{
  position:sticky; top:0; z-index:120;
  background:color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .6s ease;
}
.site-head.scrolled{ border-bottom-color:var(--line); }
.site-head .wrap{ max-width:1400px; }
.nav{ display:flex; align-items:center; gap:1rem; height:80px; }
.brand{ display:flex; align-items:center; gap:.7rem; margin-right:auto; min-width:0; }
.brand img{ width:46px; height:46px; object-fit:contain; flex:0 0 auto; transition:transform .5s cubic-bezier(.2,.9,.3,1.4); }
.brand:hover img{ transform:rotate(-8deg) scale(1.06); }
.brand-name{ font-family:var(--ff-d); font-weight:700; font-size:1rem; line-height:1.05; white-space:nowrap; }
.brand-name small{ display:block; font-family:var(--ff-b); font-weight:700; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-top:.35em; }
.nav-links{ display:flex; align-items:center; gap:.1rem; }
.nav-links a{ font-weight:700; font-size:.92rem; padding:.55em .72em; border-radius:999px; color:var(--ink-soft); transition:.15s; white-space:nowrap; }
/* клікабельне «КІТ» у футері */
.foot-bottom .hint b{
  cursor:pointer; text-decoration:underline dotted; text-underline-offset:3px;
  -webkit-tap-highlight-color:transparent; transition:.15s;
}
.foot-bottom .hint b:hover{ color:var(--coral); transform:scale(1.06); display:inline-block; }
.nav-links a:hover{ color:var(--ink); background:var(--bg-2); }
.nav-tools{ display:flex; align-items:center; gap:.55rem; }

.lang{ display:inline-flex; background:var(--bg-2); border-radius:999px; padding:3px; }
.lang button{ font-family:var(--ff-d); font-weight:600; font-size:.76rem; padding:.45em .75em; border-radius:999px; color:var(--ink-faint); transition:.15s; }
.lang button.on{ background:var(--card); color:var(--ink); box-shadow:var(--sh-sm); }

/* день/ніч тумблер */
.sky-switch{
  position:relative; width:74px; height:38px; border-radius:999px; flex:0 0 auto;
  background:linear-gradient(90deg,#ffd9705e,#f6eee0); box-shadow:inset 0 0 0 1.6px var(--line);
  transition:background .6s ease; overflow:hidden;
}
html[data-theme="night"] .sky-switch{ background:linear-gradient(90deg,#14112b,#2c2557); }
.sky-switch .orb{
  position:absolute; top:4px; left:4px; width:30px; height:30px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #ffe9a8, var(--honey));
  box-shadow:0 0 14px rgba(242,179,46,.65);
  transition:transform .5s cubic-bezier(.5,1.6,.4,1), background .5s ease;
  display:grid; place-items:center; font-size:15px;
}
html[data-theme="night"] .sky-switch .orb{
  transform:translateX(36px);
  background:radial-gradient(circle at 60% 35%, #fff8e0, #cfc4a2);
  box-shadow:0 0 16px rgba(255,244,200,.8);
}
.sky-switch .tw{ position:absolute; border-radius:50%; background:#ffd76a; opacity:0; transition:opacity .5s; }
.sky-switch .tw1{ width:3px; height:3px; top:9px; left:14px; }
.sky-switch .tw2{ width:2px; height:2px; top:22px; left:24px; }
.sky-switch .tw3{ width:2.5px; height:2.5px; top:12px; left:34px; }
html[data-theme="night"] .sky-switch .tw{ opacity:1; animation:twinkle 2.2s ease-in-out infinite alternate; }
.sky-switch .tw2{ animation-delay:.6s } .sky-switch .tw3{ animation-delay:1.1s }
@keyframes twinkle{ from{ opacity:.25 } to{ opacity:1 } }

.burger{ display:none; width:46px; height:46px; border-radius:14px; place-items:center; background:var(--bg-2); flex:0 0 auto; }
.burger span{ display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; position:relative; transition:.2s; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink); border-radius:2px; transition:.2s; }
.burger span::before{ top:-6px } .burger span::after{ top:6px }
.burger.x span{ background:transparent }
.burger.x span::before{ top:0; transform:rotate(45deg) }
.burger.x span::after{ top:0; transform:rotate(-45deg) }

/* ── зорі (ніч) ──────────────────────────────────────────── */
#stars{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity 1s ease; }
html[data-theme="night"] #stars{ opacity:1; }
#stars .s{ position:absolute; border-radius:50%; background:var(--star); animation:twinkle var(--tw,3s) ease-in-out infinite alternate; }
#stars .paw-star{ position:absolute; color:var(--star); opacity:.5; animation:twinkle var(--tw,4s) ease-in-out infinite alternate; }

/* ── HERO ────────────────────────────────────────────────── */
.hero{ position:relative; overflow:clip; padding-top:clamp(30px,4.5vw,64px); cursor:none; }
.hero .wrap{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(24px,4vw,60px); align-items:center; padding-bottom:clamp(56px,7vw,110px); }
.hero-copy{ position:relative; z-index:3; }
.hero-title{
  margin:.45em 0 0; font-size:clamp(2rem, 4.6vw, 4.55rem); font-weight:800; line-height:1.02;
  letter-spacing:-.02em; text-transform:uppercase;
}
.hero-title .ln{ display:block; white-space:nowrap; }
.hero-title .ch{ display:inline-block; transition:font-variation-settings .25s ease, transform .25s ease, color .25s ease; font-variation-settings:'wght' 800; }
.hero-title .ch:hover{ font-variation-settings:'wght' 300; transform:translateY(-.06em) rotate(-3deg); color:var(--coral); }
.hero-title .accent{ position:relative; color:var(--coral); white-space:nowrap; }
.hero-title .accent .tailline{ position:absolute; left:-2%; bottom:-.18em; width:104%; height:.42em; overflow:visible; pointer-events:none; }
.hero-title .accent .tailline path{ fill:none; stroke:var(--honey); stroke-width:10; stroke-linecap:round; stroke-dasharray:520; stroke-dashoffset:520; }
.hero-title.drawn .accent .tailline path{ animation:draw 1.1s .4s cubic-bezier(.6,.1,.2,1) forwards; }
@keyframes draw{ to{ stroke-dashoffset:0 } }

.hero-lead{ margin-top:1.6rem; }
.hero-cta{ display:flex; gap:.85rem; flex-wrap:wrap; margin-top:2.3rem; }
.hero-stats{ display:flex; gap:clamp(22px,3.4vw,52px); margin-top:2.8rem; }
.hstat .n{ font-family:var(--ff-d); font-weight:800; font-size:clamp(1.8rem,3.2vw,2.6rem); color:var(--coral); line-height:1; }
.hstat .l{ font-size:.84rem; color:var(--ink-soft); margin-top:.45em; max-width:13ch; }

/* сцена з великим котом */
.hero-stage{ position:relative; z-index:2; }
.hero-cat-frame{
  position:relative; border-radius:var(--r-xl); background:var(--bg-2);
  box-shadow:var(--sh-lg); overflow:hidden; aspect-ratio:4/4.6;
  transition:background .6s ease;
}
html[data-theme="night"] .hero-cat-frame{ background:radial-gradient(120% 100% at 50% 0%, #262052 0%, #16122e 70%); }
.hero-cat-frame svg.scene{ position:absolute; inset:0; width:100%; height:100%; }
.hero-caption{
  position:absolute; bottom:-16px; left:-14px; background:var(--card); border-radius:var(--r-md);
  padding:13px 18px; box-shadow:var(--sh-lg); display:flex; align-items:center; gap:12px; z-index:4;
  transform:rotate(-2deg);
}
.hero-caption .hc-ic{ width:42px; height:42px; border-radius:13px; background:var(--coral-soft); color:var(--coral-deep); display:grid; place-items:center; flex:0 0 auto; }
.hero-caption b{ font-family:var(--ff-d); display:block; font-size:.95rem; line-height:1.2; }
.hero-caption small{ color:var(--ink-faint); font-size:.76rem; }

.spin-badge{ position:absolute; z-index:5; width:124px; height:124px; top:-26px; right:-20px; pointer-events:none; }
.spin-badge .ring{ width:100%; height:100%; animation:spin 18s linear infinite; transform-origin:50% 50%; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.spin-badge text{ font-family:var(--ff-d); font-weight:600; font-size:7px; letter-spacing:.16em; fill:var(--ink); }
.spin-badge .core{ position:absolute; inset:0; display:grid; place-items:center; }
.spin-badge .core span{ width:58px; height:58px; border-radius:50%; background:var(--coral); color:#fff; display:grid; place-items:center; box-shadow:var(--sh-md); font-size:22px; }

/* лазерна точка */
#laser{
  position:fixed; left:0; top:0; z-index:90; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%;
  background:radial-gradient(circle, #ff5a3c 0%, #ff2d00 55%, transparent 72%);
  box-shadow:0 0 18px 4px rgba(255,60,20,.55); pointer-events:none; opacity:0;
  transition:opacity .25s ease; will-change:transform;
}
html[data-theme="night"] #laser{ box-shadow:0 0 26px 8px rgba(255,70,20,.8); }
#laser.on{ opacity:1; }

/* хмарки/промені за героєм */
.hero-doodle{ position:absolute; color:var(--coral); opacity:.13; z-index:1; pointer-events:none; }
@media (prefers-reduced-motion:no-preference){
  .hero-doodle{ animation:floaty var(--d,8s) ease-in-out infinite; }
}
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(var(--r,0deg)) } 50%{ transform:translateY(-14px) rotate(calc(var(--r,0deg) + 6deg)) } }

/* ── стрічка-marquee ─────────────────────────────────────── */
.murline{ background:var(--ink); color:var(--bg); padding-block:15px; overflow:hidden; position:relative; z-index:2; transform:rotate(-1.1deg) scale(1.02); transition:background .6s ease,color .6s ease; }
html[data-theme="night"] .murline{ background:var(--honey); color:#1c1029; }
.murline .track{ display:inline-flex; gap:2.6rem; align-items:center; white-space:nowrap; animation:scrollx 28s linear infinite; font-family:var(--ff-d); font-weight:600; font-size:1.02rem; }
.murline:hover .track{ animation-play-state:paused; }
.murline .it{ display:inline-flex; align-items:center; gap:1.2rem; }
@keyframes scrollx{ to{ transform:translateX(-50%) } }
/* ── СЕКЦІЯ КОТИКІВ ──────────────────────────────────────── */
.cats-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cats-head .h-big{ font-size:clamp(2rem,4.2vw,3.4rem); margin-top:.35em; }
.cats-count{
  font-family:var(--ff-d); font-weight:600; font-size:.95rem; color:var(--ink-soft);
  background:var(--card); padding:.7em 1.2em; border-radius:999px; box-shadow:var(--sh-sm);
  display:inline-flex; gap:.5em; align-items:center;
}
.cats-count b{ color:var(--coral); font-size:1.25em; }

.filters{ display:flex; gap:.55rem; flex-wrap:wrap; margin:2.2rem 0 2.6rem; }
.filters button{
  font-family:var(--ff-d); font-weight:600; font-size:.88rem; padding:.68em 1.25em; border-radius:999px;
  background:var(--card); color:var(--ink-soft); box-shadow:inset 0 0 0 1.6px var(--line);
  transition:.18s; position:relative;
}
.filters button:hover{ color:var(--ink); transform:translateY(-2px); }
.filters button.on{ background:var(--ink); color:var(--bg); box-shadow:none; transform:rotate(-1.5deg); }
html[data-theme="night"] .filters button.on{ background:var(--honey); color:#1c1029; }
.filters button .fc{ opacity:.55; font-size:.82em; margin-left:.35em; }

/* сітка живих котів */
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:clamp(20px,2.6vw,34px); }
.cat-card{
  background:var(--card); border-radius:var(--r-lg); box-shadow:var(--sh-sm);
  display:flex; flex-direction:column; position:relative; isolation:isolate;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, background .6s ease;
}
.cat-card:hover{ transform:translateY(-8px) rotate(var(--tilt,0deg)); box-shadow:var(--sh-lg); }
.cat-grid .cat-card:nth-child(odd){ --tilt:-.7deg; }
.cat-grid .cat-card:nth-child(even){ --tilt:.7deg; }
.cat-card .portrait{
  position:relative; border-radius:var(--r-lg) var(--r-lg) 0 0; overflow:hidden;
  aspect-ratio:1/0.92; background:var(--pane,var(--bg-2)); transition:background .6s ease;
}
/* величезне контурне ім'я-постер за котом */
.cat-card .bg-name{
  position:absolute; inset:5% -6% auto -6%; z-index:0; pointer-events:none; user-select:none;
  font-family:var(--ff-d); font-weight:800; font-size:clamp(3rem,6.4vw,4.2rem); line-height:1;
  text-transform:uppercase; letter-spacing:.02em; text-align:center; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1.6px color-mix(in srgb, var(--ink) 24%, transparent);
  transform:rotate(-3deg);
}
html[data-theme="night"] .cat-card .bg-name{ -webkit-text-stroke:1.6px rgba(255,255,255,.16); }
/* органічні «сквиркли» панелей — у кожного кота свій характер рамки */
.cat-grid .cat-card:nth-child(4n+1) .portrait{ border-radius:52% 48% 8% 8% / 30% 34% 8% 8%; border-radius:var(--r-lg) var(--r-xl) 0 0; }
.cat-grid .cat-card:nth-child(4n+2) .portrait{ border-radius:var(--r-xl) var(--r-lg) 0 0; }
.cat-grid .cat-card:nth-child(4n+3) .portrait{ border-radius:60px 26px 0 0; }
.cat-grid .cat-card:nth-child(4n+4) .portrait{ border-radius:26px 60px 0 0; }
html[data-theme="night"] .cat-card .portrait{ background:radial-gradient(130% 110% at 50% 0%, #2a234f 0%, #171334 75%); }
.cat-card .portrait svg{ position:absolute; inset:0; width:100%; height:100%; }
/* реальне фото котика: кладеться поверх SVG-плейсхолдера */
.cat-card .portrait img.cat-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.cat-card .portrait.has-photo .cat-svg{ display:none; }
html[data-theme="night"] .cat-card .portrait.has-photo{ background:#171334; }
html[data-theme="night"] .cat-card .portrait img.cat-photo{ filter:brightness(.88) saturate(.95); }
.cat-card .badges{ position:absolute; top:14px; left:14px; display:flex; gap:6px; flex-wrap:wrap; z-index:3; }
.cat-card .fav{
  position:absolute; top:12px; right:12px; z-index:3; width:40px; height:40px; border-radius:999px;
  background:color-mix(in srgb, var(--card) 82%, transparent); backdrop-filter:blur(6px);
  display:grid; place-items:center; box-shadow:var(--sh-sm); color:var(--ink-faint); transition:.18s;
}
.cat-card .fav:hover{ color:var(--coral); transform:scale(1.12) rotate(-6deg); }
.cat-card .fav.on{ color:#fff; background:var(--coral); }
.cat-body{ padding:20px 20px 22px; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.cat-name{ font-family:var(--ff-d); font-weight:800; font-size:1.5rem; letter-spacing:-.01em; display:flex; align-items:baseline; gap:.5em; }
.cat-name small{ font-family:var(--ff-b); font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.cat-desc{ color:var(--ink-soft); font-size:.95rem; flex:1; }
.cat-quote{ font-size:.82rem; color:var(--ink-faint); font-style:italic; }
.cat-actions{ display:flex; gap:.45rem; margin-top:.7rem; }
.cat-actions .btn{ flex:1; font-size:.9rem; }

/* порожній фільтр */
.empty-note{ grid-column:1/-1; text-align:center; padding:56px 20px; color:var(--ink-faint); font-family:var(--ff-d); font-weight:600; }

/* очі/вуха анімації (клас .cat-svg генерується JS) */
.cat-svg .pupil{ transition:transform .18s ease-out; }
.cat-svg .lid{ transform:scaleY(0); transform-origin:center 38%; transform-box:fill-box; transition:transform .09s ease; }
.cat-svg.blink .lid{ transform:scaleY(1); }
.cat-svg .earL, .cat-svg .earR{ transition:transform .3s cubic-bezier(.2,.9,.3,1.5); transform-box:fill-box; }
.cat-svg .earL{ transform-origin:80% 100%; } .cat-svg .earR{ transform-origin:20% 100%; }
.cat-card:hover .cat-svg .earL{ transform:rotate(-9deg); }
.cat-card:hover .cat-svg .earR{ transform:rotate(9deg); }
.cat-svg .head{ transition:transform .4s cubic-bezier(.2,.8,.2,1); transform-box:fill-box; transform-origin:center 80%; }
.cat-card:hover .cat-svg .head{ transform:rotate(-2.4deg) translateY(-2px); }
.cat-svg .tail{ transform-box:fill-box; transform-origin:top center; }
/* хвіст махає лише коли карточка під курсором або в hero —
   вічна анімація 9 SVG зжирає растеризацію на слабких машинах */
@media (prefers-reduced-motion:no-preference){
  .cat-card:hover .cat-svg .tail, .hero-cat-frame .cat-svg .tail{ animation:tailwag 3.4s ease-in-out infinite; }
}
@keyframes tailwag{ 0%,100%{ transform:rotate(-4deg) } 50%{ transform:rotate(6deg) } }
html[data-theme="night"] .cat-svg .iris{ fill:var(--ni,#ffd76a); }
html[data-theme="night"] .cat-svg .eyeball{ filter:drop-shadow(0 0 7px var(--eye-glow)); }
html[data-theme="night"] .cat-svg .pupil{ transform:scale(1.9); }
.cat-svg .zzz{ opacity:0; }

/* хмарка "мяу" */
.meow-pop{
  position:absolute; z-index:6; background:var(--card); color:var(--ink); font-family:var(--ff-d);
  font-weight:700; font-size:.8rem; padding:.45em .9em; border-radius:999px 999px 999px 4px;
  box-shadow:var(--sh-md); pointer-events:none; animation:meowpop 1.4s ease forwards;
}
@keyframes meowpop{ 0%{ opacity:0; transform:translateY(6px) scale(.6) } 18%{ opacity:1; transform:translateY(0) scale(1) } 80%{ opacity:1 } 100%{ opacity:0; transform:translateY(-14px) } }

/* серця, лапки-бурсти */
.burst-bit{ position:fixed; z-index:240; pointer-events:none; color:var(--coral); width:16px; height:16px; transform:translate(-50%,-50%); }
@media (prefers-reduced-motion:no-preference){ .burst-bit{ animation:burst .75s ease-out forwards; } }
@keyframes burst{ 0%{ opacity:1; transform:translate(-50%,-50%) scale(.3) } 100%{ opacity:0; transform:translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) scale(1) rotate(var(--br)) } }

/* котопад (пасхалка МУР) */
.catfall{ position:fixed; top:-60px; z-index:250; pointer-events:none; animation:catfall linear forwards; }
@keyframes catfall{ to{ transform:translateY(115vh) rotate(var(--spin,360deg)) } }

/* ── МУР-ТЕСТ ────────────────────────────────────────────── */
.quiz-band{ background:var(--bg-2); border-radius:var(--r-xl); padding:clamp(30px,4.5vw,64px); position:relative; overflow:hidden; transition:background .6s ease; }
.quiz-band .paw-bg{ position:absolute; color:var(--coral); opacity:.07; pointer-events:none; }
.quiz-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,64px); align-items:center; position:relative; z-index:2; }
.quiz-card{ background:var(--card); border-radius:var(--r-lg); padding:clamp(22px,3vw,38px); box-shadow:var(--sh-lg); min-height:340px; display:flex; flex-direction:column; position:relative; transform:rotate(-1.1deg); }
/* колода карт під тестом */
.quiz-card::before,.quiz-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:var(--card); z-index:-1; }
.quiz-card::before{ transform:rotate(2.4deg) translate(8px,6px); opacity:.55; box-shadow:var(--sh-md); }
.quiz-card::after{ transform:rotate(-3deg) translate(-9px,10px); opacity:.32; }
.quiz-paws{ display:flex; gap:10px; margin-top:auto; padding-top:1.6rem; }
.quiz-paws svg{ width:22px; height:22px; color:var(--line); transition:color .25s, transform .25s; }
.quiz-paws svg.done{ color:var(--coral); transform:rotate(-10deg) scale(1.15); }
.quiz-q{ font-family:var(--ff-d); font-weight:700; font-size:clamp(1.15rem,1.8vw,1.5rem); line-height:1.25; }
.quiz-step{ font-family:var(--ff-d); font-weight:600; font-size:.76rem; letter-spacing:.2em; color:var(--coral); text-transform:uppercase; margin-bottom:1em; }
.quiz-opts{ display:flex; flex-direction:column; gap:.7rem; margin-top:1.6rem; }
.quiz-opts button{
  text-align:left; font-weight:700; font-size:1rem; padding:1em 1.2em; border-radius:16px;
  background:var(--bg); box-shadow:inset 0 0 0 1.6px var(--line); transition:.16s;
  display:flex; align-items:center; gap:.7em;
}
.quiz-opts button:hover{ box-shadow:inset 0 0 0 2px var(--coral); transform:translateX(4px); }
.quiz-opts button .qi{ font-size:1.25em; }
.quiz-progress{ display:flex; gap:6px; margin-top:auto; padding-top:1.6rem; }
.quiz-progress span{ height:6px; flex:1; border-radius:99px; background:var(--line); transition:background .3s; }
.quiz-progress span.done{ background:var(--coral); }
.quiz-result{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.quiz-result .portrait-mini{ width:150px; height:150px; border-radius:50%; overflow:hidden; background:var(--bg-2); box-shadow:var(--sh-md); margin-bottom:.6rem; position:relative; }
html[data-theme="night"] .quiz-result .portrait-mini{ background:#2a234f; }
.quiz-result .portrait-mini svg{ position:absolute; inset:0; width:100%; height:100%; }
.quiz-result h3{ font-size:1.6rem; }
.quiz-result .again{ margin-top:.9rem; font-size:.85rem; color:var(--ink-faint); text-decoration:underline; text-underline-offset:3px; }
.quiz-result .again:hover{ color:var(--coral); }

/* ── ШЛЯХ ДОДОМУ: сцена-дорога ───────────────────────────── */
.road-scene{ position:relative; margin-top:2.2rem; }
.road-scene svg{ width:100%; height:auto; display:block; overflow:visible; }
.road-scene .st-num{ font-family:var(--ff-d); font-weight:800; font-size:15px; fill:var(--coral); }
.road-scene .st-dot{ fill:var(--card); stroke:var(--coral); stroke-width:2.5; }
.road-scene .asphalt{ stroke:var(--ink); opacity:.16; }
.road-scene .paw-track{ fill:var(--coral); opacity:.55; }
.road-scene .home-glow{ opacity:0; transition:opacity .6s ease; }
html[data-theme="night"] .road-scene .win{ fill:var(--honey); }
html[data-theme="night"] .road-scene .home-glow{ opacity:.5; }
.road-legs{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,26px); margin-top:1.2rem; }
.road-leg{ text-align:center; padding:0 clamp(4px,1vw,18px); }
.road-leg h3{ font-size:1.12rem; }
.road-leg p{ color:var(--ink-soft); margin-top:.45rem; font-size:.9rem; }
#roadCat .legs rect{ transform-box:fill-box; transform-origin:top center; }
#roadCat.walking .lg1{ animation:steps .3s linear infinite; }
#roadCat.walking .lg2{ animation:steps .3s linear infinite .15s; }
#roadCat.walking .lg3{ animation:steps .3s linear infinite .08s; }

/* рукописні нотатки */
.hand-note{
  font-family:'Caveat', cursive; font-weight:700; font-size:clamp(1.25rem,1.8vw,1.6rem);
  color:var(--coral-deep); line-height:1.1; display:inline-flex; align-items:center; gap:.35em;
  transform:rotate(-2deg);
}
html[data-theme="night"] .hand-note{ color:var(--honey); }
.hand-note .arr{ width:34px; height:auto; flex:0 0 auto; }
.hand-note .arr path{ fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }

/* дрейфуючі дрібнички (паралакс) */
.drift{ position:absolute; color:var(--ink-faint); opacity:.4; pointer-events:none; z-index:1; will-change:transform; }
html[data-theme="night"] .drift{ color:var(--ink-faint); opacity:.5; }
/* на вузьких екранах декор лягає на контент — ховаємо */
@media (max-width:900px){ .drift{ display:none; } }

/* ── ДОНАТ ───────────────────────────────────────────────── */
.donate-band{ position:relative; }
.donate-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,64px); align-items:center; }
.jar-card{ background:var(--card); border-radius:var(--r-lg); padding:clamp(26px,3.4vw,44px); box-shadow:var(--sh-lg); position:relative; overflow:hidden; }
.jar-head{ display:flex; align-items:center; gap:14px; }
.jar-logo{ width:54px; height:54px; border-radius:16px; background:#000; color:#fff; display:grid; place-items:center; font-family:var(--ff-d); font-weight:700; font-size:.72rem; flex:0 0 auto; }
html[data-theme="night"] .jar-logo{ background:#fff; color:#000; }
.jar-head b{ font-family:var(--ff-d); font-size:1.05rem; display:block; }
.jar-head small{ color:var(--ink-faint); }
.murmeter{ margin:1.8rem 0 1.4rem; }
.murmeter input[type=range]{
  width:100%; appearance:none; height:10px; border-radius:99px;
  background:linear-gradient(90deg, var(--coral) var(--fill,30%), var(--bg-2) var(--fill,30%));
  outline:none; cursor:pointer;
}
.murmeter input[type=range]::-webkit-slider-thumb{
  appearance:none; width:34px; height:34px; border-radius:50%;
  background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e0603a'%3E%3Ccircle cx='6' cy='9' r='2.1'/%3E%3Ccircle cx='10.5' cy='5.6' r='2.1'/%3E%3Ccircle cx='13.5' cy='5.6' r='2.1'/%3E%3Ccircle cx='18' cy='9' r='2.1'/%3E%3Cpath d='M12 11c-2.6 0-4.7 2-4.7 4.2 0 1.7 1.3 2.6 3 2.6.9 0 1.2-.3 1.7-.3s.8.3 1.7.3c1.7 0 3-.9 3-2.6C16.7 13 14.6 11 12 11z'/%3E%3C/svg%3E") center/60% no-repeat;
  box-shadow:var(--sh-md); border:2px solid var(--coral);
}
.murmeter .mm-row{ display:flex; align-items:center; gap:16px; margin-bottom:.9rem; }
.murmeter .feed-jar{ width:52px; height:68px; flex:0 0 auto; }
.murmeter #jarFill, .murmeter #jarBits{ transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.murmeter .mm-sum{ font-family:var(--ff-d); font-weight:800; font-size:clamp(1.7rem,3vw,2.3rem); color:var(--coral); }
.murmeter .mm-what{ font-size:.95rem; color:var(--ink-soft); text-align:right; max-width:22ch; margin-left:auto; }
.jar-quick{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.jar-quick button{
  font-family:var(--ff-d); font-weight:600; font-size:.88rem; padding:.55em 1em; border-radius:999px;
  background:var(--bg-2); box-shadow:inset 0 0 0 1.4px var(--line); transition:.15s;
}
.jar-quick button:hover, .jar-quick button.on{ background:var(--coral-soft); box-shadow:inset 0 0 0 1.6px var(--coral); color:var(--coral-deep); }
html[data-theme="night"] .jar-quick button:hover, html[data-theme="night"] .jar-quick button.on{ color:var(--coral); }
.jar-card .btn-coral{ width:100%; }
.card-num{
  display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--bg);
  border-radius:14px; padding:.85em 1.05em; margin-top:.85rem; font-family:var(--ff-d);
  font-weight:600; letter-spacing:.05em; font-size:.95rem;
}
.card-num button{ font-size:.78rem; color:var(--coral); font-weight:700; white-space:nowrap; }
.card-num button:hover{ text-decoration:underline; text-underline-offset:3px; }
.donate-copy .tick-list{ list-style:none; padding:0; margin:1.8rem 0 0; display:flex; flex-direction:column; gap:1rem; }
.donate-copy .tick-list li{ display:flex; gap:.75rem; align-items:flex-start; color:var(--ink-soft); }
.donate-copy .tick-list .ti{ flex:0 0 auto; width:28px; height:28px; border-radius:999px; background:var(--sage-soft); color:#43663e; display:grid; place-items:center; margin-top:1px; font-size:.85rem; }
html[data-theme="night"] .donate-copy .tick-list .ti{ color:var(--sage); }

/* ── CTA BAND ────────────────────────────────────────────── */
.cta-band{
  background:var(--ink); color:var(--bg); border-radius:var(--r-xl);
  padding:clamp(40px,6vw,80px); text-align:center; position:relative; overflow:hidden;
  transition:background .6s ease,color .6s ease;
}
html[data-theme="night"] .cta-band{ background:linear-gradient(135deg,#2a234f,#1b1738); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); }
.cta-band h2{ font-size:clamp(1.9rem,4vw,3.2rem); max-width:20ch; margin-inline:auto; position:relative; z-index:2; }
.cta-band .lead{ color:color-mix(in srgb, currentColor 75%, transparent); margin:1.2rem auto 0; position:relative; z-index:2; }
.cta-band .hero-cta{ justify-content:center; position:relative; z-index:2; }
/* пари очей, що чекають у темряві */
.waiting-eyes{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.waiting-eyes .pair{ position:absolute; display:flex; gap:.42em; font-size:var(--es,14px); }
.waiting-eyes .pair i{
  width:1em; height:1.25em; border-radius:50%;
  background:radial-gradient(circle at 50% 42%, #ffe9a0 0%, var(--honey) 60%, transparent 75%);
  box-shadow:0 0 10px rgba(255,214,106,.5);
  transform-origin:center; transition:transform .12s ease;
}
.waiting-eyes .pair.blink i{ transform:scaleY(.06); }

/* ── FOOTER ──────────────────────────────────────────────── */
.site-foot{ background:var(--ink); color:#cfc4b3; padding-block:clamp(60px,7vw,96px) 30px; position:relative; margin-top:clamp(60px,8vw,120px); transition:background .6s ease; }
html[data-theme="night"] .site-foot{ background:#0e0b20; color:var(--ink-soft); }
.foot-cat{ position:absolute; top:-52px; right:clamp(20px,8vw,110px); width:110px; height:60px; cursor:pointer; }
.foot-cat svg{ overflow:visible; }
.foot-cat .breath{ transform-origin:center bottom; animation:breath 3.6s ease-in-out infinite; }
@keyframes breath{ 0%,100%{ transform:scaleY(1) } 50%{ transform:scaleY(1.045) } }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:44px; }
.site-foot h4{ color:#fff; font-size:1rem; margin-bottom:1.1em; }
html[data-theme="night"] .site-foot h4{ color:var(--ink); }
.site-foot a{ color:inherit; display:inline-block; padding:.22em 0; transition:color .15s; }
.site-foot a:hover{ color:var(--honey); }
.foot-brand p{ margin-top:1em; max-width:34ch; font-size:.94rem; opacity:.85; }
.foot-brand .brand-name{ color:#fff; }
html[data-theme="night"] .foot-brand .brand-name{ color:var(--ink); }
.foot-soc{ display:flex; gap:.6rem; margin-top:1.3em; }
.foot-soc a{ width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:rgba(255,255,255,.08); }
.foot-soc a:hover{ background:var(--coral); color:#fff; }
.foot-legal{ margin-top:44px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); font-size:.78rem; opacity:.75; display:flex; flex-wrap:wrap; gap:.5em; }
.foot-bottom{ margin-top:18px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.84rem; }
.foot-bottom .hint{ opacity:.6; font-size:.76rem; }
.foot-bottom .hint b{ color:var(--honey); font-weight:700; }

/* ── reveal on scroll ────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  [data-reveal]{ opacity:0; transform:translateY(30px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
  [data-reveal].in{ opacity:1; transform:none; }
}

/* ── адаптив ─────────────────────────────────────────────── */
@media (max-width:1020px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-stage{ max-width:480px; margin-inline:auto; width:100%; }
  .quiz-grid{ grid-template-columns:1fr; }
  .donate-grid{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:34px; }
  .hero{ cursor:auto; }
}
@media (max-width:1120px){
  .nav-links{
    position:fixed; inset:80px 0 auto 0; flex-direction:column; align-items:stretch; gap:.2rem;
    background:var(--bg); padding:16px var(--gut) 26px; box-shadow:var(--sh-lg);
    transform:translateY(-130%); transition:transform .3s ease; border-bottom:1px solid var(--line); z-index:110;
  }
  .nav-links.open{ transform:none; }
  .nav-links a{ padding:.9em 1em; font-size:1.06rem; }
  .burger{ display:grid; }
}
@media (max-width:820px){
  .steps{ grid-template-columns:1fr; }
  .nav-donate{ display:none; }
}
@media (max-width:560px){
  .foot-grid{ grid-template-columns:1fr; }
  .spin-badge{ width:92px; height:92px; top:-14px; right:-6px; }
  .hero-caption{ left:6px; bottom:-12px; }
  .hero-stats{ flex-wrap:wrap; gap:18px 28px; }
  .cat-grid{ grid-template-columns:1fr; }
  .site-head .brand-name{ display:none; }
  .nav{ gap:.6rem; }
  .foot-cat{ right:16px; }
}

/* ── СТІНА ПОЛАРОЇДІВ (перекриває базову картку) ─────────── */
.cat-grid{ grid-template-columns:repeat(auto-fill,minmax(245px,1fr)); grid-auto-flow:dense; align-items:start; }
.cat-card{
  border-radius:12px; padding:11px 11px 0; transform:rotate(var(--rot,0deg));
  box-shadow:0 2px 4px rgba(70,45,20,.08), var(--sh-md);
}
.cat-card:hover{ transform:rotate(0deg) translateY(-10px) scale(1.02); z-index:6; }
.cat-card .portrait{ border-radius:7px !important; aspect-ratio:1/0.98; }
.cat-card .cat-body{ padding:12px 10px 16px; gap:.4rem; }
.cat-name{ font-family:'Caveat',cursive; font-weight:700; font-size:2.1rem; line-height:1; justify-content:center; }
.cat-name small{ font-family:var(--ff-b); font-size:.7rem; }
.cat-desc{ font-size:.9rem; text-align:center; }
.cat-quote{ text-align:center; font-family:'Caveat',cursive; font-size:1.15rem; font-style:normal; color:var(--ink-faint); }
/* фліп-полароїд: на звороті рукописне досьє */
.cat-card .portrait{ perspective:950px; }
.cat-card .portrait .flip{
  position:absolute; inset:0; transform-style:preserve-3d;
  transition:transform .65s cubic-bezier(.3,.75,.25,1); cursor:pointer;
}
.cat-card .portrait.flipped .flip{ transform:rotateY(180deg); }
.cat-card .face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.cat-card .face.back{
  transform:rotateY(180deg); background:var(--card); display:grid; place-items:center;
  padding:16px;
  background-image:repeating-linear-gradient(0deg, transparent 0 27px, var(--line) 27px 28px);
}
.dossier{
  font-family:'Caveat',cursive; font-weight:500; font-size:1.12rem; line-height:1.35;
  color:var(--ink); display:flex; flex-direction:column; text-align:left; transform:rotate(-1.5deg); max-width:100%;
}
.dossier b{ font-weight:700; font-size:1.7rem; color:var(--coral-deep); line-height:1.1; margin-bottom:.2em; }
.dossier .stamp{
  font-style:normal; font-family:var(--ff-d); font-weight:700; font-size:.52rem; letter-spacing:.12em;
  color:var(--coral); border:1.4px solid var(--coral); border-radius:7px; padding:.45em .7em;
  align-self:flex-end; transform:rotate(4deg); margin-top:.45em; opacity:.75;
}
.cat-card.featured .dossier{ font-size:1.35rem; }
.cat-card.featured .dossier b{ font-size:2rem; }
.doss-tag{
  position:absolute; bottom:8px; right:12px; z-index:3; pointer-events:none;
  font-family:'Caveat',cursive; font-weight:700; font-size:1.1rem; color:var(--ink-faint);
  transition:opacity .3s;
}
.portrait.flipped .doss-tag, .portrait.flipped .badges{ opacity:0; }
/* скотч і кнопки-пінси */
.cat-card::before{
  content:""; position:absolute; top:-13px; left:50%; width:96px; height:28px; z-index:7;
  transform:translateX(-50%) rotate(var(--taper,-4deg));
  background:linear-gradient(100deg, rgba(242,205,120,.55), rgba(242,205,120,.75) 40%, rgba(242,205,120,.5));
  border-left:1px dashed rgba(140,100,30,.25); border-right:1px dashed rgba(140,100,30,.25);
}
html[data-theme="night"] .cat-card::before{ background:linear-gradient(100deg, rgba(255,214,106,.28), rgba(255,214,106,.4) 40%, rgba(255,214,106,.25)); }
.cat-grid .cat-card:nth-child(3n+2)::before{ --taper:3deg; }
.cat-grid .cat-card:nth-child(4n+3)::before{
  width:22px; height:22px; border-radius:50%; left:50%; top:-10px; border:none;
  background:radial-gradient(circle at 32% 30%, #ff9d7e, var(--coral-deep) 65%);
  box-shadow:0 3px 5px rgba(60,25,10,.35);
}
/* цегляний зсув рядів + кіт тижня */
@media (min-width:901px){
  .cat-grid .cat-card:nth-child(even){ margin-top:30px; }
  .cat-card.featured{ grid-column:span 2; }
  .cat-card.featured .portrait{ aspect-ratio:2/1.18; }
}
.week-sticker{
  position:absolute; top:-16px; right:-12px; z-index:8; transform:rotate(7deg);
  background:var(--honey); color:#3a2a05; font-family:var(--ff-d); font-weight:700;
  font-size:.72rem; letter-spacing:.06em; padding:.6em .95em; border-radius:999px; box-shadow:var(--sh-md);
}
/* ярлички-фільтри */
.filters button{ transform:rotate(var(--fr,0deg)); }
.filters button:nth-child(2){ --fr:-1.6deg; background:var(--honey-soft); box-shadow:none; }
.filters button:nth-child(3){ --fr:1.4deg; background:var(--coral-soft); box-shadow:none; }
.filters button:nth-child(4){ --fr:-1.2deg; background:var(--sage-soft); box-shadow:none; }
.filters button:nth-child(5){ --fr:1.8deg; background:var(--berry-soft); box-shadow:none; }
.filters button.on{ transform:rotate(var(--fr,0deg)) scale(1.06); background:var(--ink); }
html[data-theme="night"] .filters button:not(.on){ color:var(--ink-soft); }

/* кандидати підглядають за кіт-тестом */
.quiz-candidates{ display:flex; gap:14px; margin-top:1.8rem; align-items:flex-end; }
.quiz-candidates .cand{ width:74px; flex:0 0 auto; transition:transform .3s cubic-bezier(.2,.9,.3,1.4); }
.quiz-candidates .cand:nth-child(2){ width:86px; }
.quiz-candidates .cand:hover{ transform:translateY(-6px) rotate(-4deg); }
.quiz-candidates svg{ width:100%; height:auto; overflow:visible; }

/* миска, до якої збігаються коти */
.bowl-scene{ position:relative; height:168px; margin:.6rem 0 .2rem; }
.bowl-scene .bcat{
  position:absolute; bottom:52px; width:var(--bw,56px); transform:scale(0) translateY(14px);
  transform-origin:bottom center; transition:transform .45s cubic-bezier(.2,1.1,.3,1.25);
}
.bowl-scene .bcat.come{ transform:scale(1) translateY(0); }
.bowl-scene .bcat svg{ width:100%; height:auto; overflow:visible; }
.bcat .cat-svg .tail, .bcat .cat-svg .tail-tip, .cand .cat-svg .tail, .cand .cat-svg .tail-tip{ display:none; }
.bowl-svg{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:150px; height:auto; }
.bowl-note{ position:absolute; right:-4px; bottom:-10px; max-width:11ch; text-align:right; font-size:1.2rem; }

/* reduced motion — вимикаємо все зайве */
@media (prefers-reduced-motion:reduce){
  .murline .track{ animation:none; }
  .spin-badge .ring{ animation:none; }
  .sky-switch .tw{ animation:none; }
  #stars .s, #stars .paw-star{ animation:none; }
  .cat-svg .tail{ animation:none; }
  .foot-cat .breath{ animation:none; }
}

/* додаткове */

@keyframes steps{ 0%,100%{ transform:rotate(18deg) } 50%{ transform:rotate(-18deg) } }

/* ════════════════════════════════════════════════════════════
   БАГАТОСТОРІНКОВІСТЬ + НОВІ ФІЧІ
   ════════════════════════════════════════════════════════════ */
.nav-links a.active{ color:var(--coral-deep); background:var(--coral-soft); }
html[data-theme="night"] .nav-links a.active{ color:var(--coral); }
html.uk-only .lang{ display:none; }

/* кнопка-лазер у шапці */
#laserBtn{
  width:38px; height:38px; border-radius:999px; background:var(--bg-2); display:grid; place-items:center;
  font-size:15px; transition:.2s; flex:0 0 auto;
}
#laserBtn:hover{ transform:scale(1.08); }
html.laser-on #laserBtn{ background:#2a1215; box-shadow:0 0 0 2px #ff3b1f, 0 0 14px rgba(255,60,20,.6); }
html.laser-on, html.laser-on *{ cursor:none !important; }
html.laser-on .cat-svg .pupil{ transform:scale(1.45); }
html[data-theme="night"].laser-on .cat-svg .pupil{ transform:scale(2); }

/* поличка обраних */
#favShelf{ position:fixed; right:18px; bottom:18px; z-index:180; display:none; flex-direction:column; align-items:flex-end; gap:10px; }
#favShelf.has{ display:flex; }
.fs-pill{
  font-family:var(--ff-d); font-weight:700; font-size:.9rem; background:var(--ink); color:var(--bg);
  border-radius:999px; padding:.8em 1.3em; box-shadow:var(--sh-lg); transition:.2s;
}
.fs-pill:hover{ transform:translateY(-3px); }
html[data-theme="night"] .fs-pill{ background:var(--honey); color:#1c1029; }
.fs-pill b{ color:var(--coral); } html[data-theme="night"] .fs-pill b{ color:#1c1029; }
.fs-panel{
  background:var(--card); border-radius:var(--r-md); box-shadow:var(--sh-lg); padding:18px;
  width:min(320px,86vw); display:flex; flex-direction:column; gap:12px;
}
.fs-title{ font-family:var(--ff-d); font-size:1rem; }
.fs-heads{ display:flex; flex-wrap:wrap; gap:6px; min-height:52px; }
.fs-head{ width:52px; display:inline-block; }
.fs-head svg{ width:100%; height:auto; }
.fs-empty{ font-size:.88rem; color:var(--ink-faint); }
.fs-row{ display:flex; gap:8px; }
.fs-mini{
  flex:1; font-size:.76rem; font-weight:700; padding:.7em .5em; border-radius:10px;
  background:var(--bg-2); transition:.15s;
}
.fs-mini:hover{ background:var(--coral-soft); color:var(--coral-deep); }

/* підсвітка карток із шер-лінка */
.hash-glow{ animation:hashglow 2.6s ease-in-out 2; }
@keyframes hashglow{ 0%,100%{ box-shadow:var(--sh-md) } 50%{ box-shadow:0 0 0 5px var(--coral), var(--sh-lg) } }

/* кіт-гороскоп */
.zod-wrap{ margin-top:2.6rem; background:var(--card); border-radius:var(--r-lg); padding:clamp(22px,3vw,38px); box-shadow:var(--sh-md); }
.zod-signs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); gap:8px; margin-top:1.4rem; }
.zod-signs button{
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:.7em .4em;
  background:var(--bg-2); border-radius:14px; font-weight:700; font-size:.78rem; transition:.15s;
}
.zod-signs button b{ font-size:1.3rem; line-height:1; }
.zod-signs button:hover{ transform:translateY(-3px); background:var(--honey-soft); }
.zod-signs button.on{ background:var(--ink); color:var(--bg); }
html[data-theme="night"] .zod-signs button.on{ background:var(--honey); color:#1c1029; }
.zod-result{ display:flex; gap:18px; align-items:center; margin-top:1.6rem; background:var(--bg-2); border-radius:var(--r-md); padding:18px; }
.zr-head{ width:96px; flex:0 0 auto; } .zr-head svg{ width:100%; height:auto; }
.zr-name{ font-family:var(--ff-d); font-size:1.4rem; display:block; margin:.15em 0 .2em; }
.zod-result p{ color:var(--ink-soft); font-size:.95rem; margin-bottom:.8em; }
@media(max-width:560px){ .zod-result{ flex-direction:column; text-align:center; } }

/* печатка на результаті тесту */
.quiz-result{ position:relative; }
.stamp-approve{
  position:absolute; top:4px; right:-8px; z-index:5; pointer-events:none;
  font-family:var(--ff-d); font-weight:800; font-size:.72rem; letter-spacing:.1em; color:var(--sage);
  border:2.5px solid var(--sage); border-radius:10px; padding:.6em .9em; transform:rotate(12deg);
  animation:stampin .45s cubic-bezier(.2,1.6,.4,1) both .5s; opacity:.9;
}
@keyframes stampin{ 0%{ transform:rotate(12deg) scale(2.6); opacity:0 } 100%{ transform:rotate(12deg) scale(1); opacity:.9 } }

/* сезонність */
#seasonFall{ position:fixed; inset:0; pointer-events:none; z-index:95; overflow:hidden; }
#seasonFall span{ position:fixed; top:-24px; animation:sfall linear infinite; opacity:.7; color:var(--sky); }
html.season-love #seasonFall span{ color:var(--coral); }
html[data-theme="night"] #seasonFall span{ color:#dfeefc; }
@keyframes sfall{ to{ transform:translateY(112vh) rotate(220deg); } }
html.season-winter .cat-card .portrait::after{
  content:""; position:absolute; top:-6px; left:10px; width:52px; height:44px; z-index:4; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 44'%3E%3Cpath d='M6 34 Q10 8 30 6 Q46 6 46 22 L40 24 Q36 12 28 12 Q14 14 12 34 Z' fill='%23d94f37'/%3E%3Ccircle cx='47' cy='23' r='6' fill='%23fff6ea'/%3E%3Cpath d='M4 33 h12 v7 a4 4 0 0 1 -4 4 h-4 a4 4 0 0 1 -4 -4z' fill='%23fff6ea'/%3E%3C/svg%3E") no-repeat center/contain;
  transform:rotate(-14deg);
}
html.season-love .cat-card .portrait::after{
  content:"♥"; position:absolute; top:6px; left:10px; z-index:4; pointer-events:none;
  color:var(--coral); font-size:26px; transform:rotate(-14deg);
}

/* коробка-сюрприз у футері */
#boxEgg{ position:relative; width:64px; height:54px; cursor:pointer; margin-top:14px; }
#boxEgg svg.bx{ position:absolute; bottom:0; left:0; width:64px; height:auto; z-index:2; }
#boxEgg .box-cat{ position:absolute; bottom:26px; left:7px; width:50px; z-index:1; transform:translateY(26px) scale(.5); opacity:0; transition:transform .4s cubic-bezier(.2,1.4,.3,1.2), opacity .3s; }
#boxEgg.open .box-cat{ transform:translateY(0) scale(1); opacity:1; }
#boxEgg .box-cat svg{ width:100%; height:auto; }

/* сторінка кота */
.catpage-hero{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(26px,4vw,60px); align-items:center; padding-block:clamp(30px,5vw,70px); }
.catpage-portrait{
  position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:1/1;
  background:var(--pane,var(--bg-2)); box-shadow:var(--sh-lg);
}
html[data-theme="night"] .catpage-portrait{ background:radial-gradient(130% 110% at 50% 0%, #2a234f 0%, #171334 75%); }
.catpage-portrait svg{ position:absolute; inset:0; width:100%; height:100%; }
.catpage-portrait img.cat-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.catpage-portrait.has-photo svg{ display:none; }
.catpage-name{ font-size:clamp(2.6rem,6vw,4.4rem); line-height:1; }
.catpage-facts{ margin:1.6rem 0 0; padding:18px 22px; background:var(--card); border-radius:var(--r-md); box-shadow:var(--sh-sm); font-family:'Caveat',cursive; font-size:1.35rem; line-height:1.6; transform:rotate(-.8deg); }
.catpage-others{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:14px; margin-top:1.6rem; }
.catpage-others a{ text-align:center; font-weight:700; font-size:.85rem; transition:.2s; }
.catpage-others a:hover{ transform:translateY(-4px); }
.catpage-others .fs-head{ width:100%; }
.crumbs{ font-size:.82rem; color:var(--ink-faint); padding-top:18px; }
.crumbs a:hover{ color:var(--coral); }
@media(max-width:900px){ .catpage-hero{ grid-template-columns:minmax(0,1fr); } .catpage-portrait{ max-width:420px; } }
@media (max-width:760px){
  .road-legs{ grid-template-columns:1fr; gap:16px; }
}
@media (max-width:600px){
  .rep-band .btn, .catpage-hero .hero-cta .btn{ white-space:normal; line-height:1.3; }
}

/* статті + FAQ + сторіз */
.article-body{ max-width:720px; }
.article-body h2{ font-size:clamp(1.4rem,2.6vw,2rem); margin-top:2.2em; }
.article-body p, .article-body li{ color:var(--ink-soft); margin-top:1em; }
.article-body ul{ padding-left:1.2em; }
.article-body .hand-note{ margin-top:1.4em; }
.checklist{ background:var(--card); border-radius:var(--r-md); box-shadow:var(--sh-sm); padding:22px 26px; margin-top:1.6em; font-family:'Caveat',cursive; font-size:1.3rem; transform:rotate(-.6deg); }
.checklist li{ list-style:none; margin-top:.3em; color:var(--ink); }
.checklist li::before{ content:"☐ "; color:var(--coral); }
.faq-list{ max-width:760px; margin-top:2.4rem; display:flex; flex-direction:column; gap:12px; }
.faq-list details{ background:var(--card); border-radius:var(--r-md); box-shadow:var(--sh-sm); padding:0; overflow:hidden; }
.faq-list summary{
  font-family:var(--ff-d); font-weight:600; font-size:1.02rem; padding:18px 22px; cursor:pointer;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{ content:"+"; font-size:1.4rem; color:var(--coral); transition:transform .25s; flex:0 0 auto; }
.faq-list details[open] summary::after{ transform:rotate(45deg); }
.faq-list details p{ padding:0 22px 20px; color:var(--ink-soft); }
.story-stamp{
  position:absolute; inset:auto 8px 34% auto; z-index:5; pointer-events:none;
  font-family:var(--ff-d); font-weight:800; font-size:1rem; letter-spacing:.12em; color:var(--coral);
  border:3px solid var(--coral); border-radius:12px; padding:.5em .9em; transform:rotate(-14deg); opacity:.85;
}
.story-date{ text-align:center; font-family:'Caveat',cursive; font-size:1.2rem; color:var(--ink-faint); }

/* ── стилі підсторінок ───────────────────────────────────── */
.page-hero{ padding-block:clamp(40px,6vw,80px) clamp(10px,2vw,26px); }
.row{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,64px); align-items:center; }
.help-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,26px); }
.help-card{ background:var(--card); border-radius:var(--r-md); padding:clamp(22px,2.6vw,32px); box-shadow:var(--sh-sm); transition:transform .22s, box-shadow .22s; }
.help-card:hover{ transform:translateY(-5px) rotate(-.5deg); box-shadow:var(--sh-lg); }
.help-card .hi{ width:52px; height:52px; border-radius:16px; display:grid; place-items:center; font-size:1.5rem; background:var(--bg-2); margin-bottom:1rem; }
.help-card:nth-child(3n+1) .hi{ background:var(--coral-soft); }
.help-card:nth-child(3n+2) .hi{ background:var(--honey-soft); }
.help-card:nth-child(3n+3) .hi{ background:var(--sage-soft); }
.help-card h3{ font-size:1.15rem; }
.help-card p{ color:var(--ink-soft); margin-top:.5rem; font-size:.95rem; }
.val-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,26px); }
.val-card{ background:var(--card); border-radius:var(--r-md); padding:clamp(20px,2.4vw,30px); box-shadow:var(--sh-sm); }
.val-card .vi{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:1.3rem; background:var(--honey-soft); margin-bottom:.9rem; }
.val-card h3{ font-size:1.08rem; }
.val-card p{ color:var(--ink-soft); margin-top:.45rem; font-size:.93rem; }
.stats-band{ background:linear-gradient(135deg,var(--coral),var(--coral-deep)); color:#fff; border-radius:var(--r-xl); padding:clamp(30px,4.5vw,60px); }
.stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; text-align:center; margin-top:1.6rem; }
.stat-big .n{ font-family:var(--ff-d); font-weight:800; font-size:clamp(2.4rem,5.5vw,4rem); line-height:1; }
.stat-big .l{ margin-top:.5rem; opacity:.92; font-weight:600; font-size:.9rem; }
.rep-band{ background:var(--ink); color:var(--bg); border-radius:var(--r-xl); padding:clamp(30px,4.5vw,56px); display:grid; grid-template-columns:1.4fr auto; gap:26px; align-items:center; transition:background .6s ease; }
html[data-theme="night"] .rep-band{ background:#241f47; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); }
.rep-band h2{ font-size:clamp(1.5rem,2.8vw,2.2rem); margin-top:.4em; }
.rep-band p{ opacity:.85; margin-top:.8em; max-width:54ch; }
.rep-band .eyebrow{ color:var(--honey); } .rep-band .eyebrow::before{ background:var(--honey); }
.ig-contact{ position:relative; border-radius:var(--r-lg); padding:clamp(26px,3.6vw,44px); color:#fff;
  background:linear-gradient(135deg,#c13584 0%, var(--coral) 55%, #f2a93e 130%); box-shadow:var(--sh-lg); }
.ig-contact .lead{ color:rgba(255,255,255,.93); }
.ig-glyph{ width:60px; height:60px; border-radius:18px; display:grid; place-items:center; background:rgba(255,255,255,.18); }
.ig-handle{ font-family:var(--ff-d); font-weight:700; font-size:1.2rem; margin:1.2rem 0 1.4rem; }
.ig-contact .btn{ background:#fff; color:var(--coral-deep); }
.btn-primary{ background:var(--coral); color:#fff; box-shadow:var(--sh-md); }
.emblem-card{ background:var(--card); border-radius:var(--r-lg); box-shadow:var(--sh-lg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:44px; text-align:center; transform:rotate(1.2deg); }
.emblem-card b{ font-family:var(--ff-d); font-size:1.1rem; }
@media (max-width:900px){
  .split, .rep-band{ grid-template-columns:1fr; }
  .help-grid, .val-grid{ grid-template-columns:1fr 1fr; }
  .stats-grid{ grid-template-columns:1fr; gap:18px; }
}
@media (max-width:560px){ .help-grid, .val-grid{ grid-template-columns:1fr; } }

/* назва завжди поруч із лого; на середніх ширинах шапка ущільнюється */
@media (max-width:1420px){
  .site-head .brand-name{ display:block; font-size:.86rem; }
  .site-head .brand-name small{ font-size:.55rem; letter-spacing:.16em; }
  .nav-links a{ font-size:.84rem; padding:.5em .58em; }
  .nav{ gap:.7rem; }
  .site-head .nav-tools{ gap:.45rem; }
}
@media (max-width:560px){
  .site-head .brand-name{ display:none; }
}