/* ============================================================
   PORTFOLIO.CSS — стили страницы «Портфолио»
   ============================================================ */
.navbar__link--active {
  color: #2ea865 !important;   /* зелёный, чуть темнее */
  pointer-events: none;        /* некликабельна */
  cursor: default;
  opacity: 0.65;
}
/* ── Keyframes ── */
@keyframes card-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes btn-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes btn-glow {
  0%,100% { box-shadow: 0 4px 20px rgba(200,150,80,.25); }
  50%      { box-shadow: 0 8px 36px rgba(200,150,80,.5); }
}
@keyframes border-pulse {
  0%,100% { border-color: rgba(200,150,80,.4); }
  50%      { border-color: rgba(200,150,80,.9); }
}
@keyframes card-shimmer {
  0%    { left: -70%; }
  45%,100% { left: 130%; }
}
@keyframes dot-glow {
  0%,100% { box-shadow: 0 0 4px currentColor; }
  50%      { box-shadow: 0 0 14px currentColor, 0 0 26px rgba(200,150,80,.4); }
}
@keyframes orb-drift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(30px,-20px) scale(1.06); }
  66%      { transform: translate(-20px,15px) scale(0.96); }
}
@keyframes tag-float {
  0%,100% { transform: translateY(0) rotate(var(--rot,0deg)); }
  50%      { transform: translateY(-12px) rotate(var(--rot,0deg)); }
}
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes screen-appear {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bar-grow {
  from { width: 0; }
}
@keyframes shimmer-sweep {
  0%    { background-position: -200% 0; }
  100%  { background-position: 200% 0; }
}

/* ── Scroll Reveal ── */
.will-animate {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s ease, transform .55s ease;
}
.will-animate.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Breadcrumb ── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 28px;
}
.breadcrumb a { color: var(--accent); font-weight: 600; text-decoration: none; transition: color .2s; }
.breadcrumb a:hover { color: var(--accent-dark); }
.breadcrumb__sep { color: var(--border); }

/* ── Section label / title / sub ── */
.pf-section-header { text-align: center; margin-bottom: 56px; }
.pf-section-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(200,150,80,.10);
  border: 1px solid rgba(200,150,80,.22);
  border-radius: 50px;
  padding: 5px 16px;
  margin-bottom: 16px;
}
.pf-section-title {
  font-size: 38px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
  line-height: 1.2;
}
.pf-section-title em { color: var(--accent); font-style: normal; }
.pf-section-sub {
  font-size: 16px;
  color: var(--text-light);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.65;
}


/* ══════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════ */
.pf-hero {
  position: relative;
  padding: 110px 0 20px;
  overflow: hidden;
  background: #fff;
}

/* Сетка фоновая */
.pf-hero__bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(200,150,80,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,150,80,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* Орбы */
.pf-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  pointer-events: none;
  animation: orb-drift 12s ease-in-out infinite;
}
.pf-hero__orb--1 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(200,150,80,.18), transparent 70%);
  top: -120px; right: -80px;
  animation-delay: -4s;
}
.pf-hero__orb--2 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(200,150,80,.10), transparent 70%);
  bottom: -80px; left: 10%;
  animation-delay: -8s;
}



.pf-hero__inner {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Badge */
.pf-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(200,150,80,.10);
  border: 1px solid rgba(200,150,80,.3);
  border-radius: 50px;
  padding: 6px 16px 6px 12px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  /* Появление сверху при загрузке */
  animation: badge-entrance .7s cubic-bezier(.34,1.56,.64,1) both,
             badge-bob 3.5s ease-in-out 1s infinite;
}

/* Shimmer-блик пробегает по тексту */
.pf-hero__badge::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(200,150,80,.35), transparent);
  transform: skewX(-15deg);
  animation: badge-shimmer 3s ease-in-out 1.2s infinite;
  pointer-events: none;
}

@keyframes badge-entrance {
  from { opacity: 0; transform: translateY(-14px) scale(.92); }
  to   { opacity: 1; transform: translateY(0)     scale(1);   }
}
@keyframes badge-bob {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes badge-shimmer {
  0%        { left: -80%; }
  40%,100%  { left: 130%; }
}

/* Dot — живой пульс + ripple-кольцо */
.pf-hero__badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  position: relative;
  animation: dot-pulse 2s ease-in-out infinite;
}
/* Ripple-кольцо вокруг dot */
.pf-hero__badge-dot::before,
.pf-hero__badge-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  animation: dot-ripple 2s ease-out infinite;
}
.pf-hero__badge-dot::after {
  inset: -8px;
  animation-delay: .6s;
}

@keyframes dot-pulse {
  0%,100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(200,150,80,.5); }
  50%      { transform: scale(1.25); box-shadow: 0 0 8px rgba(200,150,80,.4); }
}
@keyframes dot-ripple {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(2.4); opacity: 0;  }
}

