:root{--rp-b1:#3b82f6;--rp-b2:#2563eb;--rp-b3:#1d4ed8}
.related-sec{max-width:1400px;margin:8px auto 0;padding:38px 64px 8px;background:var(--surface)}
.related-head{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.related-head .rh-bar{width:5px;height:26px;border-radius:3px;background:linear-gradient(180deg,#16a34a,#2563eb);flex:none}
.related-head h2{font-size:24px;font-weight:800;letter-spacing:-.4px;color:var(--ink);margin:0}
.related-head .rh-note{margin-left:auto;font-size:13px;color:var(--muted)}
.related-head .rh-note a{color:var(--rp-b2);font-weight:700;text-decoration:none}
.related-head .rh-note a:hover{text-decoration:underline}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.related-card{display:flex;flex-direction:column;border:1.5px solid #d5e8f8;border-radius:16px;overflow:hidden;background:var(--surface);text-decoration:none;color:inherit;box-shadow:0 2px 10px rgba(11,92,173,.07);transition:transform .28s,box-shadow .28s,border-color .28s}
.related-card:hover{transform:translateY(-6px);border-color:var(--rp-b1);box-shadow:0 20px 48px rgba(11,92,173,.16)}
.related-img{height:230px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#f5f7f9 0%,#eceff2 55%,#e3e8ec 100%);position:relative;overflow:hidden}
.related-img img{width:84%;height:84%;object-fit:contain;transition:transform .3s ease;filter:drop-shadow(0 6px 14px rgba(20,40,70,.12))}
.related-card:hover .related-img img{transform:scale(1.06)}
.related-code{position:absolute;top:12px;left:12px;background:rgba(10,32,16,.85);backdrop-filter:blur(6px);color:#4ade80;font-size:11px;font-weight:700;padding:4px 10px;border-radius:7px;letter-spacing:.4px;border:1px solid rgba(34,197,94,.35)}
.related-name{background:linear-gradient(135deg,#16a34a 0%,#2563eb 100%);color:#fff;font-size:13.5px;font-weight:700;text-align:center;padding:14px 16px;line-height:1.4;min-height:66px;display:flex;align-items:center;justify-content:center}
.related-cta{background:#fff;color:var(--rp-b2);font-size:12px;font-weight:700;text-align:center;padding:10px 16px;border-top:1px solid rgba(255,255,255,.25);letter-spacing:.3px}
.related-card:hover .related-cta{background:var(--rp-b3);color:#fff}
@media(max-width:1100px){.related-sec{padding:32px 30px 8px}.related-grid{grid-template-columns:repeat(3,1fr);gap:16px}.related-img{height:180px}.related-name{font-size:12.5px;min-height:60px}}
@media(max-width:760px){.related-grid{grid-template-columns:1fr}.related-img{height:220px}}