:root{--bg:#04040c;--card:#0d0d1f;--border:rgba(110,150,255,.14);--accent:#64b5f6;--accent2:#a78bfa;--text:#eef1ff;--text2:#9aa3cc;--text3:#5a6390}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:16px/1.7 Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
nav{position:sticky;top:0;z-index:5;display:flex;gap:1.3rem;align-items:center;flex-wrap:wrap;padding:.85rem 1.5rem;background:rgba(4,4,12,.92);border-bottom:1px solid var(--border)}
nav .logo{font-weight:700;letter-spacing:5px;color:var(--accent);text-decoration:none;margin-right:auto}
nav a{color:var(--text2);text-decoration:none;font-size:.9rem}
nav a:hover{color:var(--accent)}
nav a.cta{background:linear-gradient(135deg,#64b5f6,#a78bfa);color:#04040c;padding:.45rem 1rem;border-radius:9px;font-weight:700}
.wrap{max-width:820px;margin:0 auto;padding:2.5rem 1.5rem 4rem}
h1{font-size:clamp(1.9rem,4.5vw,2.7rem);line-height:1.15;margin-bottom:1rem}
h2{font-size:1.45rem;margin:2.2rem 0 .7rem}
h3{font-size:1.1rem;margin:1.4rem 0 .4rem;color:#7dd3fc}
p,li{color:var(--text2);margin:.7rem 0}
ul,ol{padding-left:1.5rem}
a{color:var(--accent)}
.lead{font-size:1.1rem}
.card{display:block;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1.2rem 1.3rem;margin:1rem 0;text-decoration:none}
a.card:hover{border-color:rgba(110,150,255,.45)}
.card h2,.card h3{margin:0 0 .4rem;color:var(--text)}
.card p{margin:.3rem 0}
.meta{color:var(--text3);font-size:.85rem}
.stars{color:#fbbf24;letter-spacing:2px}
.md pre{background:#07071a;border:1px solid var(--border);border-radius:10px;padding:1rem;overflow-x:auto}
.md code{font-family:ui-monospace,Consolas,monospace;font-size:.9em}
.md img{max-width:100%;border-radius:10px}
.md table{border-collapse:collapse;width:100%}
.md th,.md td{border-bottom:1px solid var(--border);padding:.5rem;text-align:left}
.md blockquote{border-left:3px solid var(--accent2);padding-left:1rem;margin:1rem 0}
.cta-box{margin-top:2.5rem;padding:1.4rem;border:1px solid var(--border);border-radius:12px;background:var(--card);text-align:center}
.cta-box a.btn{display:inline-block;margin-top:.6rem;background:linear-gradient(135deg,#64b5f6,#a78bfa);color:#04040c;padding:.6rem 1.4rem;border-radius:9px;font-weight:700;text-decoration:none}
footer{text-align:center;padding:2rem 1rem;border-top:1px solid var(--border);color:var(--text3);font-size:.85rem}
footer a{color:var(--text2)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* SaaSHub badge */
.saas-badge-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.8rem;
  flex-wrap:wrap;
  margin:1.4rem 0;
}
.saas-badge-wrap a{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.55rem 1rem;
  border-radius:100px;
  background:rgba(100,181,246,.08);
  border:1px solid rgba(100,181,246,.25);
  text-decoration:none;
  transition:transform .2s, box-shadow .2s, background .2s;
  box-shadow:0 0 18px rgba(100,181,246,.15);
}
.saas-badge-wrap a:hover{
  transform:translateY(-2px);
  background:rgba(100,181,246,.14);
  box-shadow:0 0 30px rgba(100,181,246,.35);
}
.saas-badge-wrap img{
  max-width:150px;
  height:auto;
  display:block;
}
.btn-row{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:1rem;
}
.btn-row .btn{
  margin-top:0;
}
.badge-text{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:rgba(52,211,153,.1);
  border:1px solid rgba(52,211,153,.3);
  color:#34d399;
  font-size:.78rem;
  font-weight:700;
  padding:.3rem .8rem;
  border-radius:100px;
}
@media(max-width:520px){
  .saas-badge-wrap img{max-width:130px;}
}