.blog-hero-section{padding:200px 24px 60px;background:linear-gradient(135deg,#f8f9fc 0%,#f0eeff 100%);text-align:center}
.blog-hero-section h1{font-size:48px;font-weight:800;color:#02122f;margin-bottom:16px}
.blog-hero-section p{font-size:18px;color:#555;max-width:600px;margin:0 auto;line-height:1.7}
.blog-grid-section{padding:60px 24px 80px;max-width:1100px;margin:0 auto}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:40px}
.blog-card{background:#fff;border-radius:16px;border:1px solid #eef1f6;overflow:hidden;transition:box-shadow 0.3s ease,transform 0.2s ease;text-decoration:none;display:flex;flex-direction:column}
.blog-card:hover{box-shadow:0 12px 40px rgba(132,74,252,0.12);transform:translateY(-4px)}
.blog-card-image{width:100%;height:220px;object-fit:cover;background:linear-gradient(135deg,#844afc 0%,#6d5ce7 100%);display:flex;align-items:center;justify-content:center;color:#fff;font-size:48px;font-weight:700}
.blog-card-body{padding:28px;flex:1;display:flex;flex-direction:column}
.blog-card-tag{display:inline-block;background:#f0eeff;color:#844afc;font-size:12px;font-weight:600;padding:4px 12px;border-radius:20px;margin-bottom:12px;text-transform:uppercase;letter-spacing:0.5px;width:fit-content}
.blog-card-title{font-size:22px;font-weight:700;color:#02122f;margin-bottom:12px;line-height:1.3}
.blog-card-excerpt{font-size:15px;color:#555;line-height:1.7;flex:1}
.blog-card-meta{display:flex;align-items:center;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid #eef1f6;font-size:13px;color:#888}
@media(max-width:768px){.blog-hero-section h1{font-size:32px}.blog-grid{grid-template-columns:1fr}}