wider layout: container 860→1200px, hero inner wider, card gap 24px

Author: imkemit-ops

ai-image-generators-2026.html

@@ -29,7 +29,7 @@
 ::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--accent2);border-radius:3px}
 a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent);opacity:.85}
 .site-logo:hover{text-decoration:none!important;opacity:1!important}
-.container{max-width:860px;margin:0 auto;padding:24px 16px}
+.container{max-width:1200px;margin:0 auto;padding:24px 24px}
 /* ── Fade-in ── */
 .fade-in{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}.fade-in.visible{opacity:1;transform:none}
 /* ── Header ── */
@@ -154,7 +154,7 @@
 .index-section-label{font-family:'Space Mono',monospace;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--text-dim);margin:48px 0 20px;display:flex;align-items:center;gap:10px}
 .index-section-label::before{content:'';display:block;width:24px;height:2px;background:var(--accent);flex-shrink:0}
 /* ── Article grid cards (index) ── */
-.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:16px}
+.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:24px}
 .article-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:all .25s;display:flex;flex-direction:column;text-decoration:none!important}
 .article-card:hover{border-color:rgba(0,229,255,.5);transform:translateY(-3px);box-shadow:0 0 20px rgba(0,229,255,.08);text-decoration:none!important}
 .article-card .card-img{height:170px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
@@ -212,7 +212,7 @@
 /* Floating dots */
 .cyber-dot{position:absolute;border-radius:50%;pointer-events:none;animation:dotFloat 4s ease-in-out infinite}
 @keyframes dotFloat{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(-12px);opacity:.7}}
-.index-hero-inner{position:relative;z-index:1;max-width:860px;padding:0 24px;width:100%}
+.index-hero-inner{position:relative;z-index:1;max-width:1200px;padding:0 24px;width:100%}
 .index-hero .est-tag{display:inline-block;font-family:'Space Mono',monospace;font-size:0.65rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--text-dim);border:1px solid var(--border);border-radius:20px;padding:5px 16px;margin-bottom:28px}
 .index-hero h1{font-family:system-ui,-apple-system,sans-serif;font-size:clamp(2.4em,5vw,3.8em);font-weight:800;color:#fff;line-height:1.1;letter-spacing:-0.03em;margin-bottom:20px;text-align:left}
 .index-hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55);background:none;-webkit-background-clip:unset;-webkit-text-fill-color:transparent}

ai-pricing-pages-guide.html

@@ -29,7 +29,7 @@
 ::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--accent2);border-radius:3px}
 a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent);opacity:.85}
 .site-logo:hover{text-decoration:none!important;opacity:1!important}
-.container{max-width:860px;margin:0 auto;padding:24px 16px}
+.container{max-width:1200px;margin:0 auto;padding:24px 24px}
 /* ── Fade-in ── */
 .fade-in{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}.fade-in.visible{opacity:1;transform:none}
 /* ── Header ── */
@@ -154,7 +154,7 @@
 .index-section-label{font-family:'Space Mono',monospace;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--text-dim);margin:48px 0 20px;display:flex;align-items:center;gap:10px}
 .index-section-label::before{content:'';display:block;width:24px;height:2px;background:var(--accent);flex-shrink:0}
 /* ── Article grid cards (index) ── */
-.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:16px}
+.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:24px}
 .article-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:all .25s;display:flex;flex-direction:column;text-decoration:none!important}
 .article-card:hover{border-color:rgba(0,229,255,.5);transform:translateY(-3px);box-shadow:0 0 20px rgba(0,229,255,.08);text-decoration:none!important}
 .article-card .card-img{height:170px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
@@ -212,7 +212,7 @@
 /* Floating dots */
 .cyber-dot{position:absolute;border-radius:50%;pointer-events:none;animation:dotFloat 4s ease-in-out infinite}
 @keyframes dotFloat{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(-12px);opacity:.7}}
