.blog-page{background-color:#f8fafc;min-height:100vh;padding-bottom:100px}.blog-header-banner{padding:80px 20px;text-align:center;background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(79,70,229,.15));border-bottom:1px solid rgba(99,102,241,.1);margin-bottom:40px}.blog-header-banner .banner-content h1{font-size:44px;color:#1f2937;margin-bottom:15px;font-weight:800;letter-spacing:-1px}.blog-header-banner .banner-content p{font-size:18px;color:#4b5563;max-width:650px;margin:0 auto;line-height:1.6}.category-filter-bar{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:40px}.filter-chip{background:#ffffff;color:#4b5563;border:1px solid #e2e8f0;padding:10px 20px;border-radius:50px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 4px rgba(0,0,0,.02)}.filter-chip:hover{background:#f1f5f9;border-color:#cbd5e1;color:#1e293b}.filter-chip.active{background:#6366f1;color:#ffffff;border-color:#6366f1;box-shadow:0 4px 12px rgba(99,102,241,.25)}@media (max-width:768px){.blog-header-banner{padding:50px 15px}.blog-header-banner .banner-content h1{font-size:32px}.blog-header-banner .banner-content p{font-size:15px}}