/* Strategy Arena page CSS. Extracted for cacheable delivery. */
.x-share-btn {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 10px 22px; background: #000; color: #fff;
        border: 1px solid #333; border-radius: 10px;
        font-family: 'Rajdhani', 'Segoe UI', sans-serif;
        font-weight: 700; font-size: 0.95rem;
        cursor: pointer; text-decoration: none;
        transition: all 0.3s;
    }
    .x-share-btn:hover {
        background: #1a1a1a; border-color: #555;
        transform: translateY(-2px);
        box-shadow: 0 5px 20px rgba(255,255,255,0.1);
    }
    .x-share-row {
        display: flex; justify-content: center; gap: 12px;
        flex-wrap: wrap; margin: 20px 0;
    }

:root {
            --bg-primary: #0a0a15;
            --bg-secondary: #12122a;
            --bg-card: #1a1a3e;
            --text-primary: #ffffff;
            --text-secondary: #8888aa;
            --cyan: #06b6d4;
            --purple: #8b5cf6;
        }
        /* CTA Blocks */
        .blog-ctas{display:flex;flex-direction:column;gap:12px;margin:40px 0 20px}
        .blog-cta{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:14px;text-decoration:none;transition:all .3s;cursor:pointer}
        .blog-cta:hover{transform:translateX(6px)}
        .cta-fear{background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.2)}
        .cta-fear:hover{border-color:rgba(239,68,68,.5)}
        .cta-genie{background:rgba(139,92,246,.06);border:1px solid rgba(139,92,246,.2)}
        .cta-genie:hover{border-color:rgba(139,92,246,.5)}
        .cta-dashboard{background:rgba(247,147,26,.06);border:1px solid rgba(247,147,26,.2)}
        .cta-dashboard:hover{border-color:rgba(247,147,26,.5)}
        .cta-icon{font-size:2em;flex-shrink:0}
        .cta-body{flex:1}
        .cta-title{font-family:'Orbitron',sans-serif;font-size:.85em;color:#e2e8f0;margin-bottom:4px;letter-spacing:.5px}
        .cta-fear .cta-title{color:#ef4444}
        .cta-genie .cta-title{color:#8b5cf6}
        .cta-dashboard .cta-title{color:#f7931a}
        .cta-desc{font-size:.8em;color:#94a3b8;line-height:1.4}
        .cta-arrow{font-size:1.5em;color:#64748b;flex-shrink:0}
        @media(max-width:600px){.blog-cta{padding:14px 16px;gap:12px}.cta-icon{font-size:1.5em}}
        * { margin:0; padding:0; box-sizing:border-box; }
        body {
            font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
            background: var(--bg-primary);
            background-image:
                radial-gradient(ellipse at top, rgba(6,182,212,0.08) 0%, transparent 50%),
                radial-gradient(ellipse at bottom, rgba(139,92,246,0.08) 0%, transparent 50%);
            color: var(--text-primary);
            min-height: 100vh;
        }
        .blog-layout {
            max-width:1100px; margin:0 auto; padding:20px;
            display:grid; grid-template-columns:1fr 300px; gap:40px;
        }
        .blog-main { min-width:0; }
        .blog-header { margin-bottom:30px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,0.06); }
        .blog-back { color:var(--cyan); text-decoration:none; font-size:0.85em; font-weight:600; display:inline-block; margin-bottom:16px; }
        .blog-back:hover { text-decoration:underline; }
        .blog-header h1 {
            font-size:2.2em; font-weight:700; line-height:1.2; margin-bottom:12px;
            background:linear-gradient(135deg, var(--cyan), var(--purple));
            -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
        }
        .blog-meta { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
        .blog-meta-item { color:var(--text-secondary); font-size:0.85em; font-weight:600; }
        .blog-meta-item span { color:var(--cyan); }
        .blog-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
        .blog-tag {
            background:rgba(6,182,212,0.1); color:var(--cyan); font-size:0.72em;
            padding:3px 10px; border-radius:20px; font-weight:600;
        }
        /* Article content styling */
        .blog-content { line-height:1.8; font-size:1.02em; }
        .blog-content h2 {
            font-size:1.6em; margin:32px 0 14px; color:#fff; font-weight:700;
            padding-bottom:8px; border-bottom:1px solid rgba(6,182,212,0.2);
        }
        .blog-content h3 { font-size:1.25em; margin:24px 0 10px; color:var(--cyan); font-weight:600; }
        .blog-content p { margin-bottom:16px; color:#ccc; }
        .blog-content ul, .blog-content ol { margin:0 0 16px 24px; color:#ccc; }
        .blog-content li { margin-bottom:6px; }
        .blog-content strong { color:#fff; }
        .blog-content a { color:var(--cyan); text-decoration:underline; }
        .blog-content blockquote {
            border-left:3px solid var(--cyan); padding:12px 20px; margin:20px 0;
            background:rgba(6,182,212,0.05); border-radius:0 8px 8px 0; color:#aaa;
        }
        .blog-content code {
            background:rgba(139,92,246,0.15); padding:2px 6px; border-radius:4px;
            font-family:'Fira Code',monospace; font-size:0.88em; color:var(--purple);
        }
        .blog-content pre {
            background:var(--bg-secondary); border:1px solid rgba(255,255,255,0.06);
            border-radius:10px; padding:16px; overflow-x:auto; margin:16px 0;
        }
        .blog-content pre code { background:none; padding:0; color:#ccc; }
        /* Sidebar */
        .blog-sidebar { position:sticky; top:20px; align-self:start; }
        .sidebar-card {
            background:var(--bg-card); border:1px solid rgba(255,255,255,0.06);
            border-radius:14px; padding:22px; margin-bottom:20px;
        }
        .sidebar-card h3 { font-size:1em; color:var(--cyan); margin-bottom:14px; font-weight:700; }
        .sidebar-link {
            display:block; color:var(--text-secondary); text-decoration:none;
            font-size:0.85em; padding:6px 0; border-bottom:1px solid rgba(255,255,255,0.04);
            font-weight:600;
        }
        .sidebar-link:hover { color:var(--cyan); }
        .sidebar-cta {
            display:block; text-align:center; background:linear-gradient(135deg, var(--purple), var(--cyan));
            color:#fff; text-decoration:none; padding:12px; border-radius:10px;
            font-weight:700; font-size:0.95em; margin-top:14px;
        }
        .sidebar-cta:hover { opacity:0.9; }
        @media(max-width:768px) {
            .blog-layout { grid-template-columns:1fr; }
            .blog-header h1 { font-size:1.6em; }
            .blog-sidebar { position:static; }
        }