:root{
  --bg:#0f0f12;
  --bg-soft:#141418;
  --card:#1a1a22;
  --text:#e9e9ef;
  --muted:#b6b6c2;
  --accent1:#FF6A00;
  --accent2:#A64BFF;
  --ink:#1E1E1E;
  --grid: 1160px;
}
*{box-sizing:border-box}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text); background:linear-gradient(180deg,#0f0f12 0%, #121218 100%);
}
a{color:var(--text); text-decoration:none}
.wrap{max-width:var(--grid); margin:0 auto; padding:32px 20px}
.header{position:sticky; top:0; backdrop-filter: blur(10px); background:rgba(15,15,18,0.6); border-bottom:1px solid #2a2a33; z-index:10;}
.nav{display:flex; align-items:center; gap:24px}
.nav img{height:44px}
.navlinks{margin-left:auto; display:flex; gap:18px; font-weight:600; color:var(--muted)}
.hero{padding:72px 0 32px; display:grid; gap:28px; grid-template-columns: 1.2fr 1fr; align-items:center;}
.badge{display:inline-flex; gap:10px; align-items:center; background:#1d1d25; border:1px solid #2a2a33; color:#bdbdd0; padding:8px 12px; border-radius:999px; font-size:13px}
.h1{font-size:48px; font-weight:800; line-height:1.05; margin:10px 0 12px}
.lead{color:#cfcfe0; font-size:18px}
.cta{display:flex; gap:14px; margin-top:18px}
.btn{padding:12px 16px; border-radius:12px; font-weight:700; border:1px solid #2a2a33; background:#21212a}
.btn.primary{background:linear-gradient(135deg, var(--accent1), var(--accent2)); color:white; border:none}
.grid{display:grid; gap:20px; grid-template-columns:repeat(12,1fr)}
.card{background:var(--card); border:1px solid #262632; border-radius:16px; padding:20px}
.section{padding:42px 0}
.kbd{background:#242433;border:1px solid #2f2f3a;padding:2px 8px;border-radius:6px}
.swatch{border-radius:12px; height:96px; border:1px solid #2a2a33;}
.row{display:flex; gap:16px; flex-wrap:wrap}
.caption{color:#b9b9c8; font-size:13px; margin-top:8px}
.do{border-left:4px solid #43d17b}
.dont{border-left:4px solid #ff6b6b}
footer{border-top:1px solid #2a2a33; color:#9b9bb0; padding:32px 0; margin-top:32px}
.logo-rail{display:flex; gap:20px; align-items:center; flex-wrap:wrap}
img.maxw{max-width:100%; height:auto; display:block}
.code{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background:#222230; border:1px solid #2a2a33; border-radius:10px; padding:10px; display:inline-block}
.small{font-size:13px; color:#a9a9bb}
@media (max-width:980px){ .hero{grid-template-columns:1fr} }