/* Case references: keep the existing site's colors and typography. */
#cases { scroll-margin-top: 90px; }
.case-intro { max-width: 760px; margin: 0 auto 2.5rem; text-align: center; color: var(--text-gray); }
.case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.case-card { scroll-margin-top: 90px; background: rgba(255,255,255,.035); border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.case-preview { display: block; position: relative; background: #18222d; overflow: hidden; color: #fff; }
.case-preview img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .25s; }
.case-preview:hover img { transform: scale(1.035); }
.case-preview:focus-visible { outline: 3px solid var(--tech-cyan); outline-offset: -3px; }
.case-preview span { position: absolute; right: 12px; bottom: 12px; padding: .35rem .7rem; background: rgba(10,20,30,.8); border-radius: 6px; font-size: .8rem; }
.case-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.case-kicker { color: var(--tech-cyan); font-size: .78rem; letter-spacing: .08em; margin-bottom: .7rem; }
.case-body h3 { font-size: 1.25rem; margin-bottom: .75rem; }
.case-body > p:not(.case-kicker) { color: var(--text-gray); font-size: .9rem; line-height: 1.8; }
.case-features { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.25rem; }
.case-features span { color: #c8d7e2; font-size: .75rem; padding: .25rem .55rem; border: 1px solid var(--border-color); border-radius: 5px; }
.case-actions { margin-top: auto; }
.case-actions a { color: var(--tech-cyan); font-size: .9rem; text-underline-offset: 4px; }
.case-credit { border-top: 1px solid var(--border-color); margin-top: 1.1rem; padding-top: .9rem; color: var(--text-gray); font-size: .75rem; line-height: 1.8; }
.case-credit a, .case-note a { color: #b5cbd6; text-underline-offset: 3px; }
.case-note { color: var(--text-gray); font-size: .8rem; text-align: center; margin-top: 1.5rem; line-height: 1.8; }
.product-reference { margin: .6rem 1.5rem 0; color: var(--text-gray); font-size: .75rem; }
.media-container.reference-media { text-decoration: none; }
.media-container.reference-media .media-overlay { color: #fff; }
.case-dialog { width: min(1000px, 94vw); max-height: 92vh; margin: auto; padding: 1.2rem; border: 1px solid #4d6578; border-radius: 14px; background: #1b2632; color: #fff; overflow-y: auto; }
.case-dialog::backdrop { background: rgba(0,0,0,.8); }
.case-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.case-dialog h2 { font-size: 1.15rem; }
.case-dialog button { border: 1px solid #617485; color: #fff; background: #2b3a48; padding: .5rem .8rem; border-radius: 6px; cursor: pointer; min-height: 44px; }
.case-dialog img { display: block; width: 100%; max-height: 65vh; object-fit: contain; border-radius: 8px; background: #111b26; }
.case-dialog p { color: #b5cbd6; font-size: .85rem; margin-top: 1rem; }
.case-dialog a { color: var(--tech-cyan); }
@media (max-width: 1050px) { .case-grid { grid-template-columns: 1fr; max-width: 680px; margin: auto; } }
@media (max-width: 480px) { .products-grid { grid-template-columns: minmax(0, 1fr); } .case-body { padding: 1.15rem; } }
@media (prefers-reduced-motion: reduce) { .case-preview img { transition: none; } }