@keyframes skeleton-shimmer{0%{background-position:-600px 0}to{background-position:600px 0}}.blog-page{min-height:100vh;padding:80px 0}.blog-container{max-width:1280px;margin:0 auto;padding:0 24px}.blog-header{text-align:center;margin-bottom:48px}.blog-title{font-size:clamp(40px,5vw,56px);font-weight:700;color:#fff;margin-bottom:16px;letter-spacing:-.02em}.blog-subtitle{font-size:18px;color:hsla(0,0%,100%,.6);max-width:600px;margin:0 auto}.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));grid-gap:32px;gap:32px}.blog-empty{text-align:center;padding:80px 0;color:hsla(0,0%,100%,.5);font-size:16px}.category-filter{margin-bottom:48px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.category-filter::-webkit-scrollbar{display:none}.category-filter-list{display:flex;align-items:center;gap:8px;list-style:none;margin:0;padding:0;min-width:max-content}.category-filter-item{padding:10px 20px;border-radius:9999px;background:hsla(0,0%,100%,.03);border:1px solid hsla(0,0%,100%,.08);color:hsla(0,0%,100%,.7);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.category-filter-item:hover{background:hsla(0,0%,100%,.05);border-color:hsla(0,0%,100%,.1);color:#fff}.category-filter-item.active{background:rgba(139,92,246,.15);border-color:rgba(139,92,246,.4);color:#a78bfa}.blog-card{border-radius:24px;overflow:hidden;background:hsla(0,0%,100%,.02);border:1px solid hsla(0,0%,100%,.06);transition:all .3s ease}.blog-card:hover{border-color:rgba(139,92,246,.2);transform:translateY(-4px);box-shadow:0 20px 40px -15px rgba(0,0,0,.5)}.blog-card:hover .blog-card-image{transform:scale(1.05)}.blog-card:hover .blog-card-image-overlay{opacity:.3}.blog-card-link{display:block;text-decoration:none;color:inherit}.blog-card-image-wrapper{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#18181b}.blog-card-image{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.blog-card-image-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(139,92,246,.1),rgba(217,70,239,.1));opacity:0;transition:opacity .3s ease}.blog-card-content{padding:24px}.blog-card-meta{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:13px;color:hsla(0,0%,100%,.5)}.blog-card-category{color:#a78bfa;font-weight:500}.blog-card-dot{color:hsla(0,0%,100%,.4)}.blog-card-title{font-size:18px;font-weight:600;color:#fff;line-height:1.4;margin-bottom:12px}.blog-card-excerpt,.blog-card-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.blog-card-excerpt{font-size:14px;color:hsla(0,0%,100%,.7);line-height:1.6;margin-bottom:16px}.blog-card-footer{display:flex;align-items:center;justify-content:space-between}.blog-card-read-time{font-size:13px;color:hsla(0,0%,100%,.4)}.blog-card--skeleton{pointer-events:none}.blog-card--skeleton .blog-card-image-wrapper,.skeleton-line{background:hsla(0,0%,100%,.06);background-image:linear-gradient(90deg,hsla(0,0%,100%,.04) 25%,hsla(0,0%,100%,.08) 50%,hsla(0,0%,100%,.04) 75%);background-size:1200px 100%;animation:skeleton-shimmer 1.4s linear infinite}.skeleton-line{height:14px;border-radius:4px;margin-bottom:10px;width:100%}.skeleton-line--short{width:40%}.skeleton-line--shorter{width:25%}.blog-load-more{display:flex;justify-content:center;margin-top:48px}.blog-load-more-btn{padding:12px 36px;border-radius:9999px;background:transparent;border:1px solid hsla(0,0%,100%,.1);color:hsla(0,0%,100%,.7);font-size:15px;font-weight:500;cursor:pointer;transition:all .2s ease}.blog-load-more-btn:hover:not(:disabled){background:hsla(0,0%,100%,.05);border-color:rgba(139,92,246,.2);color:#a78bfa}.blog-load-more-btn:disabled{opacity:.5;cursor:default}@media(max-width:768px){.blog-page{padding:60px 0}.blog-grid{grid-template-columns:1fr;gap:24px}.category-filter{margin-bottom:32px;margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px}.category-filter-item{padding:8px 16px;font-size:13px}}@media(max-width:640px){.blog-card{border-radius:16px}.blog-card-content{padding:16px}.blog-card-title{font-size:16px}}