-.index-hero-inner{position:relative;z-index:1;max-width:860px;padding:0 24px;width:100%}
+.index-hero-inner{position:relative;z-index:1;max-width:1200px;padding:0 24px;width:100%}
 .index-hero .est-tag{display:inline-block;font-family:'Space Mono',monospace;font-size:0.65rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--text-dim);border:1px solid var(--border);border-radius:20px;padding:5px 16px;margin-bottom:28px}
 .index-hero h1{font-family:system-ui,-apple-system,sans-serif;font-size:clamp(2.4em,5vw,3.8em);font-weight:800;color:#fff;line-height:1.1;letter-spacing:-0.03em;margin-bottom:20px;text-align:left}
 .index-hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55);background:none;-webkit-background-clip:unset;-webkit-text-fill-color:transparent}

ai-tools-market-2026-analysis.html

@@ -29,7 +29,7 @@
 ::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--accent2);border-radius:3px}
 a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent);opacity:.85}
 .site-logo:hover{text-decoration:none!important;opacity:1!important}
-.container{max-width:860px;margin:0 auto;padding:24px 16px}
+.container{max-width:1200px;margin:0 auto;padding:24px 24px}
 /* ── Fade-in ── */
 .fade-in{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}.fade-in.visible{opacity:1;transform:none}
 /* ── Header ── */
@@ -154,7 +154,7 @@
 .index-section-label{font-family:'Space Mono',monospace;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--text-dim);margin:48px 0 20px;display:flex;align-items:center;gap:10px}
 .index-section-label::before{content:'';display:block;width:24px;height:2px;background:var(--accent);flex-shrink:0}
 /* ── Article grid cards (index) ── */
-.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:16px}
+.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:24px}
 .article-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:all .25s;display:flex;flex-direction:column;text-decoration:none!important}
 .article-card:hover{border-color:rgba(0,229,255,.5);transform:translateY(-3px);box-shadow:0 0 20px rgba(0,229,255,.08);text-decoration:none!important}
 .article-card .card-img{height:170px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
@@ -212,7 +212,7 @@
 /* Floating dots */
 .cyber-dot{position:absolute;border-radius:50%;pointer-events:none;animation:dotFloat 4s ease-in-out infinite}
 @keyframes dotFloat{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(-12px);opacity:.7}}
-.index-hero-inner{position:relative;z-index:1;max-width:860px;padding:0 24px;width:100%}
+.index-hero-inner{position:relative;z-index:1;max-width:1200px;padding:0 24px;width:100%}
 .index-hero .est-tag{display:inline-block;font-family:'Space Mono',monospace;font-size:0.65rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--text-dim);border:1px solid var(--border);border-radius:20px;padding:5px 16px;margin-bottom:28px}
 .index-hero h1{font-family:system-ui,-apple-system,sans-serif;font-size:clamp(2.4em,5vw,3.8em);font-weight:800;color:#fff;line-height:1.1;letter-spacing:-0.03em;margin-bottom:20px;text-align:left}
 .index-hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55);background:none;-webkit-background-clip:unset;-webkit-text-fill-color:transparent}

best-email-marketing-2026.html

@@ -29,7 +29,7 @@
 ::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--accent2);border-radius:3px}
 a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent);opacity:.85}
 .site-logo:hover{text-decoration:none!important;opacity:1!important}
-.container{max-width:860px;margin:0 auto;padding:24px 16px}
+.container{max-width:1200px;margin:0 auto;padding:24px 24px}
 /* ── Fade-in ── */
 .fade-in{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}.fade-in.visible{opacity:1;transform:none}
 /* ── Header ── */
@@ -154,7 +154,7 @@
 .index-section-label{font-family:'Space Mono',monospace;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--text-dim);margin:48px 0 20px;display:flex;align-items:center;gap:10px}
 .index-section-label::before{content:'';display:block;width:24px;height:2px;background:var(--accent);flex-shrink:0}
 /* ── Article grid cards (index) ── */
