/* ===== v1.9.11 — app badges (Hot / Best seller / New) + deployed-clients logo wall ===== */
.tool-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }

/* ---------- badge ---------- */
.tbadge { --b1: #FF4D2E; --b2: #FF9500; --bt: #fff; position: relative; display: inline-flex; align-items: center; gap: .38rem; flex: none; isolation: isolate;
  padding: .38rem .8rem .38rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bt);
  background: linear-gradient(110deg, var(--b1), var(--b2), var(--b1)); background-size: 220% 100%;
  box-shadow: 0 8px 20px -8px var(--b1), inset 0 1px 0 rgba(255,255,255,.45);
  animation: tbFlow 3s linear infinite, tbFloat 2.6s ease-in-out infinite; overflow: visible; white-space: nowrap; }
.tbadge::after { /* shine sweep */ content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%); background-size: 250% 100%; animation: tbShine 2.4s ease-in-out infinite; mix-blend-mode: soft-light; }
.tbadge-glow { position: absolute; inset: -3px; border-radius: inherit; z-index: -1; background: inherit; filter: blur(10px); opacity: .55; animation: tbPulse 1.8s ease-in-out infinite; }
.tbadge-ic { position: relative; z-index: 2; display: grid; place-items: center; width: 18px; height: 18px; }
.tbadge-ic svg { width: 17px; height: 17px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.tbadge-tx { position: relative; z-index: 2; text-shadow: 0 1px 1px rgba(0,0,0,.18); }
@keyframes tbFlow { to { background-position: -220% 0; } }
@keyframes tbFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes tbShine { 0% { background-position: 150% 0; } 60%,100% { background-position: -100% 0; } }
@keyframes tbPulse { 0%,100% { opacity: .35; transform: scale(.96); } 50% { opacity: .8; transform: scale(1.08); } }

/* HOT: flickering flame + rising embers */
.tbadge-hot .tbadge-ic svg { transform-origin: 50% 90%; animation: tbFlame .5s ease-in-out infinite alternate; }
@keyframes tbFlame { 0% { transform: scale(1, 1) skewX(0deg); } 40% { transform: scale(.94, 1.1) skewX(-4deg); } 100% { transform: scale(1.06, .94) skewX(3deg); } }
.tbadge-embers { position: absolute; left: .55rem; top: 0; width: 18px; height: 100%; pointer-events: none; z-index: 0; }
.tbadge-embers i { position: absolute; bottom: 40%; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: #FFD166; box-shadow: 0 0 6px #FF7A00; opacity: 0; animation: tbEmber 1.6s ease-out infinite; }
.tbadge-embers i:nth-child(2) { animation-delay: .4s; margin-left: -5px; width: 3px; height: 3px; }
.tbadge-embers i:nth-child(3) { animation-delay: .8s; margin-left: 4px; }
.tbadge-embers i:nth-child(4) { animation-delay: 1.2s; margin-left: -2px; width: 3px; height: 3px; }
@keyframes tbEmber { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--x, 3px), -26px) scale(.3); opacity: 0; } }
.tbadge-embers i:nth-child(odd) { --x: -4px; }

