:root{
  --text:#0B0F14;--bg:#FBFCFE;--surface:#F3F6FB;--border:#E6EAF2;
  --accent:#4C7DF0;--success:#22B07D;--danger:#E47272;
}
[data-theme="dark"]{
  --text:#E8EEF5;--bg:#0B0F14;--surface:#11161E;--border:#272C35;
  --accent:#6F9AFF;--success:#30C492;--danger:#FF8C8C;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:15px/1.65 Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}
a{color:var(--accent);text-decoration:none}
.header{
  position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;
  background:var(--surface);padding:10px 16px;border-bottom:1px solid var(--border)
}
.brand{font-weight:800}
.nav a{margin-right:12px}
.btn{border:1px solid var(--border);background:#fff;padding:8px 12px;border-radius:10px;cursor:pointer}
.btn-primary{background:var(--accent);color:#fff;border-color:transparent}
.btn-outline{background:transparent;border-color:var(--accent);color:var(--accent)}
.menu{margin-left:auto;position:relative}
.menu-btn{padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:#fff}
.menu-list{
  display:none;position:absolute;right:0;top:42px;background:#fff;
  border:1px solid var(--border);border-radius:12px;min-width:220px;padding:6px
}
.menu-list a,.menu-list button{display:block;width:100%;text-align:left;padding:8px;border:0;background:none}
.container{max-width:1100px;margin:0 auto;padding:16px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{
  background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 6px 20px rgba(0,0,0,.06)
}
.hero{padding:48px 0;background:linear-gradient(180deg,rgba(76,125,240,.06),transparent)}
.hero h1{font-size:42px;line-height:1.15;margin:0 0 12px}
.cta .btn{margin-right:10px}
.footer{padding:18px;border-top:1px solid var(--border);text-align:center}
.muted{color:#6b7480}