-.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:16px}
+.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:24px}
 .article-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:all .25s;display:flex;flex-direction:column;text-decoration:none!important}
 .article-card:hover{border-color:rgba(0,229,255,.5);transform:translateY(-3px);box-shadow:0 0 20px rgba(0,229,255,.08);text-decoration:none!important}
 .article-card .card-img{height:170px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
@@ -212,7 +212,7 @@
 /* Floating dots */
 .cyber-dot{position:absolute;border-radius:50%;pointer-events:none;animation:dotFloat 4s ease-in-out infinite}
 @keyframes dotFloat{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(-12px);opacity:.7}}
-.index-hero-inner{position:relative;z-index:1;max-width:860px;padding:0 24px;width:100%}
+.index-hero-inner{position:relative;z-index:1;max-width:1200px;padding:0 24px;width:100%}
 .index-hero .est-tag{display:inline-block;font-family:'Space Mono',monospace;font-size:0.65rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--text-dim);border:1px solid var(--border);border-radius:20px;padding:5px 16px;margin-bottom:28px}
 .index-hero h1{font-family:system-ui,-apple-system,sans-serif;font-size:clamp(2.4em,5vw,3.8em);font-weight:800;color:#fff;line-height:1.1;letter-spacing:-0.03em;margin-bottom:20px;text-align:left}
 .index-hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55);background:none;-webkit-background-clip:unset;-webkit-text-fill-color:transparent}

best-free-ai-coding.html

@@ -29,7 +29,7 @@
 ::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--accent2);border-radius:3px}
 a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent);opacity:.85}
 .site-logo:hover{text-decoration:none!important;opacity:1!important}
-.container{max-width:860px;margin:0 auto;padding:24px 16px}
+.container{max-width:1200px;margin:0 auto;padding:24px 24px}
 /* ── Fade-in ── */
 .fade-in{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}.fade-in.visible{opacity:1;transform:none}
 /* ── Header ── */
@@ -154,7 +154,7 @@
 .index-section-label{font-family:'Space Mono',monospace;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--text-dim);margin:48px 0 20px;display:flex;align-items:center;gap:10px}
 .index-section-label::before{content:'';display:block;width:24px;height:2px;background:var(--accent);flex-shrink:0}
 /* ── Article grid cards (index) ── */
-.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:16px}
+.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:24px}
 .article-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:all .25s;display:flex;flex-direction:column;text-decoration:none!important}
 .article-card:hover{border-color:rgba(0,229,255,.5);transform:translateY(-3px);box-shadow:0 0 20px rgba(0,229,255,.08);text-decoration:none!important}
 .article-card .card-img{height:170px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
@@ -212,7 +212,7 @@
 /* Floating dots */
 .cyber-dot{position:absolute;border-radius:50%;pointer-events:none;animation:dotFloat 4s ease-in-out infinite}
 @keyframes dotFloat{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(-12px);opacity:.7}}
-.index-hero-inner{position:relative;z-index:1;max-width:860px;padding:0 24px;width:100%}
+.index-hero-inner{position:relative;z-index:1;max-width:1200px;padding:0 24px;width:100%}
 .index-hero .est-tag{display:inline-block;font-family:'Space Mono',monospace;font-size:0.65rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--text-dim);border:1px solid var(--border);border-radius:20px;padding:5px 16px;margin-bottom:28px}
 .index-hero h1{font-family:system-ui,-apple-system,sans-serif;font-size:clamp(2.4em,5vw,3.8em);font-weight:800;color:#fff;line-height:1.1;letter-spacing:-0.03em;margin-bottom:20px;text-align:left}
 .index-hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55);background:none;-webkit-background-clip:unset;-webkit-text-fill-color:transparent}

best-free-llm.html

@@ -29,7 +29,7 @@
 ::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--accent2);border-radius:3px}
 a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent);opacity:.85}
 .site-logo:hover{text-decoration:none!important;opacity:1!important}
-.container{max-width:860px;margin:0 auto;padding:24px 16px}
+.container{max-width:1200px;margin:0 auto;padding:24px 24px}
 /* ── Fade-in ── */
 .fade-in{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}.fade-in.visible{opacity:1;transform:none}
 /* ── Header ── */
