:root {
  --bg: #0d1117;
  --card: #161b22;
  --card-hover: #1f2937;
  --gold: #f59e0b;
  --gold-glow: #d97706;
  --green: #10b981;
  --text: #9ca3af;
  --text-strong: #f3f4f6;
  --border: #30363d;
  --font: 'Inter', system-ui, -apple-system, sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.6; font-size:16px; }
a { color:var(--gold); text-decoration:none; transition:color .2s; }
a:hover { color:#fbbf24; }
.wrap { max-width:1100px; margin:0 auto; padding:0 20px; }
.topbar { background:#000; color:#fbbf24; text-align:center; padding:8px 12px; font-size:13px; font-weight:600; }
header { background:rgba(22,27,34,0.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; }
.nav { display:flex; align-items:center; justify-content:space-between; height:70px; }
.logo { font-size:24px; font-weight:800; color:#fff; display:flex; align-items:center; gap:6px; }
.logo span { color:var(--gold); }
.nav-links { display:flex; gap:24px; align-items:center; }
.nav-links a { color:var(--text-strong); font-weight:500; font-size:15px; }
.btn { display:inline-block; background:linear-gradient(135deg, var(--gold), var(--gold-glow)); color:#000; font-weight:700; padding:10px 22px; border-radius:8px; text-align:center; border:none; cursor:pointer; }
.btn:hover { background:linear-gradient(135deg, #fbbf24, #f59e0b); color:#000; }
.hero { padding:60px 0 40px; text-align:center; }
.hero h1 { font-size:clamp(32px, 5vw, 48px); color:#fff; font-weight:800; line-height:1.2; margin-bottom:16px; }
.hero p { font-size:18px; color:var(--text); max-width:700px; margin:0 auto 24px; }
.badge { display:inline-block; background:rgba(245,158,11,0.15); color:var(--gold); border:1px solid rgba(245,158,11,0.3); padding:4px 14px; border-radius:20px; font-size:13px; font-weight:600; margin-bottom:16px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:24px; margin:40px 0; }
.card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:24px; transition:all .2s; }
.card:hover { transform:translateY(-4px); border-color:var(--gold); }
.card h3 { color:#fff; font-size:20px; margin-bottom:12px; }
.card p { color:var(--text); font-size:15px; margin-bottom:16px; }
.article-body { max-width:820px; margin:0 auto; padding:20px 0 60px; }
.article-body h2 { color:#fff; font-size:26px; margin:32px 0 16px; border-left:4px solid var(--gold); padding-left:12px; }
.article-body h3 { color:#fff; font-size:20px; margin:24px 0 12px; }
.article-body p, .article-body li { font-size:17px; line-height:1.8; margin-bottom:16px; color:var(--text-strong); }
.article-body ul, .article-body ol { margin-left:24px; margin-bottom:20px; }
.table-box { width:100%; border-collapse:collapse; margin:24px 0; border:1px solid var(--border); }
.table-box th, .table-box td { padding:12px 16px; border:1px solid var(--border); text-align:left; }
.table-box th { background:rgba(245,158,11,0.1); color:var(--gold); }
.cta-box { background:linear-gradient(135deg, rgba(245,158,11,0.1), rgba(16,185,129,0.1)); border:1px solid var(--gold); border-radius:12px; padding:32px; text-align:center; margin:40px 0; }
.cta-box h2 { color:#fff; border:none; padding:0; margin-bottom:12px; }
footer { background:#000; border-top:1px solid var(--border); padding:40px 0 20px; text-align:center; font-size:14px; color:var(--text); }
footer a { color:var(--text); margin:0 10px; }