/* BEST SELLER: gold, bouncing crown, twinkling stars */
.tbadge-bestseller { --b1: #E9A400; --b2: #FFE066; --bt: #4A2E00; }
.tbadge-bestseller .tbadge-tx { text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.tbadge-bestseller .tbadge-ic svg { color: #8A5A00; animation: tbCrown 1.6s cubic-bezier(.3,1.6,.5,1) infinite; transform-origin: 50% 100%; }
@keyframes tbCrown { 0%,60%,100% { transform: translateY(0) rotate(0); } 20% { transform: translateY(-3px) rotate(-10deg); } 40% { transform: translateY(0) rotate(6deg); } }
/* NEW: emerald → cyan */
.tbadge-new { --b1: #10B981; --b2: #22D3EE; }
.tbadge-new .tbadge-ic svg { animation: tbSpin 3s linear infinite; }
@keyframes tbSpin { to { transform: rotate(360deg); } }
.tbadge-stars { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.tbadge-stars i { position: absolute; width: 8px; height: 8px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: tbTwinkle 2.2s ease-in-out infinite; }
.tbadge-stars i:nth-child(1) { top: -4px; right: 8px; }
.tbadge-stars i:nth-child(2) { bottom: -3px; right: 28%; animation-delay: .7s; width: 6px; height: 6px; }
.tbadge-stars i:nth-child(3) { top: 30%; left: -4px; animation-delay: 1.4s; width: 6px; height: 6px; }
@keyframes tbTwinkle { 0%,100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } }
.tbadge-lg { font-size: .82rem; padding: .45rem 1rem .45rem .7rem; }
.tbadge-lg .tbadge-ic, .tbadge-lg .tbadge-ic svg { width: 20px; height: 20px; }
.detail-badge { margin-bottom: .45rem; }

/* card glow ring for badged apps */
.tool-card.has-badge { --ring1: #FF4D2E; --ring2: #FFB000; }
.tool-card.badge-bestseller { --ring1: #E9A400; --ring2: #FFE066; }
.tool-card.badge-new { --ring1: #10B981; --ring2: #22D3EE; }
.tool-card.has-badge::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--spin, 0deg), var(--ring1), var(--ring2), transparent 30%, transparent 70%, var(--ring1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 5s linear infinite; opacity: .9; }
.tool-card.has-badge { box-shadow: 0 18px 44px -26px var(--ring1); }

/* ---------- deployed clients logo wall ---------- */
.detail-body { min-width: 0; }
.clients-wall { min-width: 0; max-width: 100%; margin-top: 2.4rem; padding: 1.5rem 1.5rem 1.3rem; border-radius: 22px; position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(150deg, rgba(255,255,255,.92), color-mix(in srgb, var(--tool-color, #1F4FD8) 7%, #fff));
  border: 1px solid rgba(255,255,255,.9); box-shadow: 0 20px 50px -34px rgba(11,31,58,.5); }
.clients-wall::before { content: ''; position: absolute; width: 260px; height: 260px; right: -90px; top: -120px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--tool-color, #1F4FD8) 28%, transparent), transparent 70%); animation: cwOrb 9s ease-in-out infinite alternate; }
@keyframes cwOrb { to { transform: translate(-60px, 40px) scale(1.2); } }
.clients-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.clients-head h2 { margin: 0; font-size: 1.3rem; }
.clients-count { display: inline-flex; align-items: baseline; gap: .35rem; font-size: .85rem; font-weight: 700; color: var(--ink-soft);
  padding: .3rem .8rem; border-radius: 999px; background: color-mix(in srgb, var(--tool-color, #1F4FD8) 10%, #fff); border: 1px solid color-mix(in srgb, var(--tool-color, #1F4FD8) 22%, transparent); }
.clients-count b { font-size: 1.05rem; color: var(--tool-color, var(--cobalt)); }
.clients-lead { margin: .35rem 0 1.1rem; color: var(--mute); font-size: .92rem; }
.clients-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.client-logo { position: relative; display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: .9rem .7rem .7rem; border-radius: 16px; text-decoration: none !important;
  background: #fff; border: 1px solid #E5EAF2; box-shadow: 0 6px 18px -14px rgba(11,31,58,.5); color: var(--ink-soft);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease; animation: cwIn .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--d, 0ms); }
@keyframes cwIn { from { opacity: 0; transform: translateY(14px) scale(.95); } }
.client-img { height: 64px; width: 100%; display: grid; place-items: center; }
.client-img img { max-width: 100%; max-height: 64px; object-fit: contain; filter: grayscale(1) contrast(.95); opacity: .78; transition: filter .4s ease, opacity .4s ease, transform .4s ease; }
.client-name { font-size: .76rem; font-weight: 700; text-align: center; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .3s ease; }
.client-logo:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--tool-color, #1F4FD8) 40%, transparent); box-shadow: 0 18px 30px -18px var(--tool-color, #1F4FD8); }
.client-logo:hover .client-img img { filter: none; opacity: 1; transform: scale(1.06); }
.client-logo:hover .client-name { color: var(--tool-color, var(--cobalt)); }

/* 5+ logos → infinite marquee with soft edges, pauses on hover */
.clients-track.is-loop { overflow: hidden; margin-inline: -1.5rem; padding: .4rem 0 .6rem;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.clients-track.is-loop .clients-row { display: flex; width: max-content; gap: .9rem; padding-inline: .45rem; animation: cwMarquee calc(var(--n) * 3.2s) linear infinite; }
.clients-track.is-loop:hover .clients-row { animation-play-state: paused; }
.clients-track.is-loop .client-logo { width: 170px; flex: none; animation: none; }
@keyframes cwMarquee { to { transform: translateX(-50%); } }

@media (max-width: 600px) {
  .clients-wall { padding: 1.2rem 1rem 1rem; }
  .clients-track.is-loop { margin-inline: -1rem; }
  .clients-row { grid-template-columns: repeat(2, 1fr); }
  .clients-track.is-loop .client-logo { width: 140px; }
  .tbadge { font-size: .68rem; padding: .32rem .65rem .32rem .45rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tbadge, .tbadge::after, .tbadge-glow, .tbadge svg, .tbadge-embers i, .tbadge-stars i, .tool-card.has-badge::before, .clients-wall::before, .client-logo { animation: none !important; }
  .clients-track.is-loop .clients-row { animation: none; flex-wrap: wrap; width: auto; }
}

/* ---------- media service cards: badge row + animated ring (v1.9.12) ---------- */
.service-head { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem; }
.service-card .service-cover + .service-head { margin-top: -2.4rem; }
.service-card .service-head .service-icon { margin-top: 0; }
.service-head .tbadge { margin-bottom: .2rem; }
.service-card.has-badge { --ring1: #FF4D2E; --ring2: #FFB000; }
.service-card.badge-bestseller { --ring1: #E9A400; --ring2: #FFE066; }
.service-card.badge-new { --ring1: #10B981; --ring2: #22D3EE; }
.badge-ring { position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 3;
  background: conic-gradient(from var(--spin, 0deg), var(--ring1), var(--ring2), transparent 30%, transparent 70%, var(--ring1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 5s linear infinite; }
@media (prefers-reduced-motion: reduce) { .badge-ring { animation: none; } }

/* ---------- several badges at once (v1.9.16) ---------- */
.tbadges { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .35rem; min-width: 0; }
.tool-head .tbadges, .service-head .tbadges { flex: 0 1 auto; }
.detail-badge .tbadges { justify-content: flex-start; gap: .45rem; }
.tbadges .tbadge { animation: tbStackIn .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 120ms); }
.tbadges .tbadge-glow { animation-delay: calc(var(--i, 0) * -.6s); }
@keyframes tbStackIn { from { opacity: 0; transform: translateY(6px) scale(.85); } }
/* cards with 2–3 badges: slightly tighter pills so they sit on one line */
.tool-card .tbadges.is-multi .tbadge, .service-card .tbadges.is-multi .tbadge { font-size: .66rem; padding: .3rem .6rem .3rem .42rem; gap: .28rem; }
.tool-card .tbadges.is-multi .tbadge-ic, .service-card .tbadges.is-multi .tbadge-ic,
.tool-card .tbadges.is-multi .tbadge-ic svg, .service-card .tbadges.is-multi .tbadge-ic svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .tbadges .tbadge { animation: none !important; } }