/* Four lightweight SVG/CSS illustrations for the homepage benefit cards. */
html body #content_ajax #main #services > .ptb > .container > .row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}
html body #content_ajax #main #services > .ptb > .container > .row > [class*="col-"] {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
  grid-column: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body #content_ajax #main #services .box.bf-rich-benefit-card.bf-illustrated-card,
html body #content_ajax #main #services .row > div:nth-child(n) .box.bf-rich-benefit-card.bf-illustrated-card {
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 420px !important;
  height: 100% !important;
  max-height: none !important;
  padding: 0 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #18181b !important;
  border: 1px solid #303036 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.04) !important;
  transform: none !important;
}
html body #content_ajax #main #services .bf-illustrated-card::before,
html body #content_ajax #main #services .bf-illustrated-card::after,
html body #content_ajax #main #services .bf-illustrated-card .bf-rich-art,
html body #content_ajax #main #services .bf-illustrated-card .bf-card-motion,
html body #content_ajax #main #services .bf-illustrated-card .bf-user-notification-feed,
html body #content_ajax #main #services .bf-illustrated-card .bf-rich-kicker {
  display: none !important;
}
html body #content_ajax #main #services .bf-illustrated-card .bf-illustration {
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  flex: 0 0 236px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: radial-gradient(circle at 50% 50%, #232329, #18181b 70%) !important;
  color: #f4f4f5 !important;
}
html body #content_ajax #main #services .bf-illustrated-card .bf-illustration::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: auto 0 0;
  height: 36px;
  background: linear-gradient(transparent, #18181b);
  pointer-events: none;
}
html body #content_ajax #main #services .bf-illustrated-card .sbox-right,
html body #content_ajax #main #services .row > div:nth-child(n) .bf-illustrated-card .sbox-right {
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  z-index: 6 !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 15px 28px 27px !important;
  align-self: auto !important;
  text-align: left !important;
}
html body #content_ajax #main #services .bf-illustrated-card .sbox-right .title,
html body #content_ajax #main #services .row > div:nth-child(n) .bf-illustrated-card .sbox-right .title {
  display: block !important;
  margin: 0 0 10px !important;
  color: #fafafa !important;
  font-size: clamp(23px, 2.1vw, 29px) !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  letter-spacing: -.03em !important;
}
html body #content_ajax #main #services .bf-illustrated-card .description {
  max-width: 520px !important;
  margin: 0 !important;
  color: #a1a1aa !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  text-align: left !important;
}
/* Order status stack */
.bf-order-stage { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding: 20px 7%; }
html body #content_ajax #main #services .bf-illustrated-card .bf-illustration.bf-order-stage,
html body #content_ajax #main #services .bf-illustrated-card .bf-illustration.bf-platform-stage { display: flex !important; }
.bf-order-feed { display: flex; flex-direction: column; flex: 0 0 auto; gap: 9px; width: min(100%, 440px); height: 192px; transform: translateY(0); transition: transform .72s cubic-bezier(.25,.8,.25,1); }
.bf-order-feed.is-moving { transform: translateY(-67px); }
.bf-order-feed.is-resetting { transition: none; }
.bf-order-row { --bf-order-border: #3f3f46; display: flex; box-sizing: border-box; flex: 0 0 58px; align-items: center; gap: 11px; width: 100%; height: 58px; padding: 8px 12px; border: 1px solid var(--bf-order-border); border-radius: 15px; background: #242429; box-shadow: 0 10px 30px #0002; opacity: 1; transition: opacity .68s ease, filter .68s ease; }
.bf-order-row:nth-child(n+4) { opacity: 0; }
.bf-order-feed.is-moving .bf-order-row:first-child { opacity: 0; filter: blur(3px); }
.bf-order-feed.is-moving .bf-order-row:nth-child(4) { opacity: 1; }
.bf-order-logo, .bf-social-icon { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border: 1px solid #ffffff14; border-radius: 11px; background: #303037; font-size: 18px; }
.bf-order-logo.instagram, .bf-social-icon.instagram { color: #f472b6; }
.bf-order-logo.tiktok, .bf-social-icon.tiktok { color: #f5f5f5; }
.bf-order-logo.youtube, .bf-social-icon.youtube { color: #f87171; }
.bf-order-copy { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; line-height: 1.2; }
.bf-order-copy strong { overflow: hidden; color: #f5f5f5; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.bf-order-copy small { overflow: hidden; margin-top: 4px; color: #a1a1aa; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.bf-order-status { flex: 0 0 auto; padding: 5px 8px; border: 1px solid #52525b; border-radius: 999px; color: #d4d4d8; font-size: 10px; font-weight: 650; white-space: nowrap; }
.bf-order-status.done { border-color: #22c55e55; background: #22c55e14; color: #86efac; }
.bf-order-status.active { border-color: #818cf855; background: #818cf814; color: #a5b4fc; }
.bf-order-status.active::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: currentColor; vertical-align: 1px; animation: bf-order-status-pulse 1.8s ease-in-out infinite; }
/* Moving platform pills */
.bf-platform-stage { display: flex; flex-direction: column; justify-content: center; gap: 15px; height: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.bf-social-track { display: flex; width: max-content; gap: 12px; animation: bf-social-marquee 22s linear infinite; }
.bf-social-track.reverse { animation-direction: reverse; animation-duration: 25s; }
.bf-social-pill { display: inline-flex; align-items: center; gap: 10px; min-width: max-content; height: 49px; padding: 0 15px 0 8px; border: 1px solid #3f3f46; border-radius: 13px; background: #222227; color: #e4e4e7; font-size: 12px; font-weight: 600; }
.bf-social-pill .bf-social-icon { flex-basis: 31px; width: 31px; height: 31px; border-radius: 9px; font-size: 16px; }
.bf-social-icon.facebook { color: #60a5fa; }.bf-social-icon.spotify { color: #4ade80; }.bf-social-icon.twitter { color: #e4e4e7; }.bf-social-icon.telegram { color: #67e8f9; }
/* Green line chart */
.bf-chart-stage { position: relative; width: 100%; height: 100%; background-image: radial-gradient(#71717a 1.2px, transparent 1.2px); background-size: 48px 43px; background-position: 16px 9px; }
html body #content_ajax #main #services .bf-illustrated-card .bf-illustration.bf-chart-stage { background: radial-gradient(#71717a80 1px, transparent 1px) 16px 9px / 48px 43px, #18181b !important; }
.bf-chart-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bf-chart-fill { fill: url(#bfBenefitChartFill); opacity: .65; }
.bf-chart-line { fill: none; stroke: #34d399; stroke-width: 3; stroke-linecap: round; }
.bf-chart-marker { fill: #18181b; stroke: #34d399; stroke-width: 3; }
.bf-chart-halo { fill: #34d399; opacity: .2; animation: bf-chart-halo-pulse 2.2s ease-in-out infinite; }
.bf-chart-label { position: absolute; left: 28px; top: 22px; display: flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid #34d39940; border-radius: 999px; background: #34d39915; color: #6ee7b7; font-size: 11px; font-weight: 650; }
.bf-chart-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d399; }
/* Connected platforms */
.bf-network-stage { position: relative; width: 100%; height: 100%; }
.bf-network-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.bf-network-lines path { fill: none; stroke: #52525b; stroke-width: 1.2; }
.bf-network-lines path.pulse { stroke: #a5b4fc; stroke-width: 2; stroke-dasharray: 28 550; animation: bf-link-travel 5s linear infinite; }
.bf-network-lines path.pulse:nth-child(2n) { animation-delay: -2.5s; }
.bf-network-node { position: absolute; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #52525b; border-radius: 50%; background: #242429; box-shadow: 0 8px 24px #0003; font-size: 19px; transform: translate(-50%, -50%); animation: bf-node-breathe 4s ease-in-out infinite; }
.bf-network-node:nth-of-type(2n) { animation-delay: -2s; }
.bf-network-node.n1 { left: 15%; top: 25%; color: #f472b6; }.bf-network-node.n2 { left: 15%; top: 50%; color: #f87171; }.bf-network-node.n3 { left: 15%; top: 75%; color: #60a5fa; }
.bf-network-node.n4 { left: 85%; top: 25%; color: #e4e4e7; }.bf-network-node.n5 { left: 85%; top: 50%; color: #4ade80; }.bf-network-node.n6 { left: 85%; top: 75%; color: #67e8f9; }
.bf-network-center { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 76px; height: 76px; border: 6px solid #27272a; border-radius: 23px; background: #050505; box-shadow: 0 0 0 1px #52525b, 0 16px 34px #0005; transform: translate(-50%, -50%); }
.bf-network-center img { width: 48px; height: 48px; object-fit: contain; }
@keyframes bf-order-status-pulse { 50% { opacity: .35; box-shadow: 0 0 0 4px #818cf800; } }
@keyframes bf-social-marquee { to { transform: translateX(calc(-50% - 6px)); } }
@keyframes bf-chart-halo-pulse { 50% { opacity: .33; } }
@keyframes bf-link-travel { to { stroke-dashoffset: -578; } }
@keyframes bf-node-breathe { 50% { border-color: #a1a1aa; box-shadow: 0 0 20px #a5b4fc33; } }
html[data-bf-theme="light"] body #content_ajax #main #services .row > div:nth-child(n) .box.bf-rich-benefit-card.bf-illustrated-card { background: #fff !important; border-color: #e4e4e7 !important; box-shadow: 0 9px 25px #18181b0a !important; }
html[data-bf-theme="light"] body #content_ajax #main #services .bf-illustrated-card .bf-illustration { background: radial-gradient(circle at 50% 50%, #fafafa, #fff 75%) !important; color: #18181b !important; }
html[data-bf-theme="light"] body #content_ajax #main #services .bf-illustrated-card .bf-illustration.bf-chart-stage { background: radial-gradient(#a1a1aa70 1px, transparent 1px) 16px 9px / 48px 43px, #fff !important; }
html[data-bf-theme="light"] body #content_ajax #main #services .bf-illustrated-card .bf-illustration::after { background: linear-gradient(transparent, #fff); }
html[data-bf-theme="light"] body #content_ajax #main #services .row > div:nth-child(n) .bf-illustrated-card .sbox-right .title { color: #18181b !important; }
html[data-bf-theme="light"] body #content_ajax #main #services .row > div:nth-child(n) .bf-illustrated-card .description { color: #52525b !important; }
html[data-bf-theme="light"] .bf-order-row, html[data-bf-theme="light"] .bf-social-pill, html[data-bf-theme="light"] .bf-network-node { --bf-order-border: #e4e4e7; background: #fff; border-color: #e4e4e7; color: #27272a; }
html[data-bf-theme="light"] .bf-order-logo, html[data-bf-theme="light"] .bf-social-icon { background: #f4f4f5; }
html[data-bf-theme="light"] .bf-order-logo.tiktok, html[data-bf-theme="light"] .bf-social-icon.tiktok { color: #18181b; }
html[data-bf-theme="light"] .bf-order-status { color: #52525b; border-color: #d4d4d8; }
html[data-bf-theme="light"] .bf-order-status.done { color: #15803d; border-color: #86efac; }
html[data-bf-theme="light"] .bf-order-status.active { color: #4338ca; border-color: #c7d2fe; }
html[data-bf-theme="light"] .bf-order-copy strong { color: #18181b; } html[data-bf-theme="light"] .bf-order-copy small { color: #71717a; }
html[data-bf-theme="light"] .bf-chart-marker { fill: #fff; }
@media (max-width: 767px) {
  html body #content_ajax #main #services > .ptb > .container > .row { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
  html body #content_ajax #main #services .box.bf-rich-benefit-card.bf-illustrated-card { min-height: 390px !important; }
  html body #content_ajax #main #services .bf-illustrated-card .bf-illustration { flex-basis: 220px !important; }
  html body #content_ajax #main #services .bf-illustrated-card .sbox-right { padding: 12px 23px 24px !important; }
  html body #content_ajax #main #services .bf-illustrated-card .sbox-right .title { font-size: 24px !important; }
}
@media (prefers-reduced-motion: reduce) { .bf-illustration * { animation: none !important; transition: none !important; } .bf-chart-line { stroke-dashoffset: 0 !important; } }