:root{
  --bg:#0f1316;
  --panel:#171c22;
  --text:#e8eef5;
  --muted:#a9b5c3;
  --brand:#f5b800;
  --accent:#2b90d9;
  --ring:rgba(245,184,0,.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  line-height:1.6;
  background:var(--bg);
  color:var(--text);
}

.topbar{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, #12171d 0%, #0f1316 100%);
  border-bottom:1px solid #1e2630;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 6vw;
}
.brand a{color:var(--text); text-decoration:none; font-weight:800; letter-spacing:.2px}
.brand .logo-dot{display:inline-block;width:10px;height:10px;background:var(--brand);border-radius:50%;margin-right:8px;vertical-align:middle;box-shadow:0 0 0 4px var(--ring)}
.brand-sub{display:block;color:var(--muted);font-size:12px;margin-top:2px}

nav a{color:var(--text);text-decoration:none;margin-left:18px;padding:8px 10px;border-radius:10px}
nav a:hover{background:#202733}

main{padding:32px 6vw 64px}

.hero{padding:48px 0 8px}
.hero h1{font-size:44px; line-height:1.15; margin:0 0 12px; background:linear-gradient(90deg,var(--brand),#ffe08a);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--muted); max-width:900px}

.cta-row{margin:22px 0 10px; display:flex; gap:12px}
.btn{display:inline-block;padding:10px 16px;border:1px solid #2a3340;border-radius:12px;color:var(--text);text-decoration:none}
.btn.primary{background:var(--brand); color:#0b0c0e; font-weight:700; border:none}
.pill-row{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.pill{padding:6px 10px;border-radius:999px;background:#1c232c; color:#e9f1fa;border:1px solid #2a3340;font-size:12px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:26px}
.card{background:var(--panel);border:1px solid #232c38;border-radius:16px;padding:16px}

.page-head h1{font-size:34px;margin:0 0 10px}
.content{max-width:950px}
.grid.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.grid.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:8px}
.feature,.service,.stack{background:var(--panel);border:1px solid #232c38;border-radius:16px;padding:16px}

.site-footer{border-top:1px solid #232b36;margin-top:48px;padding:24px 6vw 48px;color:var(--muted)}
.site-footer .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.site-footer h4{color:var(--text);margin:0 0 6px}
.site-footer .contact{list-style:none;padding:0;margin:0}
.site-footer .contact a{color:var(--text)}
.copy{margin-top:12px; font-size:13px; color:#8ea0b4}