/* "Powered by" credit chip — Hostilo × Crazy Websites.
   One source for every site that carries it. Self-contained: scoped .pb- classes, no JS.
   Designed for DARK footers (all current hosts are dark). Set --pb-fg / --pb-muted to tune. */

.pb { --pb-fg:#EEF2FB; --pb-muted:rgba(238,242,251,.55);
  display:inline-flex; align-items:center; gap:10px; padding:7px 8px 7px 14px;
  border-radius:999px; position:relative; isolation:isolate;
  font:500 12px/1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--pb-muted); background:rgba(255,255,255,.035); white-space:nowrap; }
/* the border is the brand handshake: Hostilo's knot gradient running into CW's Pop Yellow */
.pb::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; z-index:-1;
  background:linear-gradient(90deg,#a5f3fc,#60a5fa 30%,#8b5cf6 50%,#FFE500 75%,#D7FF3E);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.45; transition:opacity .3s; }
.pb:hover::before, .pb:focus-within::before { opacity:1; }
.pb-solo-h::before { background:linear-gradient(90deg,#a5f3fc,#60a5fa 55%,#8b5cf6); }
.pb-solo-c::before { background:linear-gradient(90deg,#FFE500,#D7FF3E); }

.pb a { display:inline-flex; align-items:center; gap:7px; color:var(--pb-fg); text-decoration:none;
  padding:4px 8px; border-radius:999px; transition:background .25s; }
.pb a:hover, .pb a:focus-visible { background:rgba(255,255,255,.06); outline:none; }
.pb-x { color:var(--pb-muted); font-size:11px; }

/* Hostilo half — a live "uptime" pulse, and the knot re-draws itself on hover */
.pb-live { width:6px; height:6px; border-radius:50%; background:#22D3EE; box-shadow:0 0 0 0 rgba(34,211,238,.6);
  animation:pb-pulse 2.4s ease-out infinite; }
.pb-knot { width:18px; height:18px; overflow:visible; }
.pb-knot path { stroke-dasharray:90; stroke-dashoffset:0; }
.pb-h:hover .pb-knot path, .pb-h:focus-visible .pb-knot path { animation:pb-draw 1.1s cubic-bezier(.34,1.56,.64,1); }
.pb-hw { font:600 14px/1 "Hanken Grotesk",ui-sans-serif,system-ui,sans-serif; letter-spacing:-.02em; }

/* Crazy Websites half — the CRAZY letters jumble on hover, like the master logotype */
.pb-cur { width:12px; height:12px; fill:#FFE500; }
.pb-cw { display:inline-flex; align-items:baseline; gap:4px;
  font:700 12px/1 "Space Grotesk",ui-sans-serif,system-ui,sans-serif; letter-spacing:.02em; }
.pb-cw b { display:inline-block; color:#FFE500; transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.pb-cw i { font-style:normal; font-size:9.5px; letter-spacing:.14em; color:var(--pb-fg); }
.pb-c:hover .pb-cw span b:nth-child(1), .pb-c:focus-visible .pb-cw span b:nth-child(1) { transform:rotate(-12deg) translateY(-2px); }
.pb-c:hover .pb-cw span b:nth-child(2), .pb-c:focus-visible .pb-cw span b:nth-child(2) { transform:rotate(9deg) translateY(1px); }
.pb-c:hover .pb-cw span b:nth-child(3), .pb-c:focus-visible .pb-cw span b:nth-child(3) { transform:rotate(-6deg) translateY(-3px) scale(1.12); }
.pb-c:hover .pb-cw span b:nth-child(4), .pb-c:focus-visible .pb-cw span b:nth-child(4) { transform:rotate(14deg) translateY(2px); }
.pb-c:hover .pb-cw span b:nth-child(5), .pb-c:focus-visible .pb-cw span b:nth-child(5) { transform:rotate(-9deg) translateY(-1px); }

@keyframes pb-pulse { 0%{box-shadow:0 0 0 0 rgba(34,211,238,.55)} 70%{box-shadow:0 0 0 7px rgba(34,211,238,0)} 100%{box-shadow:0 0 0 0 rgba(34,211,238,0)} }
@keyframes pb-draw { from{stroke-dashoffset:90} to{stroke-dashoffset:0} }
@media (prefers-reduced-motion:reduce) { .pb-live,.pb-knot path{animation:none!important} .pb-cw b{transition:none} }
@media (max-width:420px) { .pb { gap:4px; padding:6px 4px 6px 12px; } .pb a { padding:4px 5px; gap:6px; } }
@media (max-width:340px) { .pb { white-space:normal; flex-wrap:wrap; justify-content:center; } }