/* ===================================================================
   10-top.css · ФИНАЛ — верх страницы
   ШАПКА + HERO + СТАТИСТИКА  → из Варианта 2 (префиксы hdr-/hero-/stat-)
   О МАСТЕРЕ                  → из Варианта 3 (префикс about-)
   Токены — из 00-base. v2-блоки помечены классом .v2blk (шрифт Unbounded).
   =================================================================== */

/* ======================================================================
   ═══════════════  ШАПКА · HERO · СТАТЫ  (Вариант 2)  ═══════════════
   ====================================================================== */

/* ====================== ШАПКА ====================== */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  transition: background .3s var(--ease), box-shadow .3s var(--ease),
              transform .35s var(--ease), backdrop-filter .3s var(--ease);
}
.hdr-inner { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 10px 0; }

/* ряд 1 — тонкая верхняя строка */
.hdr-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: .82rem; }
.hdr-top-right { display: flex; align-items: center; gap: 20px; }
.hdr-addr { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-weight: 600; white-space: nowrap; transition: color .2s; }
.hdr-addr i { color: var(--sage); }
.hdr-addr:hover { color: var(--sage-deep); }

/* ряд 2 — основная строка */
.hdr-main { display: flex; align-items: center; gap: 24px; }

/* состояния шапки (выставляет JS через data-state) */
.hdr[data-state="top"] { background: transparent; }
.hdr[data-state="solid"] {
  background: rgba(250, 246, 239, .85);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 1px 0 var(--line), var(--sh-sm);
}
.hdr[data-state="solid"] .hdr-inner { padding: 8px 0; }
.hdr[data-state="solid"] .hdr-top { display: none; }
/* Состояния «hidden» больше нет: шапка не уезжает вверх при прокрутке,
   меню видно всегда — и на компьютере, и на телефоне. */

/* бренд */
.hdr-brand { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
/* Логотип шапки на 20% крупнее прежнего (было 52px) — решение заказчицы. */
.hdr-logo {
  width: 62.4px; height: 62.4px; border-radius: 50%; object-fit: cover;
  box-shadow: var(--sh-sm); background: var(--white);
  transition: width .3s var(--ease), height .3s var(--ease);
}
/* И уплотнённое состояние тоже на 20% (было 44px): при прокрутке шапка почти
   сразу становится «плотной», и именно этот размер виден большую часть времени. */
.hdr[data-state="solid"] .hdr-logo { width: 52.8px; height: 52.8px; }
.hdr-logo-text { height: 30px; width: auto; object-fit: contain; }

/* навигация (десктоп) */
.hdr-nav { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.hdr-link {
  position: relative; padding: 8px 14px; border-radius: 50px; white-space: nowrap;
  font-weight: 600; font-size: .95rem; color: var(--ink);
  transition: color .2s, background .2s;
}
.hdr[data-state="top"] .hdr-link { color: var(--ink); }
.hdr-link::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  background: var(--gold); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.hdr-link:hover { color: var(--sage-deep); }
.hdr-link:hover::after,
.hdr-link.is-active::after { transform: scaleX(1); }
.hdr-link.is-active { color: var(--sage-deep); }

/* правый блок */
.hdr-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }

/* live-чип «открыто/закрыто» */
.hdr-chip {
  position: relative; cursor: default;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 50px; font-size: .8rem; font-weight: 700;
  background: var(--sage-soft); color: var(--sage-deep); border: 1px solid var(--line);
}
.hdr-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; }
.hdr-chip.is-open { background: rgba(86,118,111,.14); color: var(--sage-deep); }
.hdr-chip.is-open .hdr-chip-dot { background: var(--sage); box-shadow: 0 0 0 4px rgba(86,118,111,.18); }
.hdr-chip.is-closed { background: rgba(201,123,90,.12); color: #9c4f33; }
.hdr-chip.is-closed .hdr-chip-dot { background: var(--terra); }

/* ── подсказка с графиком работы при наведении на плашку ── */
.hdr-hours-pop {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 1200;
  min-width: 250px; padding: 14px 16px; text-align: left;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--sh);
  opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.hdr-chip:hover .hdr-hours-pop,
.hdr-chip:focus-within .hdr-hours-pop {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
}
.hdr-hours-pop::before {
  content: ''; position: absolute; bottom: 100%; left: 22px;
  border: 7px solid transparent; border-bottom-color: var(--white);
}
.hdr-hours-pop__title {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: .92rem; color: var(--ink); margin-bottom: 9px;
}
.hdr-hours-pop__list { display: flex; flex-direction: column; gap: 1px; }
.hdr-hours-row {
  display: flex; justify-content: space-between; gap: 18px; white-space: nowrap;
  font-size: .82rem; font-weight: 600; color: var(--muted);
  padding: 4px 7px; border-radius: 7px;
}
.hdr-hours-row > span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; }
.hdr-hours-row .hdr-hours-off { color: var(--terra); }
.hdr-hours-row.is-today { background: var(--sage-soft); }
.hdr-hours-row.is-today > span { color: var(--sage-deep); }
.hdr-chip:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }

