:root {
  --bg: #0c0d0f;
  --card: #131518;
  --text: #e7e7e7;
  --muted: #9aa0a6;
  --accent: #1aa1ad;
  --brand: #b8862b;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background: var(--bg); color: var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
a { color: var(--accent); text-decoration: none; }
.container { max-width: 1100px; margin: 0 auto; padding: 24px; }
nav { display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 14px 0; }
.brand { display:flex; align-items:center; gap:12px; }
.brand img { width:44px; height:44px; border-radius:12px; }
.brand h1 { font-size: 20px; margin:0; letter-spacing:0.5px; }
.btn { display:inline-block; padding: 12px 18px; border-radius:14px; background: linear-gradient(180deg, var(--brand), #8a6721); color:#111; font-weight:700; }
.btn.secondary { background: #1f2227; color: var(--text); border:1px solid #2a2f36; }
.btn.ghost { background: transparent; border:1px solid #2a2f36; }
.hero { display:grid; grid-template-columns: 1.1fr 0.9fr; gap:28px; align-items:center; padding: 28px 0 10px; }
.hero-card { background: radial-gradient(100% 120% at 0% 0%, rgba(26,161,173,0.2), transparent 60%), #0c0d0f; border:1px solid #2a2f36; border-radius:28px; padding:28px; box-shadow: 0 10px 40px rgba(0,0,0,0.4); }
.hero h2 { font-size:42px; margin:0 0 12px; line-height:1.1; }
.hero p { color: var(--muted); font-size:18px; }
.card { background: var(--card); border:1px solid #2a2f36; border-radius:22px; padding:22px; }
.grid { display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
footer { color: var(--muted); padding: 26px 0 40px; }
.badge { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:#0f1114; border:1px solid #242a31; color:var(--muted); font-size:12px; }
.list { list-style:none; padding:0; margin:0; }
.list li { padding:8px 0; border-bottom:1px dashed #2a2f36; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; background:#0f1114; padding:10px 12px; border-radius:12px; border:1px solid #242a31; display:block; overflow-x:auto; }
.logo-xl { width:100%; border-radius:24px; border:1px solid #2a2f36; background:#101316; padding:14px; }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
}