.cases-filters { position: sticky; top: 52px; z-index: 20; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 14px var(--spacing-lg); flex-wrap: wrap; background: rgba(245, 245, 247, 0.98); border-bottom: 1px solid var(--color-border); }
.cases-filters__btn { padding: 8px 15px; border-radius: var(--radius-full); color: var(--color-text-tertiary); background: transparent; font-size: var(--font-size-xs); font-weight: 550; transition: color var(--transition-fast), background var(--transition-fast); }
.cases-filters__btn:hover { color: var(--color-text-primary); background: rgba(0, 0, 0, 0.045); }
.cases-filters__btn--active { color: #ffffff; background: var(--color-text-primary); }

.cases-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-5xl); }
.case-item { overflow: hidden; display: block; border-radius: var(--radius-xl); background: #ffffff; box-shadow: var(--shadow-sm); transition: transform var(--transition-base), box-shadow var(--transition-base); }
.case-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.case-item__image-wrap { position: relative; overflow: hidden; aspect-ratio: 16/9; background: #e8e8ed; }
.case-item__image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.case-item:hover .case-item__image-wrap img { transform: scale(1.025); }
.case-item__tag { position: absolute; top: var(--spacing-md); left: var(--spacing-md); padding: 5px 11px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.9); color: var(--color-text-primary); font-size: var(--font-size-xs); font-weight: 600; box-shadow: var(--shadow-sm); }
.case-item__body { padding: var(--spacing-xl); background: #ffffff; }
.case-item__title { margin-bottom: 10px; font-size: var(--font-size-xl); font-weight: 650; letter-spacing: -0.025em; }
.case-item__desc { margin-bottom: var(--spacing-lg); color: var(--color-text-tertiary); font-size: var(--font-size-sm); line-height: 1.75; }
.case-item__stats { display: flex; gap: var(--spacing-xl); padding-top: var(--spacing-md); border-top: 1px solid var(--color-border); }
.case-item__stat { display: flex; flex-direction: column; gap: 2px; }
.case-item__stat-value { color: var(--color-accent); font-size: var(--font-size-xl); font-weight: 700; letter-spacing: -0.03em; }
.case-item__stat-value--cyan { color: #5e5ce6; }
.case-item__stat-label { color: var(--color-text-muted); font-size: var(--font-size-xs); }

.field-gallery { padding: var(--spacing-5xl) 0; background: #ffffff; }
.field-gallery__header { max-width: 720px; margin-bottom: var(--spacing-3xl); }
.field-gallery__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field-photo { position: relative; min-height: 320px; overflow: hidden; border-radius: var(--radius-xl); background: #111; }
.field-photo--wide { grid-column: 1 / -1; min-height: 400px; }
.field-photo img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; transition: transform var(--transition-slow); }
.field-photo--diagram img { object-fit: contain; }
.field-photo:hover img { transform: scale(1.02); }
.field-photo figcaption { position: absolute; inset: auto 0 0; display: flex; align-items: baseline; gap: 10px; padding: 70px var(--spacing-xl) var(--spacing-xl); color: #ffffff; background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent); }
.field-photo figcaption strong { font-size: var(--font-size-lg); font-weight: 650; }
.field-photo figcaption span { color: rgba(255, 255, 255, 0.68); font-size: var(--font-size-sm); }

@media (max-width: 768px) {
  .cases-filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .cases-filters::-webkit-scrollbar { display: none; }
  .cases-filters__btn { flex: 0 0 auto; }
  .cases-grid, .field-gallery__grid { grid-template-columns: 1fr; }
  .field-photo, .field-photo--wide { grid-column: auto; min-height: 260px; }
  .field-photo figcaption { flex-direction: column; align-items: flex-start; padding: 60px var(--spacing-lg) var(--spacing-lg); }
}