/* кликабельный телефон */
.hdr-phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: .95rem; color: var(--ink);
  padding: 8px 12px; border-radius: 50px; transition: color .2s, background .2s;
}
.hdr-phone i { color: var(--sage); }
.hdr-phone:hover { color: var(--sage-deep); background: var(--sage-soft); }

.hdr-cta { padding: 12px 22px; font-size: .95rem; }

/* бургер */
.hdr-burger {
  display: none; width: 46px; height: 46px; border: 0; background: var(--white);
  border-radius: 14px; box-shadow: var(--sh-sm); cursor: pointer; position: relative;
}
.hdr-burger span {
  position: absolute; left: 12px; right: 12px; height: 2.5px; background: var(--ink);
  border-radius: 2px; transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.hdr-burger span:nth-child(1) { top: 16px; }
.hdr-burger span:nth-child(2) { top: 22px; }
.hdr-burger span:nth-child(3) { top: 28px; }

/* ====================== МОБИЛЬНОЕ МЕНЮ ====================== */
.hdr-menu {
  position: fixed; inset: 0; z-index: 1100;
  background: var(--cream);
  display: flex; flex-direction: column; justify-content: center;
  padding: 88px 28px 36px;
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .3s var(--ease), transform .35s var(--ease), visibility .3s;
}
.hdr-menu::before {
  content: ''; position: absolute; top: -120px; right: -120px; width: 340px; height: 340px;
  background: radial-gradient(circle at center, rgba(86,118,111,.18), transparent 70%);
  border-radius: 50%; pointer-events: none;
}
.hdr-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.hdr-menu-close {
  position: absolute; top: 22px; right: 24px; width: 48px; height: 48px;
  border: 0; background: var(--white); border-radius: 14px; box-shadow: var(--sh-sm);
  font-size: 1.3rem; color: var(--ink); cursor: pointer;
}
.hdr-menu-nav { display: flex; flex-direction: column; gap: 6px; }
.hdr-menu-link {
  display: flex; align-items: baseline; gap: 16px;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 9vw, 2.4rem);
  color: var(--ink); padding: 8px 0; border-bottom: 1px solid var(--line);
  transition: color .2s, padding-left .25s var(--ease);
}
.hdr-menu-link span {
  font-family: var(--font-body); font-size: .8rem; font-weight: 700; color: var(--gold);
  letter-spacing: .1em;
}
.hdr-menu-link:hover, .hdr-menu-link:active { color: var(--sage); padding-left: 8px; }
.hdr-menu-foot { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
.hdr-menu-cta { width: 100%; }
.hdr-menu-phone {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; font-size: 1.05rem; color: var(--sage-deep);
}
.hdr-menu-phone i { color: var(--sage); }

/* ====================== TOAST ====================== */
.hdr-toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 1300;
  transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
  background: var(--ink); color: #fff; font-weight: 600; font-size: .95rem;
  padding: 13px 22px; border-radius: 50px; box-shadow: var(--sh-lg);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.hdr-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.hdr-toast i { color: var(--gold); margin-right: 8px; }

/* ====================== HERO ====================== */
.hero {
  position: relative; overflow: hidden;
  padding: calc(var(--header-h) + 48px) 0 72px;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(231,238,235,.9), transparent 55%),
    linear-gradient(180deg, var(--cream), var(--cream) 60%, var(--sand));
}
.hero-blob { position: absolute; border-radius: 50%; filter: blur(4px); pointer-events: none; z-index: 0; }
.hero-blob--1 { width: 420px; height: 420px; top: -120px; left: -120px;
  background: radial-gradient(circle at 40% 40%, rgba(86,118,111,.16), transparent 70%); }
