.home-use-cases,.cases-listing,.related-cases{background:var(--soft)}
.home-use-cases .section-intro{margin-bottom:18px}
.concept-disclosure,.listing-disclosure,.preview-note{display:block;color:var(--muted);font-size:12px;margin:0 0 28px}
.listing-disclosure{color:#afbdd0;margin:22px 0 0}
.case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.case-card{min-width:0;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 7px 24px #17345a0a;transition:transform .25s,border-color .25s,box-shadow .25s}
.case-card:hover{transform:translateY(-5px);border-color:#a7c8ef;box-shadow:0 18px 36px #17345a18}
.case-cover{display:block;overflow:hidden;background:#17263e;aspect-ratio:16/10}
.case-cover img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .4s}
.case-card:hover .case-cover img{transform:scale(1.045)}
.case-card-body{padding:21px;display:flex;flex-direction:column;flex:1}
.case-card-meta,.detail-badges{display:flex;gap:8px;flex-wrap:wrap;align-items:center;color:var(--blue);font-size:10px;letter-spacing:.04em;font-weight:800}
.type-badge,.detail-badges span:last-child{background:#edf4ff;color:#3970ad;border-radius:99px;padding:4px 9px;font-size:10px;letter-spacing:0}
.case-card h3{font-size:19px;line-height:1.3;letter-spacing:-.04em;margin:13px 0 8px}
.case-card h3 a:hover{color:var(--blue)}
.case-card p{color:var(--muted);font-size:12px;margin:0 0 16px}
.case-tags,.stack-list{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0}
.case-tags{margin-top:auto;margin-bottom:19px}
.case-tags span,.stack-list li{background:#f0f5fb;border:1px solid #e0e9f3;border-radius:5px;padding:5px 8px;color:#48617f;font-size:10px;font-weight:700}
.case-link,.text-link,.back-link{color:var(--blue);font-size:12px;font-weight:800;display:inline-flex;align-items:center;gap:8px}
.case-link i,.text-link i{transition:transform .2s}
.case-link:hover i,.text-link:hover i{transform:translate(2px,-2px)}
.case-section-action{text-align:center;margin-top:36px}
.case-controls{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:17px}
.case-filters{display:flex;flex-wrap:wrap;gap:8px;max-width:810px}
.filter-button{font:700 11px/1.2 "Plus Jakarta Sans",Arial,sans-serif;border:1px solid var(--line);border-radius:99px;background:#fff;color:#41546d;padding:10px 13px;cursor:pointer;transition:.2s}
.filter-button:hover,.filter-button.active{background:var(--blue);border-color:var(--blue);color:#fff}
.case-search{display:flex;align-items:center;gap:10px;min-width:250px;padding:0 12px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--muted)}
.case-search:focus-within{outline:2px solid var(--blue);outline-offset:2px}
.case-search input{height:39px;min-width:0;width:100%;border:0;background:none;outline:0;font:12px "Plus Jakarta Sans",Arial,sans-serif;color:var(--ink)}
.results-count{font-size:12px;color:var(--muted);margin-bottom:19px}
.case-empty{text-align:center;border:1px dashed #b5c7dc;border-radius:10px;padding:50px 20px;color:var(--muted)}
.case-empty[hidden],.case-card[hidden]{display:none}
.case-empty i{font-size:30px;color:var(--blue)}.case-empty h3{color:var(--ink);margin:15px 0 4px}.case-empty p{font-size:13px}
.case-detail-hero{background:var(--navy);color:#fff;padding:54px 0 72px}
.back-link{color:#a9cdfd;margin-bottom:40px}
.case-detail-intro{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:38px}
.detail-badges{color:#a9cdfd;margin-bottom:18px}.detail-badges span:last-child{color:#c9dfff;background:#213b60}
.case-detail-intro h1{font-size:clamp(40px,5vw,64px);letter-spacing:-.058em;line-height:1.1;margin:0 0 16px}
.case-detail-intro p{font-size:16px;color:#b3c0d2;max-width:710px;margin:0}
.case-detail-intro .button{flex-shrink:0}
.detail-preview{border:1px solid #3b4d65;border-radius:12px;overflow:hidden;box-shadow:0 24px 54px #0005;background:#101d31}
.detail-preview img{display:block;width:100%;height:auto;max-height:600px;object-fit:cover}
.preview-note{color:#92a5bd;margin:13px 0 0}
.detail-two-col{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.detail-two-col h2{font-size:clamp(28px,3.1vw,42px);line-height:1.15;letter-spacing:-.045em;margin:0 0 18px}
.detail-overview .detail-two-col>p{font-size:17px;color:#51647d;align-self:center}
.detail-explain,.detail-stack{background:var(--soft)}
.detail-explain article,.detail-stack>.container>div{min-width:0}
.detail-list{list-style:none;padding:0;margin:20px 0 0}
.detail-list li{position:relative;padding:0 0 15px 23px;color:#51647d;font-size:14px}
.detail-list li::before{content:"";position:absolute;top:10px;left:0;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.feature-card{border:1px solid var(--line);border-radius:8px;background:#fff;padding:25px}
.feature-card i{font-size:21px;color:var(--blue)}.feature-card h3{font-size:16px;letter-spacing:-.03em;margin:20px 0 7px}.feature-card p{font-size:12px;color:var(--muted);margin:0}
.detail-stack p:not(.eyebrow){color:var(--muted);font-size:13px}.stack-list{margin-top:23px}.stack-list li{font-size:12px;padding:9px 12px}
.related-cases .section-intro{align-items:end}
@media(max-width:1000px){.case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.case-controls{display:block}.case-search{width:min(100%,360px);margin-top:17px}.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.case-grid,.detail-two-col,.feature-grid{grid-template-columns:1fr}.case-grid{gap:16px}.case-detail-hero{padding:33px 0 49px}.back-link{margin-bottom:29px}.case-detail-intro{display:block}.case-detail-intro .button{margin-top:23px}.case-detail-intro h1{font-size:39px}.detail-two-col{gap:28px}.detail-overview .detail-two-col>p{margin:0}.case-filters{gap:6px}.filter-button{padding:8px 10px}.case-search{width:100%}.related-cases .text-link{margin-top:20px}}
@media(prefers-reduced-motion:reduce){.case-card,.case-cover img,.filter-button,.case-link i,.text-link i{transition:none}.case-card:hover,.case-card:hover .case-cover img{transform:none}}