:root { --bg:#f7f9fc; --card:#ffffff; --text:#1d2736; --muted:#5a6b84; --accent:#0e5bd7; }
* { box-sizing: border-box; }
body { margin:0; font-family:Arial,Helvetica,sans-serif; color:var(--text); background:var(--bg); line-height:1.6; }
.container { width:min(1100px, 92%); margin:0 auto; }
.site-header { background:#0f1d35; color:#fff; padding:14px 0; position:sticky; top:0; z-index:5; }
.site-header .container { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.logo { color:#fff; font-weight:700; text-decoration:none; font-size:20px; }
nav a { color:#d5def1; text-decoration:none; margin-left:16px; }
nav a:hover { color:#fff; }
.article { background:var(--card); margin:28px auto; padding:28px; border-radius:12px; box-shadow:0 5px 20px rgba(17,42,84,.08); }
h1, h2 { line-height:1.3; }
h1 { margin-top:0; }
ul { padding-left:20px; }
a { color:var(--accent); }
.site-footer { background:#0e1628; color:#d4d9e6; padding:20px 0 30px; margin-top:24px; }
.backlinks { display:flex; gap:18px; flex-wrap:wrap; }
.backlinks a { color:#7bb4ff; text-decoration:none; }
.backlinks a:hover { text-decoration:underline; }
@media (max-width: 700px) {
  .site-header .container { flex-direction:column; align-items:flex-start; }
  nav a { margin-left:0; margin-right:12px; }
  .article { padding:18px; }
}

.homepage {
  background: linear-gradient(180deg, #ffffff 0%, #eef5ff 100%);
}
.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 16px 0 24px;
}
.hero-card {
  background: linear-gradient(135deg, #12356d, #1b64c8);
  color: #fff;
  padding: 16px;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(17, 42, 84, .16);
}
.hero-card:nth-child(2) { background: linear-gradient(135deg, #0f6d4b, #1f9d70); }
.hero-card:nth-child(3) { background: linear-gradient(135deg, #7b3d0f, #db7b1f); }
.hero-card a { color: #fff; font-weight: 700; }