.hero-blob--2 { width: 360px; height: 360px; bottom: -140px; right: 38%;
  background: radial-gradient(circle at 50% 50%, rgba(227,168,87,.18), transparent 70%); }

/* бренд-баннер над hero-сеткой: круглый логотип + каллиграфия */
.hero-brand {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(20px, 3vw, 46px);
  margin-bottom: clamp(34px, 5vw, 60px);
}
.hero-brand-logo {
  flex: 0 0 auto;
  width: 330px; height: 330px;
  border-radius: 50%; object-fit: cover; background: #fff;
  box-shadow: 0 18px 50px rgba(86,118,111,.18), 0 0 0 1px rgba(86,118,111,.07);
}
.hero-brand-copy { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hero-brand-text {
  height: clamp(46px, 6.4vw, 84px); width: auto; max-width: 100%;
  object-fit: contain; object-position: left center;
}
.hero-brand-tagline {
  margin: 0; font-weight: 600; color: var(--muted);
  font-size: clamp(1.06rem, 1.8vw, 1.45rem);
}

.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr 1.15fr; gap: 56px; align-items: center;
}

/* левая колонка */
.hero-eyebrow { margin-bottom: 20px; }
.hero-title {
  font-size: clamp(1.95rem, 3.7vw, 2.85rem); font-weight: 800; line-height: 1.12;
  letter-spacing: -.02em; margin-bottom: 22px;
}
.hero-title-accent { color: var(--sage); position: relative; white-space: nowrap; }
.hero-title-accent::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .04em; height: .26em;
  background: var(--gold); opacity: .32; border-radius: 4px; z-index: -1;
}
.hero-sub { font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--muted); max-width: 30em; margin-bottom: 32px; }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.hero-trust {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .98rem; color: var(--ink);
  text-decoration: none; cursor: pointer; transition: color .2s;
}
.hero-trust strong { font-weight: 800; }
/* лапка — тот же глиф fa-paw, что на кнопке «Записаться»; зелёная (бренд),
   чтобы не спорить с золотой звездой рейтинга */
.hero-trust-paw { font-size: 1.15em; color: var(--sage); line-height: 1; }
/* звезда — золотая, как все звёзды рейтинга на сайте */
.hero-trust-star { font-size: 1.02em; color: var(--gold); line-height: 1; }
.hero-trust-dot { color: var(--gold); font-weight: 800; }
.hero-trust span:last-child { color: var(--muted); transition: color .2s; }
/* кликабельно → ведёт в блок «Отзывы» */
a.hero-trust:hover span:last-child { color: var(--sage-deep); text-decoration: underline; text-underline-offset: 3px; }

/* правая колонка — bento */
.hero-bento {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  grid-template-areas: "main a" "main b";
  gap: 16px; aspect-ratio: 1.08 / 1;
}
.hero-tile {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  box-shadow: var(--sh); background: var(--sage-soft);
}
.hero-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.hero-tile:hover img { transform: scale(1.05); }
.hero-tile--main { grid-area: main; }
.hero-tile--a    { grid-area: a; }
.hero-tile--b    { grid-area: b; border-radius: var(--r); }
.hero-tile--a, .hero-tile--b { border-radius: var(--r); }

/* плавающий золотой бейдж */
.hero-badge {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  background: var(--gold); color: #3a2a10; font-weight: 800;
  padding: 10px 16px; border-radius: 50px; box-shadow: var(--sh);
  animation: hero-float 4.5s var(--ease) infinite;
}
.hero-badge-num { font-family: var(--font-display); font-size: 1.4rem; line-height: 1; }
/* звезда крупнее цифр по «весу», но на золотом фоне бейджа золотой она быть
   не может — сливается, поэтому остаётся тёмной, как и цифры */
.hero-badge-star { font-size: 1.15rem; line-height: 1; }
.hero-badge-sub { font-size: .72rem; font-weight: 700; opacity: .82; text-transform: uppercase; letter-spacing: .04em; }

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* фото hero — кликабельны (увеличение) */
.hero-tile { cursor: zoom-in; }
.hero-tile::after {
  content: '\f00e'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; top: 12px; right: 12px; width: 38px; height: 38px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.88); color: var(--sage-deep); font-size: .95rem;
  opacity: 0; transform: scale(.6); transition: opacity .3s var(--ease), transform .3s var(--ease);
  z-index: 3; pointer-events: none;
}
.hero-tile:hover::after { opacity: 1; transform: scale(1); }

