.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:30px}.blog-card{background:var(--surface-card);border:1px solid var(--border-color);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;transition:transform .4s var(--easing),border-color .4s var(--easing),box-shadow .4s var(--easing)}.blog-card:hover{border-color:rgba(0,136,255,.35);transform:translateY(-6px);box-shadow:0 15px 30px rgba(0,136,255,.08)}.blog-img-holder{height:200px;background:#111115;overflow:hidden}.blog-img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--easing)}.blog-card:hover .blog-img{transform:scale(1.05)}.blog-info{padding:30px;display:flex;flex-direction:column;flex-grow:1}.blog-meta-top{display:flex;gap:15px;font-size:.75rem;color:var(--text-muted);margin-bottom:15px}.blog-tag{font-weight:700;text-transform:uppercase;color:var(--text-main)}.blog-info h3{font-size:1.25rem;font-weight:600;margin-bottom:12px;line-height:1.4}.blog-info p{color:var(--text-muted);font-size:.9rem;line-height:1.5;margin-bottom:20px;flex-grow:1}.blog-readmore{font-size:.85rem;font-weight:700;display:flex;align-items:center;gap:5px}.filter-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;flex-wrap:wrap;gap:20px}.filter-tabs{display:flex;gap:10px;flex-wrap:wrap}.tab-btn{background:rgba(255,255,255,.02);border:1px solid var(--border-color);color:var(--text-muted);padding:8px 20px;border-radius:30px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .3s var(--easing);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.tab-btn:hover{color:var(--text-main);border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.05)}.tab-btn.active{background:var(--text-main);color:var(--bg-color);border-color:var(--text-main);box-shadow:0 8px 20px rgba(255,255,255,.1)}[data-theme=light] .tab-btn{background:rgba(0,0,0,.02);color:var(--text-muted)}[data-theme=light] .tab-btn:hover{border-color:rgba(0,0,0,.2);background:rgba(0,0,0,.05)}.article-container{max-width:800px;margin:120px auto 80px;padding:0 24px}.article-header{margin-bottom:40px;border-bottom:1px solid var(--border-color);padding-bottom:30px}.article-header h1{font-size:clamp(1.8rem, 5vw, 2.8rem);font-weight:700;letter-spacing:-1px;line-height:1.2;margin-bottom:20px}.article-meta{display:flex;gap:20px;color:var(--text-muted);font-size:.9rem;flex-wrap:wrap}.article-hero-img{width:100%;height:400px;object-fit:cover;border-radius:12px;margin-bottom:40px;border:1px solid var(--border-color)}.article-content{font-size:1.1rem;line-height:1.8}.article-content p{margin-bottom:25px;color:var(--text-muted)}.article-content h2,.article-content h3{color:var(--text-main);margin:40px 0 20px;font-weight:700;letter-spacing:-.5px}.article-content h2{font-size:clamp(1.4rem, 4vw, 1.8rem)}.article-content h3{font-size:clamp(1.2rem, 3vw, 1.4rem)}.article-content ol,.article-content ul{margin:0 0 25px 25px;color:var(--text-muted)}.article-content li{margin-bottom:10px}.article-callout{background:var(--surface-card);border-left:4px solid var(--text-main);padding:30px;border-radius:0 8px 8px 0;margin:40px 0}.article-callout p{margin-bottom:15px;color:var(--text-main);font-weight:500}.article-callout p:last-child{margin-bottom:0}.article-callout a{color:var(--text-main);text-decoration:underline;font-weight:700}@media (max-width:768px){.filter-container{flex-direction:column;align-items:flex-start}.filter-tabs{display:flex;gap:8px;overflow-x:auto;flex-wrap:nowrap;width:100%;padding-bottom:5px;-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none}.filter-tabs::-webkit-scrollbar{display:none}.tab-btn{flex-shrink:0;white-space:nowrap;text-align:center;padding:8px 16px;font-size:.8rem}.filter-container div{width:100%!important;max-width:100%!important}.blog-info{padding:20px}.article-container{margin-top:100px;margin-bottom:60px}.article-header{margin-bottom:30px;padding-bottom:20px}.article-hero-img{height:250px;margin-bottom:30px}.article-callout{padding:20px;margin:30px 0}}@media (max-width:480px){.blog-img-holder{height:180px}.article-meta{gap:10px;font-size:.8rem}.article-content{font-size:1rem}}