:root {
            --primary: #0f172a;
            --accent: #0ea5e9;
            --muted: #64748b;
            --bg: #f8fafc;
            --white: #ffffff;
            --border: #e2e8f0;
        }

        body { 
            margin: 0; 
            font-family: 'Inter', system-ui, -apple-system, sans-serif; 
            background: var(--bg); 
            color: var(--primary); 
            line-height: 1.8;
        }

        .container { max-width: 900px; margin: 0 auto; padding: 20px; }

        /* Header Area */
        header { padding: 60px 0; text-align: center; background: var(--white); border-bottom: 1px solid var(--border); }
        h1 { font-size: 36px; margin: 0; letter-spacing: -1px; }
        .meta { color: var(--muted); font-size: 14px; margin-top: 10px; }

        /* Article Body */
        article { background: var(--white); padding: 40px; border-radius: 24px; margin-top: -40px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
        h2 { font-size: 26px; margin-top: 40px; color: var(--accent); }

        /* IMAGE COMPARISON SECTION (Responsive) */
        .comparison-visual {
            margin: 40px 0;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            background: #f1f5f9;
            padding: 20px;
            border-radius: 16px;
        }

        .img-box { position: relative; text-align: center; background: #fff; padding: 15px; border-radius: 12px; border: 1px solid var(--border); }
        .img-box img { max-width: 100%; height: auto; border-radius: 8px; }
        .img-tag { display: block; margin-top: 10px; font-weight: 700; font-size: 14px; color: var(--primary); }
        .img-desc { font-size: 12px; color: var(--muted); line-height: 1.4; }

        @media (max-width: 650px) {
            .comparison-visual { grid-template-columns: 1fr; }
            h1 { font-size: 28px; }
        }

        /* Backlink CTA */
        .cta-box {
            background: linear-gradient(135deg, var(--accent), var(--brand-dark));
            color: white;
            padding: 30px;
            border-radius: 16px;
            text-align: center;
            margin: 40px 0;
        }
        .cta-box a { color: white; font-weight: 800; text-decoration: underline; font-size: 20px; }

        /* FAQ Style */
        .faq-item { border-bottom: 1px solid var(--border); padding: 15px 0; }
        summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
        summary::after { content: "→"; color: var(--accent); }
        .faq-ans { padding-top: 10px; color: var(--muted); }