/* Title */
.pf-hero__title {
  font-size: 52px;
  font-weight: 800;
  line-height: 1.12;
  color: var(--text);
  margin-bottom: 0;
  min-height: 140px; /* резервируем пространство под typewriter */
}
/* Строки видны по умолчанию (no-JS fallback).
   JS добавляет data-will-type перед стартом — скрывает для эффекта печати */
.pf-hero__title .typewriter-line { display: inline; }
.pf-hero__title .typewriter-line[data-will-type] { opacity: 0; visibility: hidden; }
.pf-hero__title .typewriter-line[data-typed] { opacity: 1; visibility: visible; }
.pf-hero__title em { color: var(--accent); font-style: normal; }

/* Cursor */
.typewriter-cursor {
  display: inline-block;
  color: var(--accent);
  font-size: inherit;
  font-weight: 300;
  margin-left: 2px;
  opacity: 0;
  transition: opacity .3s;
}
.typewriter-cursor.active {
  opacity: 1;
  animation: cursorBlink .7s step-end infinite;
}
.typewriter-cursor.done {
  animation: none;
  transition: opacity .6s ease;
  opacity: 0;
}
@keyframes cursorBlink {
  0%,100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* Lead */
.pf-hero__lead {
  font-size: 17px;
  color: var(--text-light);
  line-height: 1.7;
  max-width: 480px;
  margin-top: 10px;
  margin-bottom: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
.pf-hero__lead.lead-visible { opacity: 1; transform: none; }

/* Stats */
.pf-hero__stats {
  display: flex;
  gap: 36px;
  margin-top: 32px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease .1s, transform .5s ease .1s;
}
.pf-hero__stats.stats-visible { opacity: 1; transform: none; }
.stat-item { display: flex; flex-direction: column; }
.stat-num {
  font-size: 34px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}
.stat-label {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 4px;
  font-weight: 500;
}

/* Buttons */
.pf-hero__buttons {
  display: flex;
  gap: 16px;
  margin-top: 60px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease .2s, transform .5s ease .2s;
}
.pf-hero__buttons.buttons-visible { opacity: 1; transform: none; }

/* Кнопки */
.btn-pf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 14px 28px;
  border-radius: 50px;
  cursor: pointer;
  transition: all .3s;
  text-decoration: none;
  border: 2px solid transparent;
}
.btn-pf--primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  animation: btn-float 2.8s ease-in-out infinite,
             btn-glow  3.5s ease-in-out infinite;
}
.btn-pf--primary:hover {
  animation: none;
  background: linear-gradient(to top, var(--accent-dark) 0%, var(--accent) 100%);
  border-radius: 4px;
  transform: translateY(-2px);
  color: #fff;
}
.btn-pf--outline {
  background: transparent;
  color: var(--accent);
  border-color: rgba(200,150,80,.4);
  animation: btn-float  2.8s ease-in-out infinite .7s,
             border-pulse 2.8s ease-in-out infinite;
}
.btn-pf--outline:hover {
  animation: none;
  border-radius: 4px;
  background: rgba(200,150,80,.06);
  border-color: var(--accent);
}
.btn-pf--large { padding: 18px 36px; font-size: 15px; }









/* ══════════════════════════════════════════════════════════
   TICKER — пилюли outline + shimmer + border-pulse
══════════════════════════════════════════════════════════ */
.pf-ticker {
  background: #fff;
  overflow: hidden;
  padding: 18px 0;
  white-space: nowrap;
  border-top: 1px solid rgba(200,150,80,.15);
  border-bottom: 1px solid rgba(200,150,80,.15);
  margin-top: 20px;
}

@keyframes ticker-pills-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}
@keyframes pill-border-pulse {
  0%,100% {
    box-shadow: 0 0 0 0 rgba(200,150,80,0);
    border-color: rgba(200,150,80,.35);
  }
  50% {
    box-shadow: 0 0 14px rgba(200,150,80,.22);
    border-color: rgba(200,150,80,.75);
  }
}
@keyframes pill-shimmer {
  0%       { left: -80%; }
  40%,100% { left: 130%; }
}

.pf-ticker__track {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 2px 6px;
  animation: ticker-pills-scroll 38s linear infinite;
}

.pf-ticker__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #C89650;
  background: #fff;
  border: 1.5px solid rgba(200,150,80,.35);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  animation: pill-border-pulse 3s ease-in-out infinite;
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Индивидуальные задержки пульса */
.pf-ticker__pill:nth-child(2n)  { animation-delay: .5s; }
.pf-ticker__pill:nth-child(3n)  { animation-delay: 1s; }
.pf-ticker__pill:nth-child(4n)  { animation-delay: 1.5s; }
.pf-ticker__pill:nth-child(5n)  { animation-delay: 2s; }
.pf-ticker__pill:nth-child(6n)  { animation-delay: 2.5s; }

