.case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.case-card { background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); transition: var(--transition); }
.case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.case-header { padding: 24px 24px 16px; border-bottom: 1px solid var(--border); }
.case-tag { display: inline-block; padding: 3px 12px; background: var(--brand-bg); color: var(--brand); border-radius: 4px; font-size: .78rem; font-weight: 600; margin-bottom: 10px; }
.case-header h3 { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.case-device { font-size: .85rem; color: var(--text-muted); }
.case-body { padding: 16px 24px 24px; }
.case-section { margin-bottom: 16px; }
.case-section h4 { font-size: .9rem; font-weight: 700; color: var(--brand); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.case-section p { font-size: .88rem; color: var(--text-secondary); line-height: 1.7; }
.case-result { background: #f0fdf4; border-left: 3px solid #16a34a; padding: 12px 16px; border-radius: 0 6px 6px 0; margin-top: 16px; }
.case-result p { font-size: .85rem; color: #166534; }
.case-meta { display: flex; gap: 24px; padding-top: 12px; border-top: 1px solid var(--border); font-size: .8rem; color: var(--text-muted); }
.case-meta span { display: flex; align-items: center; gap: 4px; }
.case-filters { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 40px; }
.case-filter { padding: 8px 20px; border: 2px solid var(--border); border-radius: 20px; font-size: .88rem; cursor: pointer; transition: var(--transition); background: #fff; color: var(--text-secondary); }
.case-filter:hover, .case-filter.active { border-color: var(--brand); color: var(--brand); background: var(--brand-bg); }
.case-banner-row { display: flex; gap: 16px; margin-bottom: 32px; }
.case-banner-row img { flex: 1; border-radius: var(--radius); box-shadow: var(--shadow); max-height: 200px; object-fit: cover; width: 50%; }
@media (max-width: 768px) { .case-grid { grid-template-columns: 1fr; } }
@media (max-width:640px) { .case-banner-row { flex-direction: column; } .case-banner-row img { width: 100%; max-height: 180px; } }