/* OpenClaw on VPS — minimal, clean, conversion-friendly */
:root{
  --bg0:#070b14;
  --bg1:#0b1220;
  --card:#111b2e;
  --text:#e8eefc;
  --muted:#a7b3cf;
  --link:#8ab4ff;
  --accent:#58d6a7;
  --border:#22335a;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:dark}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 700px at 15% 5%, rgba(138,180,255,.18), transparent 55%),
              radial-gradient(900px 600px at 80% 15%, rgba(88,214,167,.14), transparent 55%),
              linear-gradient(180deg,var(--bg0) 0%, var(--bg1) 40%, var(--bg0) 100%);
  color:var(--text);
  line-height:1.7;
}

.container{max-width:1040px;margin:0 auto}

header{
  padding:22px 18px;
  border-bottom:1px solid var(--border);
  background:rgba(11,18,32,.72);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.brand h1{font-size:18px;margin:0;letter-spacing:.2px}

nav{display:flex;gap:10px;flex-wrap:wrap}
nav a{
  color:var(--muted);
  text-decoration:none;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid transparent;
}
nav a:hover{color:var(--text);border-color:rgba(34,51,90,.9);background:rgba(17,27,46,.45)}

main{padding:26px 18px}

.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:start}
@media (max-width:860px){.hero{grid-template-columns:1fr}}

.card{
  background:rgba(17,27,46,.88);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  box-shadow: var(--shadow);
}

.card h2{margin:0 0 10px 0;font-size:18px}
.card p{margin:10px 0;color:var(--muted)}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:860px){.grid{grid-template-columns:1fr}}

a{color:var(--link)}
a:hover{text-decoration:underline}

.btn{
  display:inline-block;
  background:var(--accent);
  color:#062016;
  text-decoration:none;
  padding:10px 14px;
  border-radius:12px;
  font-weight:800;
  box-shadow: 0 10px 24px rgba(88,214,167,.18);
}
.btn:hover{text-decoration:none;filter:brightness(1.03)}
.btn.secondary{background:transparent;color:var(--text);border:1px solid rgba(34,51,90,.9);box-shadow:none}

.small{font-size:13px;color:var(--muted)}

.article h1{margin-top:0;font-size:28px;line-height:1.2}
.article h2{margin-top:22px;font-size:20px}
.article h3{margin-top:14px;font-size:16px}
.kicker{color:var(--muted);margin-top:6px}

.notice{
  border-left:4px solid var(--accent);
  padding:12px 14px;
  background:rgba(10,16,32,.62);
  border-radius:12px;
}

ul{padding-left:18px}
li{margin:6px 0}

code,pre{
  background:#0a1020;
  border:1px solid #182446;
  border-radius:12px;
}
code{padding:2px 6px}
pre{padding:12px;overflow:auto}

:focus-visible{outline:2px solid rgba(138,180,255,.9);outline-offset:2px}

footer{padding:22px 18px;border-top:1px solid var(--border);color:var(--muted)}


/* Accessibility: skip link */
.skip-link{position:absolute;left:12px;top:10px;transform:translateY(-200%);background:#0a1020;color:var(--text);border:1px solid var(--border);padding:8px 10px;border-radius:12px;z-index:50}
.skip-link:focus{transform:translateY(0)}

/* Readability */
.article{max-width:860px;margin:0 auto}
.article p, .article li{color:var(--muted)}
.article a{word-break:break-word}

/* Responsive type */
.article h1{font-size:clamp(24px, 2.6vw, 34px)}
.article h2{font-size:clamp(18px, 1.7vw, 22px)}