:root { 
    --brand-primary: #00A676; 
    --brand-dark: #008c63; 
    --text-main: #1F2937; 
    --bg-light: #F9FAFB; 
    --white: #ffffff; 
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Segoe UI', system-ui, sans-serif; 
}

body { 
    color: var(--text-main); 
    background: var(--white); 
    line-height: 1.8; 
}

.blog-header { 
    background-size: cover;
    background-position: center;
    color: white; 
    padding: 120px 20px 80px; 
    text-align: center; 
}

.blog-header h1 { 
    font-size: 3rem; 
    max-width: 900px; 
    margin: 0 auto 20px; 
    line-height: 1.2; 
}

.article-container { 
    max-width: 800px; 
    margin: 0 auto; 
    padding: 60px 20px; 
}

h2 { 
    font-size: 2rem; 
    color: #111827; 
    margin-top: 40px; 
    margin-bottom: 20px; 
    border-left: 5px solid var(--brand-primary); 
    padding-left: 15px; 
}

h3 { 
    font-size: 1.5rem; 
    color: #374151; 
    margin-top: 30px; 
    margin-bottom: 15px; 
}

p { 
    margin-bottom: 20px; 
    font-size: 1.15rem; 
    color: #4b5563; 
}

.takeaways { 
    background: #ecfdf5; 
    border: 1px solid #d1fae5; 
    padding: 30px; 
    border-radius: 12px; 
    margin-bottom: 40px; 
}

.takeaways h3 { 
    margin-top: 0; 
    color: var(--brand-dark); 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}

.cta-inline { 
    background: #111827; 
    color: white; 
    padding: 40px; 
    text-align: center; 
    border-radius: 12px; 
    margin-top: 50px; 
}

.btn-cta { 
    display: inline-block; 
    background: var(--brand-primary); 
    color: white; 
    padding: 12px 30px; 
    text-decoration: none; 
    font-weight: 700; 
    border-radius: 6px; 
    margin-top: 20px; 
    transition: 0.3s; 
}

.btn-cta:hover { 
    background: var(--brand-dark); 
    transform: translateY(-2px); 
}

.warning-box { 
    border-left: 4px solid #ef4444; 
    background: #fef2f2; 
    padding: 20px; 
    margin: 20px 0; 
    border-radius: 0 8px 8px 0; 
}

.warning-box strong { 
    color: #b91c1c; 
}

/* Specific component styles */
.software-table, .benchmark-table { 
    width: 100%; 
    border-collapse: collapse; 
    margin: 30px 0; 
    font-size: 1rem; 
}

.software-table th, .benchmark-table th { 
    background: #f3f4f6; 
    padding: 12px; 
    text-align: left; 
    border: 1px solid #e5e7eb; 
}

.software-table td, .benchmark-table td { 
    padding: 12px; 
    border: 1px solid #e5e7eb; 
}