:root{
  --ink:#0f172a;
  --text:#1f2937;
  --muted:#64748b;
  --bg:#ffffff;
  --soft:#f8fafc;
  --line:#e2e8f0;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:#ffffff;
  text-decoration:none;
  font-weight:600;
}

.brand .logo{
  max-height:36px;
  width:auto;
  display:block;
}

@media (max-width: 600px){
  .brand .logo{
    height:30px;
  }
}
.container{max-width:960px;margin:0 auto;padding:0 20px}

.site-header{
  background:var(--ink);
  color:#fff;
  padding:16px 0;
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{color:#fff;text-decoration:none;font-weight:600}
.menu a{
  color:#cbd5f5;
  text-decoration:none;
  margin-left:14px;
  font-weight:500;
}
.menu a.active,.menu a:hover{color:#fff;text-decoration:underline}

.hero{
  background:linear-gradient(180deg,var(--ink),#111827);
  color:#fff;
  padding:56px 0;
}
.hero h1{margin:0;font-size:2.2rem;font-weight:650}
.hero p{margin:12px 0 0;max-width:760px;color:#cbd5f5}

.section{padding:42px 0}
.section h2{margin:0 0 14px;color:var(--ink);font-size:1.55rem}
.card{
  background:var(--soft);
  border:1px solid var(--line);
  border-left:4px solid var(--ink);
  padding:18px 18px;
  border-radius:10px;
}
ul{padding-left:18px}
li{margin-bottom:8px}
small, .muted{color:var(--muted)}

.site-footer{
  background:#f1f5f9;
  border-top:1px solid var(--line);
  padding:26px 0;
  color:#475569;
  font-size:.92rem;
}