.cases__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}

.case-card{
  position:relative;display:flex;flex-direction:column;
  background:#0d1117;border:1px solid #1e2733;border-radius:16px;
  padding:36px 32px 32px;overflow:hidden;cursor:pointer;
  transition:border-color .35s,transform .35s,box-shadow .35s;
  opacity:0;transform:translateY(40px);
}
.case-card.visible{opacity:1;transform:translateY(0);transition:opacity .6s ease,transform .6s ease}

.case-card::before{
  content:'';position:absolute;inset:-1px;border-radius:17px;padding:1px;
  background:linear-gradient(135deg,transparent 30%,#00f0ff44 50%,#7b2ff744 70%,transparent 90%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .4s;pointer-events:none;
}
.case-card:hover::before{opacity:1}
.case-card:hover{transform:translateY(-8px);box-shadow:0 20px 60px rgba(0,240,255,.06),0 4px 20px rgba(123,47,247,.06)}

.case-card__status{position:absolute;top:20px;right:20px;display:flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:#6b7280}

.status-dot{width:8px;height:8px;border-radius:50%}
.status-dot.live{background:#28c840;box-shadow:0 0 8px #28c84088;animation:pulse 2s infinite}
.status-dot.beta{background:#ffbd2e;box-shadow:0 0 8px #ffbd2e88;animation:pulse 2s infinite}
.status-dot.dev{background:#ff5f57;box-shadow:0 0 8px #ff5f5788;animation:pulse 2.5s infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.5}}

.case-card__number{font-family:'JetBrains Mono',monospace;font-size:3.5rem;font-weight:700;color:#1e2733;line-height:1;margin-bottom:12px;transition:color .35s}
.case-card:hover .case-card__number{color:#00f0ff15}

.case-card__icon{color:#00f0ff;margin-bottom:20px;transition:transform .35s}
.case-card:hover .case-card__icon{transform:scale(1.1) rotate(-3deg)}

.case-card__title{font-family:'JetBrains Mono',monospace;font-size:1.25rem;color:#fff;margin-bottom:12px;transition:color .3s}
.case-card:hover .case-card__title{color:#00f0ff}

.case-card__desc{font-size:.92rem;color:#6b7280;flex-grow:1;margin-bottom:20px;line-height:1.6}

.case-card__tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.case-card__tags span{padding:4px 12px;border-radius:100px;font-family:'JetBrains Mono',monospace;font-size:.72rem;background:#1e273344;color:#6b7280;border:1px solid #1e2733;transition:border-color .3s,color .3s}
.case-card:hover .case-card__tags span{border-color:#00f0ff33;color:#c8cdd5}

.case-card__arrow{position:absolute;bottom:28px;right:28px;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#3a3f47;background:#1e273322;transition:color .3s,background .3s,transform .3s}
.case-card:hover .case-card__arrow{color:#00f0ff;background:#00f0ff15;transform:translate(4px,-4px)}

@media(max-width:768px){
  .cases__grid{grid-template-columns:1fr}
  .case-card{padding:28px 24px 60px}
  .case-card__number{font-size:2.8rem}
}