:root{
 --hb-red1:#ff3d3d;
 --hb-red2:#b30000;
}
.hb-related-wrapper{
margin-top:50px;padding:28px;border-radius:28px;
background:rgba(255,255,255,.08);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.15);
box-shadow:0 15px 40px rgba(0,0,0,.15);
position:relative;overflow:hidden;
}
.hb-related-wrapper:before{
content:"";position:absolute;inset:-50%;
background:linear-gradient(90deg,var(--hb-red1),var(--hb-red2),var(--hb-red1));
background-size:300% 300%;
opacity:.08;animation:hbGradient 8s infinite;
}
@keyframes hbGradient{
0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}
}
.hb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.hb-card{
position:relative;background:rgba(255,255,255,.75);
backdrop-filter:blur(12px);
border-radius:22px;overflow:hidden;
transition:.35s;
}
.hb-card:hover{
transform:translateY(-8px);
box-shadow:0 0 20px rgba(255,61,61,.45),0 0 40px rgba(255,61,61,.25);
}
.hb-content{padding:18px}
.hb-badge{
background:linear-gradient(135deg,var(--hb-red1),var(--hb-red2));
color:#fff;padding:8px 14px;border-radius:999px;
box-shadow:0 0 18px rgba(255,61,61,.45);
}
.hb-readmore{
display:inline-flex;align-items:center;gap:8px;
padding:12px 20px;border-radius:999px;
text-decoration:none;color:#fff!important;font-weight:700;
background:linear-gradient(135deg,var(--hb-red1),var(--hb-red2));
background-size:200% 200%;
animation:hbGradient 6s infinite;
box-shadow:0 0 18px rgba(255,61,61,.55);
}
.hb-readmore:hover{transform:scale(1.04)}
@media (prefers-color-scheme: dark){
 .hb-card{background:rgba(20,20,20,.85);color:#eee}
 .hb-card a{color:#fff}
}