:root{--bg:#0a0a0a;--panel:#121316;--panel2:#17181c;--line:#23242a; --txt:#e8e8ea;--mut:#8a8d96;--accent:#00d4aa;--red:#ff5470;--amber:#ffb020;--green:#00d4aa;} *{box-sizing:border-box;margin:0;padding:0} body{background:var(--bg);color:var(--txt);font:16px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,sans-serif;-webkit-font-smoothing:antialiased} a{color:var(--accent);text-decoration:none} .wrap{max-width:1080px;margin:0 auto;padding:0 20px} .mono{font-family:'SF Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} nav{position:sticky;top:0;z-index:20;background:rgba(10,10,10,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} nav .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;flex-wrap:wrap} .brand{font-weight:700;font-size:19px;letter-spacing:-.02em} .brand .dot{color:var(--accent)} .nav-links{display:flex;gap:22px;align-items:center;font-size:14px;flex-wrap:wrap} .nav-links a{color:var(--mut);min-height:44px;display:inline-flex;align-items:center}.nav-links a:hover{color:var(--txt)}.nav-links a.btn,.nav-links a.btn:hover,.nav-links a.btn:visited{color:#04120e}.nav-toggle{display:none;background:transparent;border:1px solid var(--line);border-radius:8px;color:var(--txt);width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .15s}.nav-toggle:hover{border-color:var(--accent)}.nav-toggle svg{width:24px;height:24px;flex:0 0 auto;display:block} .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;background:var(--accent);color:#04120e;font-weight:700;padding:12px 22px;border-radius:10px;border:none;cursor:pointer;font-size:15px;transition:transform .1s} .btn:hover{transform:translateY(-1px)} .btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--line)} section{padding:72px 0;border-bottom:1px solid var(--line)} .hero{padding:90px 0 80px;text-align:center;background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(0,212,170,.10),transparent)} .tag{display:inline-block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(0,212,170,.3);border-radius:100px;padding:6px 14px;margin-bottom:24px} h1{font-size:clamp(32px,6vw,56px);line-height:1.05;letter-spacing:-.03em;font-weight:800;margin-bottom:20px} h1 .hl{color:var(--red)} .sub{font-size:clamp(17px,2.4vw,21px);color:var(--mut);max-width:680px;margin:0 auto 34px} h2{font-size:clamp(26px,4vw,38px);letter-spacing:-.02em;margin-bottom:14px;font-weight:800} .lead{color:var(--mut);font-size:18px;max-width:640px;margin-bottom:40px} .center{text-align:center;margin:0 auto} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px} .card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px} .card h3{font-size:18px;margin-bottom:10px} .tl{list-style:none;display:flex;flex-direction:column;gap:12px} .tl li{display:flex;gap:14px;align-items:flex-start;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px 16px} .tl .t{color:var(--mut);font-size:13px;min-width:52px;padding-top:2px} .badge{font-size:12px;font-weight:700;padding:3px 9px;border-radius:6px;white-space:nowrap} .b-red{background:rgba(255,84,112,.14);color:var(--red)} .b-green{background:rgba(0,212,170,.14);color:var(--green)} .b-amber{background:rgba(255,176,32,.14);color:var(--amber)} .contrast{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden} .contrast>div{padding:26px} .contrast .old{background:rgba(255,84,112,.05)} .contrast .new{background:rgba(0,212,170,.05)} .contrast h3{font-size:15px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px} .contrast ul{list-style:none;display:flex;flex-direction:column;gap:12px;font-size:15px} .contrast li{display:flex;gap:10px} .price{max-width:440px;margin:0 auto;background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid rgba(0,212,170,.3);border-radius:20px;padding:36px;text-align:center} .price .amt{font-size:52px;font-weight:800;letter-spacing:-.03em} .price .amt span{font-size:18px;color:var(--mut);font-weight:500} .price ul{list-style:none;text-align:left;margin:24px 0;display:flex;flex-direction:column;gap:12px} .price li{display:flex;gap:10px;color:var(--txt)} .price li .c{color:var(--accent)} .strike{color:var(--mut);text-decoration:line-through;font-size:15px} .codebox{background:#000;border:1px solid var(--line);border-radius:12px;padding:18px;overflow-x:auto;font-size:13.5px;color:#cfd2d8;text-align:left} .codebox .k{color:var(--accent)}.codebox .s{color:var(--amber)}.codebox .c{color:var(--mut)} .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px} .kpi{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;text-align:center} .kpi .n{font-size:30px;font-weight:800;color:var(--accent)} .kpi .l{font-size:13px;color:var(--mut);margin-top:4px} footer{padding:40px 0;text-align:center;color:var(--mut);font-size:14px} .form{display:flex;gap:10px;max-width:440px;margin:18px auto 0} .form input{flex:1;background:var(--panel2);border:1px solid var(--line);color:var(--txt);padding:13px 15px;border-radius:10px;font-size:15px} .mt40{margin-top:40px}.mt24{margin-top:24px} .faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px;text-align:left} .faq details{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px} .faq summary{font-weight:700;cursor:pointer;font-size:16px;list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary::before{content:"+ ";color:var(--accent);font-weight:800} .faq details[open] summary::before{content:"– "} .faq details p{color:var(--mut);margin-top:12px;font-size:15px} .doc{max-width:760px;margin:0 auto;text-align:left} .doc h1{font-size:clamp(28px,5vw,40px);margin-bottom:8px} .doc p,.doc li{color:var(--mut);font-size:16px;margin-bottom:12px} .doc h2{font-size:22px;margin:28px 0 10px} .doc .lead{color:var(--txt);font-size:18px} .deflist{max-width:760px;margin:8px auto 0;text-align:left} .deflist dt{font-weight:700;color:var(--accent);margin-top:16px;font-size:17px} .deflist dd{margin:6px 0 0;color:var(--mut);font-size:15px} .deflist code{background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-family:'SF Mono',monospace;font-size:13px;color:var(--txt)} .cmp{width:100%;border-collapse:collapse;margin-top:20px;font-size:14.5px} .cmp th,.cmp td{border:1px solid var(--line);padding:12px 14px;text-align:left} .cmp thead th{background:var(--panel2);color:var(--txt);font-weight:700} .cmp tbody tr:nth-child(even){background:rgba(255,255,255,.02)} .cmp tbody tr:last-child{background:rgba(0,212,170,.06)} @media(max-width:760px){.grid2,.contrast,.kpis{grid-template-columns:1fr}.decision3{grid-template-columns:1fr!important}.nav-toggle{display:inline-flex}#mainnav{position:absolute;top:60px;left:0;right:0;flex-direction:column;align-items:stretch;justify-content:flex-start;width:100%;background:rgba(10,10,10,.98);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:8px 20px 18px;gap:2px;display:none;z-index:30;max-height:calc(100dvh - 60px);overflow-y:auto}nav.menu-open #mainnav{display:flex}#mainnav a{width:100%;padding:10px 0;justify-content:flex-start}#mainnav a.btn{justify-content:center;margin-top:10px}#mainnav a:not(.btn){font-size:15px}section{padding:52px 0}.cmp{font-size:12.5px}.cmp th,.cmp td{padding:8px}}
Show the world your autonomous agents are protected by a spend firewall. Every badge embed is a live status indicator — and a permanent backlink.
Add the flat badge to your project README. Every visitor sees your agents are protected.
Embed the full badge in your docs sidebar. Builds trust with every integration partner.
A single <img> tag in your footer. Zero JavaScript, zero dependencies, always current.
Show users of your framework integration that you've wired the firewall. Trust signal.
Pair the badge with your security page. Every SOC 2 auditor and enterprise buyer sees it.
Add the shield badge to your Smithery, MCPT, or Open Tools listing. Differentiates your listing.
The badge pulls live stats from the sipi.bot firewall engine. Every number is real — checks counted today, blocked transactions, approved/flagged breakdowns. No fake data, no cached static badge.
<img> tag, no JS neededNo. The SVG payload is ~2KB, served with 30-second CDN cache. It loads in parallel with your page and never blocks rendering.
No. The badge is free for anyone to embed. It shows global firewall stats, not account-specific data. If you want a badge showing YOUR agent's protected status, sign up for a plan and we'll generate a per-account badge.
Yes. The badge is free for commercial use. Attribution to sipi.bot is built into the badge design — that's the whole point.
The badge shows you care. The firewall behind it actually protects. Deploy both today.