:root {
  --bg: #0f172a;
  --surface: #1e293b;
  --surface-hover: #273449;
  --border: #334155;
  --text: #e2e8f0;
  --text-secondary: #94a3b8;
  --accent: #22c55e;
  --accent-hover: #4ade80;
  --star: #f59e0b;
  --radius: 8px;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  min-height: 100vh;
}

/* Nav */
.nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 24px; height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top:0; z-index:100;
}
.nav-logo { font-size:1.25rem; font-weight:700; color:var(--text); text-decoration:none; }
.nav-logo span { color:var(--accent); }
.nav-links { display:flex; gap:8px; list-style:none; }
.nav-links a { color:var(--text-secondary); text-decoration:none; padding:6px 14px; border-radius:var(--radius); font-size:0.9rem; }
.nav-links a:hover { color:var(--text); background:var(--surface-hover); }

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

/* Hero */
.hero { text-align:center; padding:50px 0 30px; }
.hero h1 { font-size:2.4rem; font-weight:800; letter-spacing:-0.03em; margin-bottom:12px; }
.hero h1 span { background:linear-gradient(135deg, var(--accent), #10b981); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero p { color:var(--text-secondary); font-size:1.1rem; max-width:520px; margin:0 auto; }

/* Article Card */
.article-grid { display:grid; gap:20px; margin:32px 0; }
.article-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:28px; text-decoration:none; color:var(--text);
  transition:all .2s; display:block;
}
.article-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.article-card .badge { display:inline-block; padding:3px 10px; border-radius:12px; background:var(--accent); color:#000; font-size:0.75rem; font-weight:700; margin-bottom:10px; }
.article-card h3 { font-size:1.25rem; margin-bottom:6px; }
.article-card p { color:var(--text-secondary); font-size:0.9rem; }
.article-card .meta { color:var(--text-secondary); font-size:0.8rem; margin-top:10px; }

/* Article page */
.article h1 { font-size:2rem; font-weight:700; margin-bottom:8px; line-height:1.3; }
.article .date { color:var(--text-secondary); font-size:0.9rem; margin-bottom:24px; }
.article h2 { font-size:1.4rem; font-weight:700; margin:32px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.article h3 { font-size:1.1rem; font-weight:600; margin:20px 0 8px; }
.article p { margin:12px 0; color:var(--text-secondary); }
.article ul, .article ol { margin:12px 0; padding-left:24px; color:var(--text-secondary); }
.article li { margin:6px 0; }

/* Comparison Table */
.compare-table { width:100%; border-collapse:collapse; margin:20px 0; font-size:0.9rem; }
.compare-table th, .compare-table td { padding:12px 16px; text-align:left; border-bottom:1px solid var(--border); }
.compare-table th { background:var(--surface); font-weight:600; color:var(--text); }
.compare-table tr:hover td { background:var(--surface-hover); }
.compare-table .check { color:var(--accent); font-weight:700; }
.compare-table .cross { color:var(--text-secondary); }

/* Rating */
.rating { color:var(--star); font-size:1.1rem; }
.score { display:inline-block; padding:4px 12px; border-radius:6px; background:var(--accent); color:#000; font-weight:700; font-size:0.9rem; margin-left:8px; }

/* CTA Button */
.cta-btn {
  display:inline-block; padding:14px 32px; background:var(--accent); color:#000;
  font-weight:700; font-size:1rem; border-radius:8px; text-decoration:none;
  transition:all .15s; margin:16px 0;
}
.cta-btn:hover { background:var(--accent-hover); transform:scale(1.02); }

/* Pros/Cons */
.pros-cons { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:20px 0; }
@media(max-width:640px) { .pros-cons { grid-template-columns:1fr; } }
.pros, .cons { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
.pros h4 { color:var(--accent); margin-bottom:10px; }
.cons h4 { color:#ef4444; margin-bottom:10px; }
.pros ul, .cons ul { list-style:none; padding:0; }
.pros li::before { content:'+ '; color:var(--accent); font-weight:700; }
.cons li::before { content:'- '; color:#ef4444; font-weight:700; }

/* Breadcrumb */
.breadcrumb { font-size:0.85rem; color:var(--text-secondary); margin-bottom:20px; }
.breadcrumb a { color:var(--accent); text-decoration:none; }

/* Footer */
.footer { text-align:center; padding:40px 24px; border-top:1px solid var(--border); color:var(--text-secondary); font-size:0.85rem; margin-top:60px; }
.footer a { color:var(--accent); text-decoration:none; }

/* Info box */
.info-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin:20px 0; }
.info-box h4 { margin-bottom:8px; }

/* Responsive */
@media(max-width:640px) {
  .hero h1 { font-size:1.8rem; }
  .nav { padding:0 16px; }
  .container { padding:24px 16px; }
  .article h1 { font-size:1.5rem; }
}