/* лайтбокс hero */
.hero-lb {
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
  padding: 28px; background: rgba(20,28,25,.92);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: hero-lb-fade .25s var(--ease);
}
.hero-lb[hidden] { display: none; }
@keyframes hero-lb-fade { from { opacity: 0; } to { opacity: 1; } }
.hero-lb-img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: var(--r); box-shadow: var(--sh-lg); background: var(--sage-soft); }
.hero-lb-close, .hero-lb-nav {
  position: absolute; display: grid; place-items: center; border: 0; cursor: pointer;
  background: rgba(255,255,255,.15); color: #fff; border-radius: 50%;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.hero-lb-close { top: 20px; right: 24px; width: 48px; height: 48px; font-size: 1.4rem; }
.hero-lb-close:hover { background: var(--sage); transform: rotate(90deg); }
.hero-lb-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 1.2rem; }
.hero-lb-nav:hover { background: var(--sage); }
.hero-lb-prev { left: 24px; }
.hero-lb-next { right: 24px; }
@media (max-width: 640px) {
  .hero-lb-close { top: 12px; right: 14px; width: 44px; height: 44px; }
  .hero-lb-nav { width: 44px; height: 44px; }
  .hero-lb-prev { left: 10px; } .hero-lb-next { right: 10px; }
}

/* ====================== СТАТИСТИКА ====================== */
.stat { padding: 8px 0 64px; background: var(--sand); }
.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh); padding: 36px 28px;
  transform: translateY(-44px);
}
.stat-item { text-align: center; position: relative; padding: 6px 8px; }
.stat-item + .stat-item::before {
  content: ''; position: absolute; left: -9px; top: 12%; bottom: 12%; width: 1px; background: var(--line);
}
.stat-num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1; color: var(--sage-deep);
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
}
.stat-ico { font-size: .74em; color: var(--gold); line-height: 1; }
.stat-ico-lg { font-size: clamp(2rem, 3.4vw, 2.9rem); color: var(--sage); }
.stat-label { margin-top: 8px; font-size: .92rem; color: var(--muted); font-weight: 600; }

/* ====================== АДАПТИВ (v2 верх) ====================== */
@media (max-width: 1024px) {
  .hdr-top { display: none; }
  .hdr-nav { display: none; }
  .hdr-logo-text { display: none; }
  .hdr-burger { display: block; }

  /* боковые отступы шапки (их обнуляет .hdr-inner{padding:10px 0}) — иначе на
     мобильном логотип прижат к краю и левая кромка обрезается */
  .hdr-inner { padding-inline: var(--pad); }
  /* нав скрыта → разводим логотип влево, бургер — к правому краю */
  .hdr-main { justify-content: space-between; }

  .hero { padding: calc(var(--header-h) + 28px) 0 56px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-bento { max-width: 560px; margin: 0 auto; width: 100%; }

  .hero-brand { flex-direction: column; text-align: center; gap: 22px; }
  .hero-brand-logo { width: 240px; height: 240px; }
  .hero-brand-copy { align-items: center; gap: 14px; }
  .hero-brand-text { object-position: center; }
}

@media (max-width: 920px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 18px; }
  .stat-item:nth-child(odd) + .stat-item::before { display: none; }
  .stat-item:nth-child(3)::before, .stat-item:nth-child(4)::before { display: none; }
}

@media (max-width: 640px) {
  .hdr-cta .fa-paw { display: none; }
  .hdr-cta { padding: 11px 18px; }

  .hero { padding: calc(var(--header-h) + 16px) 0 44px; }
  .hero-brand-logo { width: 307px; height: 307px; }
  .hero-brand-text { height: 60px; }
  .hero-title { font-size: clamp(1.6rem, 6.6vw, 2.05rem); }
  .hero-cta-row .hero-btn { flex: 1 1 auto; }
  .hero-bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "main main" "a b";
    aspect-ratio: auto; gap: 12px;
  }
  .hero-tile--main { aspect-ratio: 16 / 11; }
  .hero-tile--a, .hero-tile--b { aspect-ratio: 1 / 1; }

  .stat-grid { transform: translateY(-32px); padding: 28px 20px; gap: 22px 14px; }
  .stat-item + .stat-item::before { display: none; }
}

