:root{ --brand:#1e3a5f; --brand-2:#ff7a00; --text:#222; --muted:#666; --bg:#f7f8fa; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); background:#fff; }
.container{ width:min(1100px, 92%); margin:0 auto; }
.site-header{ position:sticky; top:0; z-index:10; background:#fff; border-bottom:1px solid #eee; }
.brand{ font-weight:800; text-decoration:none; color:var(--brand); display:inline-block; padding:12px 0; }
.main-nav{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:8px 0 12px; }
.main-nav a{ text-decoration:none; color:#333; padding:6px 10px; border-radius:8px; }
.main-nav a:hover{ background:var(--bg); }
.site-main{ padding:24px 0; }
.hero{ display:grid; gap:10px; background:var(--bg); border:1px solid #eee; border-radius:14px; padding:16px; }
.grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:14px; }
.card{ border:1px solid #eee; border-radius:14px; padding:14px; background:#fff; text-decoration:none; color:inherit; }
.card:hover{ border-color:var(--brand-2); transform:translateY(-2px); transition:.2s; }
.btn{ display:inline-block; background:var(--brand-2); color:#fff; padding:10px 14px; border-radius:10px; text-decoration:none; }
.site-footer{ border-top:1px solid #eee; background:#fff; padding:20px 0; margin-top:24px; }
.small{ color:var(--muted); font-size:13px; }
.maintenance{ display:grid; place-items:center; min-height:100vh; background:var(--bg); }
.maintenance .card{ text-align:center; max-width:520px; }
@media (max-width: 768px){
  .main-nav{ gap:6px; }
}