:root {
            --primary: #1a1a1a;
            --accent: #b8924a;
            --bg-soft: #f8f9fa;
            --text: #333;
            --border: #e1e1e1;
        }

        body { font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height: 1.8; color: var(--text); margin: 0; padding: 0; background: #fff; }
        .container { max-width: 900px; margin: 0 auto; padding: 0 20px; }
        
        /* Hero Section */
        .hero { background: linear-gradient(135deg, #1a1a1a 0%, #333 100%); color: white; padding: 80px 0; text-align: center; }
        .hero h1 { font-size: 2.8rem; margin: 0; line-height: 1.2; letter-spacing: -1px; }
        .hero p { font-size: 1.2rem; color: #ccc; margin-top: 20px; }

        /* Article Content */
        .main-content { padding: 60px 0; }
        .badge { display: inline-block; background: var(--accent); color: white; padding: 5px 15px; border-radius: 50px; font-size: 0.8rem; font-weight: bold; margin-bottom: 20px; }
        
        h2 { font-size: 2rem; color: var(--primary); margin-top: 50px; border-left: 5px solid var(--accent); padding-left: 20px; }
        p { margin-bottom: 25px; font-size: 1.1rem; }

        .feature-box { background: var(--bg-soft); border-radius: 15px; padding: 30px; margin: 40px 0; border: 1px solid var(--border); }
        .feature-box h3 { color: var(--accent); margin-top: 0; font-size: 1.4rem; }
        .feature-box ul { padding-left: 20px; }
        .feature-box li { margin-bottom: 10px; }

        /* FAQ */
        .faq-section { background: #fdfbf7; padding: 60px 0; border-top: 1px solid var(--border); }
        .faq-item { margin-bottom: 30px; border-bottom: 1px solid #eee; padding-bottom: 20px; }
        .faq-q { font-weight: bold; color: var(--primary); font-size: 1.2rem; margin-bottom: 10px; display: block; }
        .faq-a { color: #555; font-size: 1.05rem; }

        /* CTA */
        .cta-footer { background: var(--bg-soft); padding: 60px; text-align: center; border-radius: 20px; margin: 60px 0; }
        .btn-gold { background: var(--accent); color: white; padding: 18px 40px; border-radius: 5px; text-decoration: none; font-weight: bold; font-size: 1.1rem; display: inline-block; transition: 0.3s; }
        .btn-gold:hover { background: var(--primary); transform: translateY(-3px); }

        footer { text-align: center; padding: 40px; color: #999; font-size: 0.9rem; }
        
        @media (max-width: 768px) { .hero h1 { font-size: 2rem; } }