:root{
  --ink:#0b1020; --muted:#475569; --bg:#0e1327; --card:#111735;
  --brand1:#1f2937; --accent:#16a34a; --text:#e6e9f5; /* navy + green to match logo */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 600px at 80% -10%, rgba(31,41,55,.25), transparent 60%),
    linear-gradient(180deg,#0b1020 0%,#0e1327 60%,#0b1020 100%);
}
a{color:#93c5fd;text-decoration:none}
.container{max-width:1040px;margin:0 auto;padding:28px 20px}
.header{display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800}
.brand img{height:38px;width:auto;display:block}
nav a{margin:0 10px;color:#cfe2ff}
nav a.active{color:#fff;border-bottom:2px solid #93c5fd}
.hero{padding:34px 0}
h1{font-size:42px;margin:0 0 10px}
p.lead{font-size:18px;color:#cbd5e1}
.btn{display:inline-block;background:#22d3ee;color:#06121f;padding:12px 16px;border-radius:10px;font-weight:700}
.grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px}
pre.code{background:#0c1124;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:16px;overflow:auto}
.footer{margin:40px 0 12px;color:#aab4d4;font-size:13px}
small.disc{display:block;color:#94a3b8;margin-top:8px}
@media (max-width:900px){ .grid{grid-template-columns:1fr} h1{font-size:32px} }