:root {
  --brand: #6C3EF4;
  --brand-dark: #5429E0;
  --brand-light: #EEE9FF;
  --accent: #FF5C5C;
  --text-1: #0F0A1E;
  --text-2: #3D3558;
  --text-3: #7B72A0;
  --border: #E8E2F8;
  --bg: #FAFBFF;
  --white: #FFFFFF;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text-1); line-height: 1.6; }

/* NAV */
nav { background: var(--white); border-bottom: 1px solid var(--border); padding: 0 24px; position: sticky; top: 0; z-index: 100; }
.nav-inner { max-width: 1100px; margin: 0 auto; height: 60px; display: flex; align-items: center; justify-content: space-between; }
.nav-logo { font-family: 'DM Serif Display', serif; font-size: 1.45rem; font-weight: 700; color: #1a0a00; text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
.nav-logo span { color: #C0392B; }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a { color: var(--text-2); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color 0.2s; }
.nav-links a:hover { color: var(--brand); }
.nav-cta { background: var(--brand); color: var(--white) !important; padding: 8px 18px; border-radius: 8px; font-weight: 600 !important; }
.nav-cta:hover { background: var(--brand-dark) !important; }

/* HERO */
.article-hero { padding: 60px 24px 52px; }
.article-hero.v-purple { background: linear-gradient(135deg, #1A0A3C 0%, #3D1F8C 60%, #6C3EF4 100%); }
.article-hero.v-blue { background: linear-gradient(135deg, #0C1A3C, #1D4ED8); }
.article-hero.v-dark { background: linear-gradient(135deg, #1A1A1A, #374151); }
.article-hero.v-green { background: linear-gradient(135deg, #0C2A1A, #059669); }
.article-hero.v-violet { background: linear-gradient(135deg, #1A0C2A, #7C3AED); }
.article-hero.v-red { background: linear-gradient(135deg, #1A0A0A, #DC2626); }
.article-hero.v-teal { background: linear-gradient(135deg, #0A1A1A, #0D9488); }
.article-hero-inner { max-width: 780px; margin: 0 auto; }
.back-link { display: inline-block; color: rgba(255,255,255,0.6); font-size: 0.85rem; text-decoration: none; margin-bottom: 20px; transition: color 0.2s; }
.back-link:hover { color: #fff; }
.article-cat { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; margin-bottom: 16px; }
.article-cat.comparison { color: #D97706; background: rgba(217,119,6,0.15); }
.article-cat.guide { color: #34D399; background: rgba(52,211,153,0.15); }
.article-cat.industry { color: #F472B6; background: rgba(244,114,182,0.15); }
.article-hero h1 { font-family: 'Sora', sans-serif; font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 16px; }
.article-sub { color: rgba(255,255,255,0.75); font-size: 1.05rem; line-height: 1.65; margin-bottom: 20px; max-width: 680px; }
.article-meta-row { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.5); font-size: 0.82rem; }

/* ARTICLE BODY */
.article-body { max-width: 780px; margin: 0 auto; padding: 52px 24px 72px; }
.article-body h2 { font-family: 'Sora', sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--text-1); margin: 44px 0 16px; line-height: 1.25; }
.article-body h2:first-child { margin-top: 0; }
.article-body p { color: var(--text-2); font-size: 1rem; line-height: 1.75; margin-bottom: 18px; }
.article-body ul, .article-body ol { color: var(--text-2); font-size: 1rem; line-height: 1.75; margin-bottom: 18px; padding-left: 22px; }
.article-body li { margin-bottom: 8px; }
.article-body strong { color: var(--text-1); font-weight: 600; }
.article-body code { background: var(--brand-light); color: var(--brand); padding: 2px 7px; border-radius: 4px; font-size: 0.9em; }

/* VERDICT BOX */
.verdict-box { background: var(--brand-light); border-left: 4px solid var(--brand); border-radius: 0 12px 12px 0; padding: 20px 24px; margin-bottom: 36px; }
.verdict-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); margin-bottom: 8px; }
.verdict-box p { margin: 0; font-size: 0.97rem; color: var(--text-2); }

/* TABLE */
.compare-table { width: 100%; border-collapse: collapse; margin: 24px 0 32px; font-size: 0.92rem; }
.compare-table thead tr { background: var(--text-1); }
.compare-table thead th { color: #fff; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 0.82rem; padding: 12px 16px; text-align: left; }
.compare-table thead th:first-child { border-radius: 8px 0 0 0; }
.compare-table thead th:last-child { border-radius: 0 8px 0 0; }
.compare-table tbody tr { border-bottom: 1px solid var(--border); }
.compare-table tbody tr:nth-child(even) { background: #F8F6FF; }
.compare-table tbody td { padding: 11px 16px; color: var(--text-2); vertical-align: top; }
.compare-table tbody td:first-child { font-weight: 500; color: var(--text-1); }

/* HIGHLIGHT BOX */
.highlight-box { background: #FFF7ED; border: 1px solid #FED7AA; border-radius: 12px; padding: 20px 24px; margin: 28px 0; }
.highlight-box p { margin: 0; color: #92400E; font-size: 0.95rem; }
.highlight-box strong { color: #78350F; }

/* WARNING BOX */
.warning-box { background: #FEF2F2; border: 1px solid #FECACA; border-radius: 12px; padding: 20px 24px; margin: 28px 0; }
.warning-box p { margin: 0; color: #991B1B; font-size: 0.95rem; }

/* INLINE CTA */
.cta-inline { background: linear-gradient(135deg, #1A0A3C, #6C3EF4); border-radius: 16px; padding: 36px 40px; text-align: center; margin-top: 52px; }
.cta-inline h3 { font-family: 'Sora', sans-serif; font-size: 1.5rem; font-weight: 800; color: #fff; margin-bottom: 10px; }
.cta-inline p { color: rgba(255,255,255,0.75); margin-bottom: 22px; font-size: 0.97rem; }
.cta-btn { display: inline-block; background: #fff; color: var(--brand); font-family: 'Sora', sans-serif; font-weight: 700; font-size: 0.95rem; padding: 13px 28px; border-radius: 9px; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; }
.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }

/* RELATED */
.related-posts { background: var(--white); border-top: 1px solid var(--border); padding: 52px 24px; }
.related-inner { max-width: 1100px; margin: 0 auto; }
.section-label { font-family: 'Sora', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); margin-bottom: 24px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.related-card { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 22px; text-decoration: none; color: inherit; transition: box-shadow 0.2s, transform 0.2s; display: block; }
.related-card:hover { box-shadow: 0 6px 24px rgba(108,62,244,0.12); transform: translateY(-2px); }
.related-card h4 { font-family: 'Sora', sans-serif; font-size: 0.97rem; font-weight: 700; color: var(--text-1); margin: 10px 0 8px; }
.related-card p { font-size: 0.84rem; color: var(--text-2); line-height: 1.55; }

/* FOOTER */
footer { background: var(--text-1); color: rgba(255,255,255,0.5); text-align: center; padding: 28px 24px; font-size: 0.83rem; }
footer a { color: rgba(255,255,255,0.7); text-decoration: none; margin: 0 10px; }
footer a:hover { color: #fff; }

@media (max-width: 768px) {
  .nav-links { display: none; }
  .related-grid { grid-template-columns: 1fr; }
  .cta-inline { padding: 28px 20px; }
  .compare-table { font-size: 0.82rem; }
  .compare-table thead th, .compare-table tbody td { padding: 9px 10px; }
}