/* Shimmer-блик */
.pf-ticker__pill::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(200,150,80,.28), transparent);
  transform: skewX(-15deg);
  animation: pill-shimmer 4.5s ease-in-out infinite;
  pointer-events: none;
}
.pf-ticker__pill:nth-child(2n)::after { animation-delay: .8s; }
.pf-ticker__pill:nth-child(3n)::after { animation-delay: 1.6s; }
.pf-ticker__pill:nth-child(4n)::after { animation-delay: 2.4s; }
.pf-ticker__pill:nth-child(5n)::after { animation-delay: 3.2s; }
.pf-ticker__pill:nth-child(6n)::after { animation-delay: 4s; }

.pf-ticker__pill:hover {
  transform: translateY(-4px) scale(1.05);
  background: rgba(200,150,80,.07);
  box-shadow: 0 8px 24px rgba(200,150,80,.22);
  border-color: var(--accent);
}

.pf-ticker__pill-icon {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}



/* ══════════════════════════════════════════════════════════
   STATS SECTION
══════════════════════════════════════════════════════════ */
.pf-stats-section {
  padding: 96px 0;
  background: #fff;
}

.pf-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* ── Flip-карточка ── */
.pf-flip {
  height: 260px;
  perspective: 1000px;
  cursor: pointer;
}

.pf-flip__inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .65s cubic-bezier(.4,0,.2,1);
}

.pf-flip:hover .pf-flip__inner {
  transform: rotateY(180deg);
}

.pf-flip__front,
.pf-flip__back {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  text-align: center;
  overflow: hidden;
}

/* ── Лицо ── */
.pf-flip__front {
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 4px 20px rgba(0,0,0,.07);
}

/* Shimmer на лице */
.pf-flip__front::after {
  content: '';
  position: absolute;
  top: 0; left: -70%; width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-15deg);
  animation: card-shimmer 5s ease-in-out infinite;
  pointer-events: none;
}
.pf-flip:nth-child(2) .pf-flip__front::after { animation-delay: .8s; }
.pf-flip:nth-child(3) .pf-flip__front::after { animation-delay: 1.6s; }
.pf-flip:nth-child(4) .pf-flip__front::after { animation-delay: 2.4s; }