@@ -154,7 +154,7 @@
 .index-section-label{font-family:'Space Mono',monospace;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--text-dim);margin:48px 0 20px;display:flex;align-items:center;gap:10px}
 .index-section-label::before{content:'';display:block;width:24px;height:2px;background:var(--accent);flex-shrink:0}
 /* ── Article grid cards (index) ── */
-.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:16px}
+.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:24px}
 .article-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:all .25s;display:flex;flex-direction:column;text-decoration:none!important}
 .article-card:hover{border-color:rgba(0,229,255,.5);transform:translateY(-3px);box-shadow:0 0 20px rgba(0,229,255,.08);text-decoration:none!important}
 .article-card .card-img{height:170px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
@@ -212,7 +212,7 @@
 /* Floating dots */
 .cyber-dot{position:absolute;border-radius:50%;pointer-events:none;animation:dotFloat 4s ease-in-out infinite}
 @keyframes dotFloat{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(-12px);opacity:.7}}
-.index-hero-inner{position:relative;z-index:1;max-width:860px;padding:0 24px;width:100%}
+.index-hero-inner{position:relative;z-index:1;max-width:1200px;padding:0 24px;width:100%}
 .index-hero .est-tag{display:inline-block;font-family:'Space Mono',monospace;font-size:0.65rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--text-dim);border:1px solid var(--border);border-radius:20px;padding:5px 16px;margin-bottom:28px}
 .index-hero h1{font-family:system-ui,-apple-system,sans-serif;font-size:clamp(2.4em,5vw,3.8em);font-weight:800;color:#fff;line-height:1.1;letter-spacing:-0.03em;margin-bottom:20px;text-align:left}
 .index-hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55);background:none;-webkit-background-clip:unset;-webkit-text-fill-color:transparent}

best-free-project-management.html

@@ -29,7 +29,7 @@
 ::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--accent2);border-radius:3px}
 a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent);opacity:.85}
 .site-logo:hover{text-decoration:none!important;opacity:1!important}
-.container{max-width:860px;margin:0 auto;padding:24px 16px}
+.container{max-width:1200px;margin:0 auto;padding:24px 24px}
 /* ── Fade-in ── */
 .fade-in{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}.fade-in.visible{opacity:1;transform:none}
 /* ── Header ── */
@@ -154,7 +154,7 @@
 .index-section-label{font-family:'Space Mono',monospace;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--text-dim);margin:48px 0 20px;display:flex;align-items:center;gap:10px}
 .index-section-label::before{content:'';display:block;width:24px;height:2px;background:var(--accent);flex-shrink:0}
 /* ── Article grid cards (index) ── */
-.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:16px}
+.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:24px}
 .article-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:all .25s;display:flex;flex-direction:column;text-decoration:none!important}
 .article-card:hover{border-color:rgba(0,229,255,.5);transform:translateY(-3px);box-shadow:0 0 20px rgba(0,229,255,.08);text-decoration:none!important}
 .article-card .card-img{height:170px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
@@ -212,7 +212,7 @@
 /* Floating dots */
 .cyber-dot{position:absolute;border-radius:50%;pointer-events:none;animation:dotFloat 4s ease-in-out infinite}
 @keyframes dotFloat{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(-12px);opacity:.7}}
-.index-hero-inner{position:relative;z-index:1;max-width:860px;padding:0 24px;width:100%}
+.index-hero-inner{position:relative;z-index:1;max-width:1200px;padding:0 24px;width:100%}
 .index-hero .est-tag{display:inline-block;font-family:'Space Mono',monospace;font-size:0.65rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--text-dim);border:1px solid var(--border);border-radius:20px;padding:5px 16px;margin-bottom:28px}
 .index-hero h1{font-family:system-ui,-apple-system,sans-serif;font-size:clamp(2.4em,5vw,3.8em);font-weight:800;color:#fff;line-height:1.1;letter-spacing:-0.03em;margin-bottom:20px;text-align:left}
 .index-hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55);background:none;-webkit-background-clip:unset;-webkit-text-fill-color:transparent}