.pageHero{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  align-items:start;
}

.panel{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow);
}
.panel h2{margin:0 0 10px; font-size: var(--h2); letter-spacing:-.2px}
.panel p{margin:0; color: var(--muted); font-size: 13.5px; line-height: 1.7}

.media{
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  overflow:hidden;
}
.media img{width:100%; height:auto; display:block}

.list{margin-top:12px; display:grid; gap:10px; font-size:13.5px; color: rgba(255,255,255,.82); line-height:1.55;}
.row{display:flex; gap:10px; align-items:flex-start}
.row i{color: rgba(159,209,255,.95); margin-top:2px; width:18px; text-align:center; flex:0 0 auto}
.sub{color: rgba(255,255,255,.72)}

.caseGrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.caseCard{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  border-radius: 22px;
  padding: 18px;
}
.caseTop{display:flex; gap:12px; align-items:flex-start}
.caseIcon{
  width:44px; height:44px; border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(110,168,255,.18);
  border: 1px solid rgba(110,168,255,.30);
  color: rgba(255,255,255,.92);
  flex:0 0 auto;
}
.caseCard h3{margin:0; font-size:15px}
.caseCard p{margin:6px 0 0; color: var(--muted); font-size:13px; line-height:1.7}

.caseList{margin-top:12px; display:grid; gap:10px; color: rgba(255,255,255,.82); font-size: 13px;}
.caseList i{color: rgba(159,209,255,.95); width:18px; text-align:center; margin-right:8px}

@media (max-width:980px){
  .pageHero{grid-template-columns:1fr}
  .caseGrid{grid-template-columns:1fr}
}