/* Цвета лица */
.pf-flip__front--blue   { background: linear-gradient(145deg, #e8f4fb 0%, #cce5f5 100%); }
.pf-flip__front--green  { background: linear-gradient(145deg, #e6f4ee 0%, #c2e8d4 100%); }
.pf-flip__front--gold   { background: linear-gradient(145deg, #fdf3e3 0%, #f5ddb0 100%); }
.pf-flip__front--purple { background: linear-gradient(145deg, #f0ecfb 0%, #d8cdf5 100%); }

/* ── Оборот ── */
.pf-flip__back {
  transform: rotateY(180deg);
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  justify-content: flex-start;
  padding: 28px 26px;
  text-align: left;
  align-items: flex-start;
}

.pf-flip__back--blue   { background: linear-gradient(145deg, #1a5f8a 0%, #0e3d5c 100%); }
.pf-flip__back--green  { background: linear-gradient(145deg, #1a7a4a 0%, #0e4d2e 100%); }
.pf-flip__back--gold   { background: linear-gradient(145deg, #b87820 0%, #7a4e0e 100%); }
.pf-flip__back--purple { background: linear-gradient(145deg, #5a3aaa 0%, #38226e 100%); }

/* Элементы лица */
.pf-flip__icon   { display:flex; align-items:center; justify-content:center; margin-bottom: 12px; line-height: 1; }

.pf-flip__num    {
  font-size: 50px; font-weight: 900; color: var(--accent);
  line-height: 1; margin-bottom: 8px; font-variant-numeric: tabular-nums;
}
.pf-flip__front--blue   .pf-flip__num { color: #1a6fa0; }
.pf-flip__front--green  .pf-flip__num { color: #1a7a4a; }
.pf-flip__front--gold   .pf-flip__num { color: #b87820; }
.pf-flip__front--purple .pf-flip__num { color: #5a3aaa; }

.pf-flip__label  { font-size: 13px; font-weight: 700; color: #2A2018; line-height: 1.3; }
.pf-flip__hint   {
  position: absolute; bottom: 14px; right: 18px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; opacity: .4; color: #2A2018;
}

/* Элементы оборота */
.pf-flip__back-icon  { display:flex; align-items:center; justify-content:center; margin-bottom: 10px; }
.pf-flip__back-title {
  font-size: 16px; font-weight: 800; color: #fff;
  margin-bottom: 10px; line-height: 1.2;
}
.pf-flip__back-text  {
  font-size: 12.5px; color: rgba(255,255,255,.85);
  line-height: 1.6; margin-bottom: 16px; flex: 1;
}
.pf-flip__back-tag   {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 12px; width: 100%;
}



/* ══════════════════════════════════════════════════════════
   PORTFOLIO WORKS
══════════════════════════════════════════════════════════ */
.pf-works-section {
  padding: 96px 0;
  background: var(--bg, #F7F3EE);
}

/* Фильтры */
.pf-filter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 52px;
}
.pf-filter-btn {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 9px 22px;
  border-radius: 50px;
  border: 1.5px solid rgba(200,150,80,.3);
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  transition: all .25s;
}
.pf-filter-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(200,150,80,.06);
}
.pf-filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Сетка проектов — бентог layout */
.pf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Карточка проекта */
.pf-card {
  background: #fff;
  border-radius: var(--radius-lg, 24px);
  border: 1px solid rgba(200,150,80,.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s, border-color .3s;
  animation: card-float 4.5s ease-in-out infinite;
}
.pf-card:nth-child(2)  { animation-delay: .5s; }
.pf-card:nth-child(3)  { animation-delay: 1.0s; }
.pf-card:nth-child(4)  { animation-delay: 1.5s; }
.pf-card:nth-child(5)  { animation-delay: 2.0s; }
.pf-card:nth-child(6)  { animation-delay: 2.5s; }
.pf-card:nth-child(7)  { animation-delay: 3.0s; }
.pf-card:nth-child(8)  { animation-delay: 3.5s; }

.pf-card::before {
  content: '';
  position: absolute;
  top: 0; left: -70%; width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-15deg);
  animation: card-shimmer 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.pf-card:nth-child(2)::before { animation-delay: 1s; }
.pf-card:nth-child(3)::before { animation-delay: 2s; }
.pf-card:nth-child(4)::before { animation-delay: 0.5s; }
.pf-card:nth-child(5)::before { animation-delay: 1.5s; }
.pf-card:nth-child(6)::before { animation-delay: 2.5s; }

.pf-card--large {
  grid-column: span 2;
  flex-direction: row;
}
.pf-card--large .pf-card__visual { min-width: 340px; flex-shrink: 0; }
.pf-card--large .pf-card__body { display: flex; flex-direction: column; justify-content: space-between; }

.pf-card:hover {
  animation: none;
  transform: translateY(-8px) scale(1.01);
  border-color: rgba(200,150,80,.45);
  box-shadow: 0 24px 56px rgba(200,150,80,.16);
}

/* Visual — скриншот */
.pf-card__visual {
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.pf-card__visual--dental  { background: linear-gradient(145deg, #0f3545 0%, #1a5a72 100%); }
.pf-card__visual--shop    { background: linear-gradient(145deg, #2a1a08 0%, #4a3015 100%); }
.pf-card__visual--law     { background: linear-gradient(145deg, #0a1628 0%, #1a2d4a 100%); }
.pf-card__visual--fitness { background: linear-gradient(145deg, #0a2a0a 0%, #1a4a1a 100%); }
.pf-card__visual--ads     { background: linear-gradient(145deg, #1a0a28 0%, #2d1545 100%); }
.pf-card__visual--corp    { background: linear-gradient(145deg, #1a1a2a 0%, #2a2a45 100%); }
.pf-card__visual--beauty  { background: linear-gradient(145deg, #3d1a2a 0%, #5a2a40 100%); }
.pf-card__visual--realty  { background: linear-gradient(145deg, #1a2a1a 0%, #2a3d2a 100%); }

/* Мок браузера */
.pf-card__screen {
  margin: 16px 16px 0;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  animation: screen-appear .6s ease both;
}
.pf-card__screen-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  background: #f0f0f0;
  border-bottom: 1px solid #ddd;
}
.pf-card__screen-bar span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ddd;
  flex-shrink: 0;
}
.pf-card__screen-bar span:nth-child(1) { background: #ff5f57; }
.pf-card__screen-bar span:nth-child(2) { background: #febc2e; }
.pf-card__screen-bar span:nth-child(3) { background: #28c840; }
.pf-card__screen-url {
  flex: 1;
  text-align: center;
  font-size: 10px;
  color: #888;
  font-weight: 500;
  background: #e8e8e8;
  border-radius: 4px;
  padding: 2px 8px;
}
.pf-card__screen-content {
  padding: 12px;
  min-height: 110px;
  display: flex;
  flex-direction: column;
}

/* Теги на карточке */
.pf-card__tags {
  display: flex;
  gap: 6px;
  padding: 12px 14px 14px;
  flex-wrap: wrap;
}
.pf-card__tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 4px;
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.2);
}
.pf-card__tag--green {
  background: rgba(25,152,18,.2);
  color: #4de847;
  border-color: rgba(25,152,18,.35);
}

/* Body */
.pf-card__body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.pf-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.pf-card__industry { font-size: 13px; font-weight: 600; color: var(--text-light); }
.pf-card__year     { font-size: 12px; color: var(--text-light); opacity: .7; }
.pf-card__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.35;
}
.pf-card__text {
  font-size: 13.5px;
  color: var(--text-light);
  line-height: 1.65;
  margin-bottom: 16px;
}
.pf-card__results {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.pf-card__results li {
  font-size: 13px;
  color: var(--text-light);
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.pf-card__results strong { color: var(--text); font-weight: 700; }
.pf-result-icon {
  color: #199812;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}

.pf-card__footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border, #EDE6DC); }
.pf-card__stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pf-card__stack span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 3px 10px;
  border-radius: 4px;
  background: rgba(200,150,80,.08);
  color: var(--accent);
  border: 1px solid rgba(200,150,80,.2);
}

/* Load more */
.pf-load-more {
  text-align: center;
  margin-top: 48px;
}


/* ── Скрытые карточки при фильтрации ── */
.pf-card.pf-hidden {
  display: none;
}


/* ── Мок-скрины внутри карточек ── */

/* Dental */
.pf-screen--dental {
  background: linear-gradient(160deg, #0f3545, #1a5a72);
  justify-content: space-between;
  padding: 10px;
}
.pf-screen__hero-block { display: flex; flex-direction: column; gap: 4px; }
.pf-screen__headline   { font-size: 13px; font-weight: 800; color: #fff; line-height: 1.2; }
.pf-screen__sub        { font-size: 10px; color: rgba(255,255,255,.7); }
.pf-screen__btn {
  margin-top: 6px;
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  color: #1a5a72;
  background: #C89650;
  border-radius: 3px;
  padding: 3px 8px;
  width: fit-content;
}
.pf-screen__metrics { display: flex; gap: 10px; align-self: flex-end; }
.pf-screen__metric  { text-align: center; }
.pf-screen__metric b { display: block; font-size: 13px; font-weight: 800; color: #C89650; line-height: 1.1; }
.pf-screen__metric small { font-size: 8px; color: rgba(255,255,255,.6); }

/* Shop */
.pf-screen--shop { background: linear-gradient(160deg, #2a1a08, #4a3015); padding: 8px; }
.pf-screen__catalog {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  flex: 1;
}
.pf-screen__cat-item {
  border-radius: 4px;
  background: rgba(200,150,80,.15);
  border: 1px solid rgba(200,150,80,.25);
  height: 40px;
  background: linear-gradient(135deg, rgba(200,150,80,.15), rgba(200,150,80,.08));
  animation: card-shimmer 4s ease-in-out infinite;
  position: relative; overflow: hidden;
}
.pf-screen__cat-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(200,150,80,.15) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shimmer-sweep 2s ease-in-out infinite;
}
.pf-screen__cat-item:nth-child(2) { animation-delay: .5s; }
.pf-screen__cat-item:nth-child(3) { animation-delay: 1s; }
.pf-screen__cat-item:nth-child(4) { animation-delay: 1.5s; }

/* Law */
.pf-screen--law { background: #0a1628; padding: 8px; justify-content: center; align-items: center; }
.pf-screen__seo-chart { position: relative; width: 100%; }
.pf-screen__seo-chart svg { width: 100%; height: 55px; }
.pf-screen__seo-label {
  position: absolute;
  right: 4px; top: 2px;
  font-size: 10px; font-weight: 800;
  color: #C89650;
}

/* Fitness */
.pf-screen--fitness { background: linear-gradient(160deg, #0a2a0a, #1a4a1a); padding: 10px; }
.pf-screen__fitness-hero { display: flex; flex-direction: column; gap: 8px; }
.pf-screen__fitness-title { font-size: 14px; font-weight: 800; color: #fff; }
.pf-screen__fitness-badges { display: flex; gap: 5px; flex-wrap: wrap; }
.pf-screen__fitness-badges span {
  font-size: 9px; font-weight: 700;
  background: rgba(200,150,80,.25);
  color: #C89650;
  border-radius: 3px;
  padding: 2px 6px;
}

/* Ads */
.pf-screen--ads { background: #1a0a28; padding: 8px; gap: 6px; justify-content: center; }
.pf-screen__ads-metrics { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.pf-screen__ads-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pf-screen__ads-row span  { font-size: 9px; font-weight: 700; color: rgba(255,255,255,.7); width: 22px; flex-shrink: 0; }
.pf-screen__ads-row strong { font-size: 10px; font-weight: 800; color: #C89650; width: 34px; text-align: right; flex-shrink: 0; }
.pf-screen__ads-bar {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,.1);
  border-radius: 3px;
  overflow: hidden;
}
.pf-screen__ads-bar div {
  height: 100%;
  background: linear-gradient(to right, #C89650, #e8b06a);
  border-radius: 3px;
  animation: bar-grow 1.2s ease both;
  animation-delay: .5s;
}

/* Corp */
.pf-screen--corp { background: #1a1a2a; padding: 8px; gap: 6px; }
.pf-screen__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: 8px;
}
.pf-screen__logo-bar { width: 40px; height: 6px; background: #C89650; border-radius: 2px; }
.pf-screen__nav-links { display: flex; gap: 8px; }
.pf-screen__nav-links span { width: 18px; height: 4px; background: rgba(255,255,255,.25); border-radius: 2px; }
.pf-screen__corp-hero { padding: 4px 2px; }
.pf-screen__corp-title { font-size: 12px; font-weight: 800; color: #fff; margin-bottom: 3px; }
.pf-screen__corp-sub { font-size: 9px; color: rgba(255,255,255,.6); }

/* Beauty */
.pf-screen--beauty { background: linear-gradient(160deg, #3d1a2a, #5a2a40); padding: 10px; justify-content: center; }
.pf-screen__beauty-hero { text-align: center; }
.pf-screen__beauty-title { font-size: 11px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.pf-screen__beauty-dot-row { display: flex; gap: 6px; justify-content: center; }
.pf-screen__beauty-dot-row span {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid rgba(200,150,80,.5);
}
.pf-screen__beauty-dot-row span:nth-child(1) { background: rgba(200,80,80,.3); }
.pf-screen__beauty-dot-row span:nth-child(2) { background: rgba(200,150,80,.3); }
.pf-screen__beauty-dot-row span:nth-child(3) { background: rgba(80,150,200,.3); }

/* Realty */
.pf-screen--realty { background: linear-gradient(160deg, #1a2a1a, #2a3d2a); padding: 8px; justify-content: center; align-items: center; }
.pf-screen__realty-map {
  width: 100%; height: 80px;
  background: rgba(200,150,80,.08);
  border-radius: 4px;
  position: relative;
  border: 1px solid rgba(200,150,80,.2);
}
.pf-screen__realty-pin {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: #C89650;
}
.pf-screen__realty-pin--1 { top: 20%; left: 30%; }
.pf-screen__realty-pin--2 { top: 50%; left: 60%; }
.pf-screen__realty-pin--3 { top: 65%; left: 20%; }


/* ══════════════════════════════════════════════════════════
   PROCESS MINI
══════════════════════════════════════════════════════════ */
.pf-process-section {
  padding: 96px 0;
  background: #fff;
  position: relative;
  overflow: hidden;
}
.pf-process-section__bg-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(200,150,80,.08) 1.5px, transparent 1.5px);
  background-size: 36px 36px;
  pointer-events: none;
}

.pf-process-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  position: relative;
  z-index: 1;
}
/* Линия соединения */
.pf-process-steps::before {
  content: '';
  position: absolute;
  top: 40px;
  left: calc(10% + 20px);
  right: calc(10% + 20px);
  height: 2px;
  background: linear-gradient(to right, rgba(200,150,80,.3), rgba(200,150,80,.7), rgba(200,150,80,.3));
  z-index: 0;
}

.pf-process-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.pf-process-step__num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(200,150,80,.4);
  position: relative;
  z-index: 1;
  transition: transform .3s, box-shadow .3s;
}
.pf-process-step:hover .pf-process-step__num {
  transform: scale(1.12);
  box-shadow: 0 8px 32px rgba(200,150,80,.6);
}
.pf-process-step__content {
  padding: 20px 14px 20px;
  background: var(--bg, #F7F3EE);
  border-radius: var(--radius-md, 16px);
  border: 1px solid rgba(200,150,80,.12);
  flex: 1;
  width: 100%;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, border-color .3s;
}
.pf-process-step:hover .pf-process-step__content {
  transform: translateY(-4px);
  border-color: rgba(200,150,80,.4);
  box-shadow: 0 12px 32px rgba(200,150,80,.12);
}
.pf-process-step__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  animation: icon-bounce 2.8s ease-in-out infinite;
}
@keyframes icon-bounce {
  0%,100% { transform: translateY(0) rotate(0deg); }
  30%     { transform: translateY(-8px) rotate(-6deg); }
  60%     { transform: translateY(-4px) rotate(4deg); }
}
.pf-process-step:nth-child(2) .pf-process-step__icon { animation-delay: .5s; }
.pf-process-step:nth-child(3) .pf-process-step__icon { animation-delay: 1s; }
.pf-process-step:nth-child(4) .pf-process-step__icon { animation-delay: 1.5s; }
.pf-process-step:nth-child(5) .pf-process-step__icon { animation-delay: 2s; }
.pf-process-step__title   { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 8px; line-height: 1.3; }
.pf-process-step__text    { font-size: 12.5px; color: var(--text-light); line-height: 1.55; margin-bottom: 12px; }
.pf-process-step__time {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(200,150,80,.1);
  border-radius: 4px;
  padding: 2px 8px;
}


/* ══════════════════════════════════════════════════════════
   TECH CLOUD
══════════════════════════════════════════════════════════ */
.pf-tech-section {
  padding: 80px 0;
  background: var(--bg, #F7F3EE);
}
.pf-tech-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
}
.pf-tech-item {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 9px 20px;
  border-radius: 50px;
  background: #fff;
  color: var(--text);
  border: 1.5px solid rgba(200,150,80,.2);
  cursor: default;
  position: relative;
  overflow: hidden;
  transition: color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  z-index: 0;
}
/* Заливка сверху вниз */
.pf-tech-item::before {
  content: '';
  position: absolute;
  top: -100%; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(180deg, #C89650 0%, #a87030 100%);
  transition: top .35s cubic-bezier(.4,0,.2,1);
  z-index: -1;
}
.pf-tech-item:hover::before { top: 0; }
.pf-tech-item:hover {
  color: #fff;
  border-color: #a87030;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 6px 20px rgba(200,150,80,.3);
}
.pf-tech-item--sm { font-size: 11px; padding: 7px 16px; }
.pf-tech-item--md { font-size: 14px; padding: 10px 22px; }
.pf-tech-item--lg { font-size: 15px; padding: 11px 26px; font-weight: 800; }


/* ══════════════════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════════════════ */
.pf-faq-section {
  padding: 96px 0;
  background: #fff;
}
.pf-faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pf-faq-item {
  border: 1.5px solid rgba(200,150,80,.2);
  border-radius: var(--radius-md, 16px);
  overflow: hidden;
  background: var(--bg, #F7F3EE);
  transition: border-color .3s, box-shadow .3s;
}
.pf-faq-item:hover { border-color: rgba(200,150,80,.45); }
.pf-faq-item.open  { border-color: var(--accent); box-shadow: 0 6px 24px rgba(200,150,80,.12); }

.pf-faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  transition: color .2s;
}
.pf-faq-item__q:hover { color: var(--accent); }
.pf-faq-item.open .pf-faq-item__q { color: var(--accent); }

.pf-faq-item__arrow {
  flex-shrink: 0;
  color: var(--accent);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.pf-faq-item.open .pf-faq-item__arrow { transform: rotate(180deg); }

.pf-faq-item__a {
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.65;
  max-height: 0;
  overflow: hidden;
  padding: 0 22px;
  transition: max-height .45s ease, padding .45s ease;
}
.pf-faq-item.open .pf-faq-item__a {
  max-height: 300px;
  padding: 0 22px 20px;
}


/* ══════════════════════════════════════════════════════════
   CTA SECTION
══════════════════════════════════════════════════════════ */
.pf-cta-section {
  padding: 100px 0;
  background: linear-gradient(135deg, #1e1208 0%, #2a1a0a 50%, #1e1208 100%);
  position: relative;
  overflow: hidden;
}
.pf-cta-section__orb {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,150,80,.15), transparent 65%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: orb-drift 10s ease-in-out infinite;
}
.pf-cta-inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.pf-cta-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(200,150,80,.12);
  border: 1px solid rgba(200,150,80,.3);
  border-radius: 50px;
  padding: 5px 18px;
  margin-bottom: 20px;
}
.pf-cta-title {
  font-size: 42px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
  line-height: 1.2;
}
.pf-cta-sub {
  font-size: 16px;
  color: rgba(255,255,255,.65);
  line-height: 1.65;
  margin-bottom: 40px;
}

/* Форма CTA */
.pf-cta-form { text-align: left; }
.pf-cta-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.pf-cta-form__field input,
.pf-cta-form__field textarea {
  width: 100%;
  padding: 14px 18px;
  font-size: 14px;
  font-family: inherit;
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(200,150,80,.25);
  border-radius: var(--radius-md, 16px);
  outline: none;
  transition: border-color .25s, background .25s;
  resize: none;
}
.pf-cta-form__field input::placeholder,
.pf-cta-form__field textarea::placeholder { color: rgba(255,255,255,.4); }
.pf-cta-form__field input:focus,
.pf-cta-form__field textarea:focus {
  border-color: var(--accent);
  background: rgba(255,255,255,.12);
}
.pf-cta-form__field--full { margin-bottom: 14px; }
.pf-cta-form__submit { text-align: center; }
.pf-cta-form__note {
  font-size: 12px;
  color: rgba(255,255,255,.45);
  margin-top: 14px;
}

/* CTA контакты */
.pf-cta-contacts {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
}
.pf-cta-contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  transition: color .2s;
}
.pf-cta-contact:hover { color: var(--accent); }


/* ══════════════════════════════════════════════════════════
   SIDE NAV
══════════════════════════════════════════════════════════ */
.side-nav {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.side-dot {
  position: relative;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(200,150,80,.3);
  border: 1.5px solid rgba(200,150,80,.4);
  cursor: pointer;
  transition: all .3s;
}
.side-dot:hover,
.side-dot.active {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.35);
  box-shadow: 0 0 0 3px rgba(200,150,80,.25);
}
.side-dot-tooltip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--text);
  color: #fff;
  padding: 4px 10px;
  border-radius: 5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.side-dot:hover .side-dot-tooltip { opacity: 1; }

/* ══════════════════════════════════════════════════════════
   МОЗАИКА HERO
══════════════════════════════════════════════════════════ */

@keyframes mosaic-breathe {
  0%,100% { transform: translateY(0)   scale(1);    }
  50%      { transform: translateY(-5px) scale(1.015); }
}

/* Сетка 2×2 */
.pf-hero__mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pf-mosaic-card {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(200,150,80,.18);
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  cursor: default;
  animation: mosaic-breathe 4s ease-in-out infinite;
  /* transition только для box-shadow и border — НЕ transform, иначе убивает анимацию */
  transition: box-shadow .35s ease, border-color .3s ease;
}

/* Случайные задержки */
.pf-mosaic-card--a { animation-delay: 0s;   }
.pf-mosaic-card--b { animation-delay: 1.3s; }
.pf-mosaic-card--c { animation-delay: 0.7s; }
.pf-mosaic-card--d { animation-delay: 2.1s; }

/* Hover — останавливаем breathe, плавно поднимаем */
.pf-mosaic-card:hover {
  animation-play-state: paused;
  transform: translateY(-7px);
  border-color: var(--accent);
  box-shadow: 0 16px 40px rgba(200,150,80,.22);
  transition: transform .3s ease, box-shadow .35s ease, border-color .3s ease;
}

/* Image */
.pf-mosaic-card__img {
  height: 120px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/* Цвета */
.pf-mosaic-card__img--dental  { background: linear-gradient(135deg, #daeef7 0%, #b8dff0 100%); }
.pf-mosaic-card__img--shop    { background: linear-gradient(135deg, #fdf0e4 0%, #f0d8b8 100%); }
.pf-mosaic-card__img--law     { background: linear-gradient(135deg, #e8eef8 0%, #c8d8f0 100%); }
.pf-mosaic-card__img--fitness { background: linear-gradient(135deg, #e2f2e2 0%, #bcdcbc 100%); }

/* Overlay */
.pf-mosaic-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px 14px;
  background: linear-gradient(to top, rgba(0,0,0,.08) 0%, transparent 55%);
}
.pf-mosaic-card__tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7A6A58;
  margin-bottom: 2px;
}
.pf-mosaic-card__stat {
  font-size: 16px;
  font-weight: 800;
  color: #2A2018;
  line-height: 1.2;
  transition: color .25s ease;
}
.pf-mosaic-card:hover .pf-mosaic-card__stat { color: var(--accent); }

/* Label */
.pf-mosaic-card__label {
  font-size: 11px;
  font-weight: 600;
  color: #7A6A58;
  padding: 8px 14px;
  background: #fff;
  transition: color .25s ease;
  line-height: 1.3;
}
.pf-mosaic-card:hover .pf-mosaic-card__label { color: var(--accent); }

/* Строка тегов */
.pf-mosaic-tags {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 4px 0;
}

@keyframes tag-enter {
  from { opacity: 0; transform: translateY(10px) scale(.88); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
@keyframes tag-shimmer-idle {
  0%,100% { background-position: 0%   50%; }
  50%      { background-position: 100% 50%; }
}

.pf-mosaic-tags span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(200,150,80,.28);
  border-radius: 6px;
  padding: 5px 13px;
  cursor: default;
  position: relative;
  overflow: hidden;
  /* Градиент в покое тихо переливается */
  background: linear-gradient(
    270deg,
    rgba(200,150,80,.06),
    rgba(200,150,80,.15),
    rgba(200,150,80,.06)
  );
  background-size: 300% 300%;
  animation:
    tag-enter .5s cubic-bezier(.34,1.56,.64,1) both,
    tag-shimmer-idle 4s ease-in-out infinite;
  transition: color .25s, border-color .25s, box-shadow .25s, transform .25s cubic-bezier(.34,1.56,.64,1);
}

/* Stagger — каждый тег появляется чуть позже */
.pf-mosaic-tags span:nth-child(1) { animation-delay: .1s,  0s;   }
.pf-mosaic-tags span:nth-child(2) { animation-delay: .2s,  .6s;  }
.pf-mosaic-tags span:nth-child(3) { animation-delay: .3s,  1.2s; }
.pf-mosaic-tags span:nth-child(4) { animation-delay: .4s,  1.8s; }
.pf-mosaic-tags span:nth-child(5) { animation-delay: .5s,  2.4s; }
.pf-mosaic-tags span:nth-child(6) { animation-delay: .6s,  3.0s; }

/* Блик при hover — псевдоэлемент */
.pf-mosaic-tags span::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-15deg);
  transition: left .4s ease;
  pointer-events: none;
}

.pf-mosaic-tags span:hover {
  background: var(--accent);
  background-size: 100%;
  color: #fff;
  border-color: var(--accent);
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 6px 18px rgba(200,150,80,.35);
  animation: none;
}
.pf-mosaic-tags span:hover::after {
  left: 130%;
}
/* Текущий пункт меню в футере */
.footer__link--current {
  color: #199812;
  cursor: default;
  pointer-events: none;
  font-size: 14px;

}