diff --git a/index.html b/index.html
index 11e32c0..3fb1db8 100644
--- a/index.html
+++ b/index.html
@@ -1109,7 +1109,7 @@
         }
         .blog-grid {
             display: grid;
-            grid-template-columns: 1fr 1fr;
+            grid-template-columns: 1fr 1fr 1fr;
             gap: 20px;
             margin-bottom: 32px;
         }
@@ -1129,16 +1129,20 @@
         }
         .blog-card-area {
             display: inline-block;
-            background: rgba(0,245,255,0.08);
-            color: var(--accent);
             font-size: 0.7rem;
-            padding: 2px 10px;
-            border-radius: 20px;
+            font-weight: 700;
             text-transform: uppercase;
-            letter-spacing: 0.5px;
+            letter-spacing: 0.06em;
+            padding: 3px 12px;
+            border-radius: 20px;
             margin-bottom: 12px;
             align-self: flex-start;
+            color: #000;
         }
+        .blog-card-area.area-howto { background: #00f5ff; }
+        .blog-card-area.area-news { background: #ffaa00; }
+        .blog-card-area.area-video-scripts { background: #00ff88; }
+        .blog-card-area.area-default { background: #a78bfa; }
         .blog-card-date {
             font-size: 0.8rem;
             color: var(--text-muted);
@@ -1202,7 +1206,12 @@
             color: var(--text-muted);
             font-size: 0.95rem;
         }
-        @media (max-width: 700px) {
+        @media (max-width: 900px) {
+            .blog-grid {
+                grid-template-columns: 1fr 1fr;
+            }
+        }
+        @media (max-width: 600px) {
             .blog-grid {
                 grid-template-columns: 1fr;
             }
@@ -2871,7 +2880,7 @@
         document.getElementById('pricing-coupon').addEventListener('input', updateCouponBadges);
 
         /* ── Blog ──────────────────────────────────────────────── */
-        const BLOG_POSTS_PER_PAGE = 4;
+        const BLOG_POSTS_PER_PAGE = 6;
         let blogAllPosts = [];
         let blogFilteredPosts = [];
         let blogCurrentPage = 0;
@@ -2882,6 +2891,11 @@
             return months[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear();
         }
 
+        function blogAreaClass(area) {
+            var map = { 'howto': 'area-howto', 'news': 'area-news', 'video-scripts': 'area-video-scripts' };
+            return map[area] || 'area-default';
+        }
+
         function blogRender() {
             const start = blogCurrentPage * BLOG_POSTS_PER_PAGE;
             const pagePosts = blogFilteredPosts.slice(start, start + BLOG_POSTS_PER_PAGE);
@@ -2898,7 +2912,7 @@
 
             grid.innerHTML = pagePosts.map(function(p) {
                 return '<a href="' + p.link + '" class="blog-card" style="text-decoration:none">' +
-                    '<span class="blog-card-area">' + p.area + '</span>' +
+                    '<span class="blog-card-area ' + blogAreaClass(p.area) + '">' + p.area + '</span>' +
                     '<span class="blog-card-date">' + blogFormatDate(p.date) + '</span>' +
                     '<h3>' + p.headline + '</h3>' +
                     '<p>' + p.teaser + '</p>' +