#transform{background:var(--navy)}

.tr-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:20px;align-items:stretch;
}
.tr-card{
  background:var(--card-bg);border:1px solid var(--border);
  border-radius:var(--radius-md);overflow:hidden;
  display:flex;flex-direction:column;position:relative;
  transition:border-color var(--ease),transform var(--ease);
}
.tr-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--orange),transparent);
  opacity:0;transition:opacity var(--ease);
}
.tr-card:hover{border-color:var(--orange-35);transform:translateY(-4px)}
.tr-card:hover::before{opacity:1}

.tr-img-wrap{
  width:100%;height:220px;
  background:var(--card-bg2);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  padding:20px 24px 8px;overflow:hidden;flex-shrink:0;position:relative;
}
.tr-img-wrap::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:48px;
  background:linear-gradient(to top,var(--navy),transparent);
  pointer-events:none;
}
.tr-img{
  width:100%;height:100%;object-fit:contain;
  transition:filter var(--ease),opacity var(--ease);
}
.tr-card:hover .tr-img{
  filter:drop-shadow(0 4px 18px var(--indigo-30));
  opacity:.92;
}

.tr-card-body{padding:24px 24px 28px;flex:1}
.tr-card h3{text-align:left;font-size:17px;font-weight:700;margin-bottom:10px;color:#fff}
.tr-card p{text-align:left;font-size:14px;color:var(--text-dim);line-height:1.7}

@media(max-width:780px){
  .tr-grid{grid-template-columns:1fr}
  .tr-img-wrap{height:180px}
  .tr-card h3{font-size:15px}
}