@media (max-width: 380px) {
  .hero-cta-row { flex-direction: column; }
  .hero-cta-row .hero-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-badge { animation: none; }
  .hero-tile img { transition: none; }
}


/* ======================================================================
   ═════════════════════  О МАСТЕРЕ  (Вариант 3)  ═════════════════════
   ====================================================================== */
.about{overflow:hidden}
.about-blob{
  width:min(40vw,460px);aspect-ratio:1;border-radius:50%;filter:blur(54px);opacity:.5;
  top:-10%;right:-10%;background:radial-gradient(circle at 40% 40%,var(--sage-soft),transparent 70%);
}
.about-inner{
  display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;
  gap:clamp(36px,6vw,80px);position:relative;z-index:2;
}

/* фото */
.about-media{position:relative;z-index:2;max-width:480px;justify-self:center;width:100%}
.about-photo{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-lg);transform-style:preserve-3d;
}
.about-photo__img{width:100%;border-radius:var(--r-lg);object-fit:cover;aspect-ratio:4/5}
.about-badge{
  position:absolute;bottom:18px;left:-18px;z-index:3;
  display:flex;align-items:center;gap:.65em;
  background:#fff;border-radius:var(--r-pill);padding:.62em 1.05em;box-shadow:var(--sh-lg);
  animation:about-drift 6.4s var(--ease) infinite;
}
.about-badge__dot{width:10px;height:10px;border-radius:50%;background:var(--sage);flex:0 0 auto;box-shadow:0 0 0 4px var(--sage-soft)}
.about-badge figcaption{display:flex;flex-direction:column;line-height:1.1}
.about-badge b{font-family:var(--font-display);font-weight:600;font-size:1.02rem;color:var(--ink)}
.about-badge span{font-size:.74rem;color:var(--muted);font-weight:600}
/* «следы собачки» — две лапки (fa-paw, как на кнопке «Записаться») по очереди
   проявляются, уходят вниз ~80px и тают. Сдвиг фаз ровно на пол-цикла даёт
   ритм шага: пока одна тает, вторая уже проявилась. */
.about-paws{
  position:absolute;top:-26px;right:-10px;width:70px;height:130px;z-index:3;
  pointer-events:none;
}
.about-paw{
  position:absolute;top:0;font-size:34px;color:var(--sage);opacity:0;
  animation:paw-walk 3.4s var(--ease) infinite;
}
/* лапки чуть развёрнуты в разные стороны — как левая и правая нога */
.about-paw--l{left:0;   --paw-a:-18deg; animation-delay:0s}
.about-paw--r{left:30px;--paw-a:14deg;  animation-delay:1.7s}

@keyframes paw-walk{
  0%   {opacity:0;   transform:translateY(-6px) rotate(var(--paw-a)) scale(.82)}
  15%  {opacity:.85; transform:translateY(6px)  rotate(var(--paw-a)) scale(1)}
  60%  {opacity:.85; transform:translateY(48px) rotate(var(--paw-a)) scale(1)}
  100% {opacity:0;   transform:translateY(80px) rotate(var(--paw-a)) scale(.92)}
}

/* текст */
.about-copy{position:relative;z-index:2}
.about-title{font-size:clamp(1.9rem,3.8vw,3rem);margin-top:.7rem}
.about-text{margin-top:1.4rem;max-width:40em}
.about-text p + p{margin-top:1rem}
.about-text b{color:var(--ink);font-weight:700}
.about-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.8rem}
.about-chips .chip{transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.about-chips .chip:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.about-cta{margin-top:2rem}

@keyframes about-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

@media (max-width:1024px){
  .about-inner{grid-template-columns:1fr;gap:40px}
  .about-media{order:1;max-width:420px}
  .about-copy{order:2}
}
@media (max-width:640px){
  .about-badge{left:-6px}
  .about-paws{right:2px;top:-18px;width:56px;height:104px}
  .about-paw{font-size:27px}
  .about-paw--r{left:24px}
}
@media (prefers-reduced-motion: reduce){
  .about-badge,.about-paw{animation:none !important}
  /* без анимации лапки были бы невидимы (opacity:0) — показываем статично */
  .about-paw{opacity:.85;transform:rotate(var(--paw-a))}
  .about-paw--r{top:38px}
}