/* Solution detail hero — v1.24.0 */
:root {
  --bb-sol-navy: #0b2d4b;
  --bb-sol-text: #45627b;
  --bb-sol-orange: #ff6b10;
  --bb-sol-violet: #8b5cf6;
  --bb-sol-border: rgba(11, 45, 75, .10);
}

.bb-solution-hero {
  --bb-sol-accent: #ff6b10;
  --bb-sol-accent-2: #8b5cf6;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2rem, 3.6vw, 3.45rem) 0 clamp(2.25rem, 4vw, 3.75rem);
  background:
    radial-gradient(circle at 7% 18%, rgba(255, 107, 16, .12), transparent 24%),
    radial-gradient(circle at 91% 13%, rgba(139, 92, 246, .15), transparent 26%),
    radial-gradient(circle at 70% 92%, rgba(255, 192, 144, .10), transparent 28%),
    linear-gradient(180deg, #fffaf4 0%, #fffdf9 100%);
  border-bottom: 1px solid rgba(11, 45, 75, .06);
}
.bb-solution-accent-strategy { --bb-sol-accent:#ff7a1a; --bb-sol-accent-2:#9856ee; }
.bb-solution-accent-operations { --bb-sol-accent:#ff7a1a; --bb-sol-accent-2:#1f8fd6; }
.bb-solution-accent-knowledge { --bb-sol-accent:#8757f5; --bb-sol-accent-2:#ff7a1a; }
.bb-solution-accent-finance { --bb-sol-accent:#ff7a1a; --bb-sol-accent-2:#2b66d9; }

.bb-solution-shell {
  width: min(100% - 40px, 1540px);
  margin-inline: auto;
}
.bb-solution-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(470px, .84fr);
  gap: clamp(2rem, 4vw, 4.8rem);
  align-items: center;
}
.bb-solution-hero-copy { min-width: 0; max-width: 940px; }
.bb-solution-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .58rem;
  margin: 0;
  color: var(--bb-sol-accent);
  font: 700 .76rem/1.2 'JetBrains Mono', monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.bb-solution-eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, var(--bb-sol-accent), var(--bb-sol-accent-2));
  border-radius: 99px;
}
.bb-solution-eyebrow i { font-size: .95rem; }
.bb-solution-hero-copy h1 {
  max-width: 14.7ch;
  margin: .75rem 0 0;
  color: var(--bb-sol-navy);
  font: 700 clamp(2.9rem, 4.35vw, 4.55rem)/.99 'Space Grotesk', sans-serif;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.bb-solution-hero-copy h1 span,
.bb-solution-hero-copy h1 strong { font: inherit; }
.bb-solution-hero-copy h1 strong {
  color: transparent;
  background: linear-gradient(102deg, var(--bb-sol-accent) 0%, #ef6f54 35%, var(--bb-sol-accent-2) 88%);
  -webkit-background-clip: text;
  background-clip: text;
}
.bb-solution-hero-intro {
  max-width: 780px;
  margin: 1.15rem 0 0;
  color: var(--bb-sol-text);
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  line-height: 1.68;
}
.bb-solution-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.55rem;
}
.bb-solution-btn {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: .62rem;
  padding: .9rem 1.35rem;
  border-radius: .9rem;
  font-size: .96rem;
  font-weight: 700;
  line-height: 1;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.bb-solution-btn:hover { transform: translateY(-2px); }
.bb-solution-btn-primary {
  color: #fff;
  background: linear-gradient(110deg, var(--bb-sol-accent), #ff7a1a);
  box-shadow: 0 15px 34px rgba(255, 107, 16, .21);
}
.bb-solution-btn-secondary {
  color: var(--bb-sol-navy);
  border: 1px solid rgba(11,45,75,.17);
  background: rgba(255,255,255,.76);
  box-shadow: 0 10px 26px rgba(11,45,75,.05);
}
.bb-solution-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  max-width: 900px;
  margin: 1.35rem 0 0;
  padding: 0;
  list-style: none;
}
.bb-solution-proof li {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .5rem;
  color: #173b59;
  font-size: .78rem;
  font-weight: 670;
  line-height: 1.35;
}
.bb-solution-proof i {
  display: inline-flex;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--bb-sol-accent) 24%, transparent);
  border-radius: 50%;
  color: var(--bb-sol-accent);
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 18px rgba(11,45,75,.05);
}

.bb-solution-hero-visual {
  display: flex;
  min-height: 470px;
  align-items: center;
  justify-content: center;
}
.bb-solution-workflow {
  position: relative;
  width: min(100%, 610px);
  min-height: 465px;
}
.bb-solution-workflow::before {
  content: '';
  position: absolute;
  inset: 9% 4% 4%;
  border-radius: 48%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.90) 0%, rgba(255,255,255,.50) 35%, transparent 69%),
    radial-gradient(circle at 62% 28%, color-mix(in srgb, var(--bb-sol-accent) 18%, transparent), transparent 34%),
    radial-gradient(circle at 28% 73%, color-mix(in srgb, var(--bb-sol-accent-2) 16%, transparent), transparent 34%);
  filter: blur(8px);
}
.bb-solution-orbit {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  border: 1px dashed color-mix(in srgb, var(--bb-sol-accent-2) 22%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.bb-solution-orbit-one { width: 330px; height: 330px; animation: bbSolutionOrbit 28s linear infinite; }
.bb-solution-orbit-two { width: 440px; height: 270px; border-color: color-mix(in srgb, var(--bb-sol-accent) 22%, transparent); animation: bbSolutionOrbitReverse 34s linear infinite; }
.bb-solution-orbit-three { width: 520px; height: 390px; opacity: .58; animation: bbSolutionOrbit 42s linear infinite; }

.bb-solution-hub,
.bb-solution-module {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(255,255,255,.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.bb-solution-hub {
  left: 50%;
  top: 50%;
  width: 250px;
  min-height: 205px;
  padding: 1.35rem 1.2rem 1.2rem;
  transform: translate(-50%, -50%);
  border-radius: 2rem;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 82% 12%, rgba(139,92,246,.32), transparent 34%),
    linear-gradient(155deg, #092f4f 0%, #142856 58%, #2d245f 100%);
  box-shadow: 0 28px 62px rgba(15, 35, 75, .22);
}
.bb-solution-hub-icon {
  display: inline-flex;
  width: 58px;
  height: 58px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 1.25rem;
  color: #ffb26d;
  background: rgba(255,255,255,.08);
  font-size: 1.65rem;
  box-shadow: inset 0 -10px 22px rgba(255,107,16,.15);
}
.bb-solution-hub small {
  display: block;
  margin-top: .75rem;
  color: #ffb26d;
  font: 700 .65rem/1.2 'JetBrains Mono', monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.bb-solution-hub strong {
  display: block;
  margin-top: .34rem;
  font: 700 1.42rem/1.12 'Space Grotesk', sans-serif;
  letter-spacing: -.025em;
}
.bb-solution-hub p {
  max-width: 22ch;
  margin: .55rem auto 0;
  color: rgba(255,255,255,.74);
  font-size: .8rem;
  line-height: 1.48;
}
.bb-solution-module {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: .75rem;
  width: 220px;
  min-height: 112px;
  padding: .95rem;
  align-items: start;
  border-radius: 1.35rem;
  color: var(--bb-sol-navy);
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.70));
  box-shadow: 0 20px 42px rgba(22, 40, 82, .11);
  animation: bbSolutionFloat 6.5s ease-in-out infinite;
}
.bb-solution-module-1 { left: 0; top: 3%; animation-delay: -.8s; }
.bb-solution-module-2 { right: 0; top: 5%; animation-delay: -2.1s; }
.bb-solution-module-3 { left: 1.5%; bottom: 2%; animation-delay: -3.4s; }
.bb-solution-module-4 { right: 0; bottom: 1%; animation-delay: -4.6s; }
.bb-solution-module-icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: .9rem;
  color: var(--bb-sol-accent-2);
  background: linear-gradient(145deg, color-mix(in srgb, var(--bb-sol-accent-2) 13%, white), color-mix(in srgb, var(--bb-sol-accent) 10%, white));
  font-size: 1.18rem;
}
.bb-solution-module strong {
  display: block;
  font: 700 .98rem/1.23 'Space Grotesk', sans-serif;
  letter-spacing: -.01em;
}
.bb-solution-module p {
  margin: .25rem 0 0;
  color: #5b7185;
  font-size: .73rem;
  line-height: 1.43;
}

.bb-solution-hero-mesh {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .65;
}
.bb-solution-hero-mesh::before {
  content: '';
  position: absolute;
  inset: -22% -7% -28%;
  background-image:
    radial-gradient(circle, rgba(139,92,246,.26) 1.1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,107,16,.19) 1px, transparent 1.5px);
  background-position: 0 0, 18px 18px;
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse at 75% 45%, rgba(0,0,0,.8), transparent 68%);
  animation: bbSolutionMeshDrift 26s linear infinite;
}
.bb-solution-mesh-line {
  position: absolute;
  border: 1px dashed rgba(139,92,246,.17);
  border-radius: 50%;
  animation: bbSolutionMeshRotate 32s linear infinite;
}
.bb-solution-mesh-line-a { width: 880px; height: 440px; right: -170px; top: -110px; }
.bb-solution-mesh-line-b { width: 760px; height: 760px; right: 8%; top: 10%; border-color: rgba(255,107,16,.14); animation-direction: reverse; animation-duration: 40s; }
.bb-solution-mesh-line-c { width: 560px; height: 300px; left: 38%; bottom: -130px; animation-duration: 36s; }
.bb-solution-mesh-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 5px rgba(255,107,16,.08), 0 0 24px 8px rgba(255,107,16,.20);
  animation: bbSolutionPulse 4.8s ease-in-out infinite;
}
.bb-solution-mesh-dot-1 { left: 43%; top: 16%; }
.bb-solution-mesh-dot-2 { left: 54%; bottom: 17%; animation-delay: -1.4s; }
.bb-solution-mesh-dot-3 { right: 16%; top: 20%; animation-delay: -2.6s; }
.bb-solution-mesh-dot-4 { right: 7%; bottom: 15%; animation-delay: -3.7s; }
.bb-solution-mesh-dot-5 { left: 29%; bottom: 8%; animation-delay: -2.1s; }

@keyframes bbSolutionOrbit { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes bbSolutionOrbitReverse { to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes bbSolutionFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes bbSolutionPulse { 0%,100% { opacity:.35; transform:scale(.78); } 50% { opacity:1; transform:scale(1); } }
@keyframes bbSolutionMeshRotate { to { transform: rotate(360deg); } }
@keyframes bbSolutionMeshDrift { to { transform: translate3d(36px,18px,0); } }

@media (max-width: 1240px) {
  .bb-solution-hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr); gap: 2rem; }
  .bb-solution-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 650px; }
  .bb-solution-workflow { transform: scale(.93); }
}
@media (max-width: 980px) {
  .bb-solution-hero { padding-top: 2rem; }
  .bb-solution-hero-grid { grid-template-columns: 1fr; }
  .bb-solution-hero-copy { max-width: 820px; }
  .bb-solution-hero-copy h1 { max-width: 16ch; }
  .bb-solution-hero-visual { min-height: 455px; }
  .bb-solution-workflow { width: min(100%, 650px); transform: none; }
}
@media (max-width: 700px) {
  .bb-solution-shell { width: min(100% - 28px, 1540px); }
  .bb-solution-hero { padding: 1.55rem 0 2rem; }
  .bb-solution-eyebrow { font-size: .66rem; letter-spacing: .13em; }
  .bb-solution-hero-copy h1 { max-width: none; font-size: clamp(2.25rem, 11.2vw, 3.15rem); line-height: 1.02; }
  .bb-solution-hero-intro { margin-top: .9rem; font-size: .96rem; line-height: 1.6; }
  .bb-solution-hero-actions { margin-top: 1.15rem; }
  .bb-solution-btn { width: 100%; min-height: 50px; }
  .bb-solution-proof { grid-template-columns: 1fr 1fr; gap: .6rem .75rem; margin-top: 1.05rem; }
  .bb-solution-proof li { font-size: .72rem; align-items: flex-start; }
  .bb-solution-hero-visual { min-height: 0; }
  .bb-solution-workflow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    min-height: 0;
    padding-top: .7rem;
  }
  .bb-solution-workflow::before { inset: 0; }
  .bb-solution-orbit { display: none; }
  .bb-solution-hub,
  .bb-solution-module { position: relative; inset: auto; transform: none; width: auto; }
  .bb-solution-hub {
    grid-column: 1 / -1;
    min-height: 178px;
    padding: 1.15rem;
    border-radius: 1.45rem;
  }
  .bb-solution-hub-icon { width: 52px; height: 52px; }
  .bb-solution-hub strong { font-size: 1.3rem; }
  .bb-solution-module {
    display: block;
    min-height: 145px;
    padding: .85rem;
    border-radius: 1.1rem;
    animation: none;
  }
  .bb-solution-module-icon { width: 38px; height: 38px; margin-bottom: .65rem; }
  .bb-solution-module strong { font-size: .9rem; }
  .bb-solution-module p { font-size: .69rem; }
}
@media (max-width: 430px) {
  .bb-solution-proof { grid-template-columns: 1fr; }
  .bb-solution-workflow { grid-template-columns: 1fr; }
  .bb-solution-hub { grid-column: auto; }
  .bb-solution-module { min-height: 0; display: grid; grid-template-columns: 38px minmax(0,1fr); gap: .7rem; }
  .bb-solution-module-icon { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bb-solution-orbit,
  .bb-solution-module,
  .bb-solution-hero-mesh::before,
  .bb-solution-mesh-line,
  .bb-solution-mesh-dot { animation: none !important; }
}


/* Compact solution hero refinement — v1.24.0 */
.bb-solution-shell {
  width: min(1500px, calc(100% - clamp(48px, 7vw, 118px)));
}
.bb-solution-hero {
  padding: clamp(1.25rem, 2.25vw, 2.05rem) 0 clamp(1.45rem, 2.65vw, 2.35rem);
}
.bb-solution-hero-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(430px, .8fr);
  gap: clamp(1.5rem, 3vw, 3.5rem);
}
.bb-solution-hero-copy {
  max-width: 880px;
}
.bb-solution-hero-copy h1 {
  max-width: 14.2ch;
  margin-top: .55rem;
  font-size: clamp(2.65rem, 3.85vw, 4.05rem);
  line-height: .99;
}
.bb-solution-hero-intro {
  max-width: 740px;
  margin-top: .85rem;
  font-size: clamp(.98rem, 1.08vw, 1.08rem);
  line-height: 1.62;
}
.bb-solution-hero-actions {
  margin-top: 1.05rem;
}
.bb-solution-btn {
  min-height: 50px;
  padding: .82rem 1.22rem;
  border-radius: .82rem;
  font-size: .91rem;
}
.bb-solution-proof {
  gap: .55rem .7rem;
  margin-top: .95rem;
}
.bb-solution-proof li {
  font-size: .74rem;
}
.bb-solution-proof i {
  flex-basis: 22px;
  width: 22px;
  height: 22px;
}
.bb-solution-hero-visual {
  min-height: 410px;
}
.bb-solution-workflow {
  width: min(100%, 560px);
  min-height: 405px;
}
.bb-solution-orbit-one { width: 290px; height: 290px; }
.bb-solution-orbit-two { width: 390px; height: 240px; }
.bb-solution-orbit-three { width: 470px; height: 350px; }
.bb-solution-hub {
  width: 225px;
  min-height: 184px;
  padding: 1.12rem 1rem 1rem;
  border-radius: 1.75rem;
}
.bb-solution-hub-icon {
  width: 52px;
  height: 52px;
  border-radius: 1.05rem;
  font-size: 1.48rem;
}
.bb-solution-hub small {
  margin-top: .62rem;
  font-size: .59rem;
}
.bb-solution-hub strong {
  font-size: 1.28rem;
}
.bb-solution-hub p {
  margin-top: .42rem;
  font-size: .74rem;
}
.bb-solution-module {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: .65rem;
  width: 202px;
  min-height: 102px;
  padding: .82rem;
  border-radius: 1.18rem;
}
.bb-solution-module-icon {
  width: 38px;
  height: 38px;
  border-radius: .8rem;
  font-size: 1.05rem;
}
.bb-solution-module strong {
  font-size: .91rem;
}
.bb-solution-module p {
  margin-top: .2rem;
  font-size: .68rem;
}

@media (max-width: 1240px) {
  .bb-solution-shell { width: min(100% - 56px, 1450px); }
  .bb-solution-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(400px, .9fr); gap: 1.7rem; }
  .bb-solution-hero-copy h1 { font-size: clamp(2.45rem, 4vw, 3.55rem); }
  .bb-solution-workflow { transform: scale(.94); }
}
@media (max-width: 980px) {
  .bb-solution-shell { width: min(100% - 40px, 1450px); }
  .bb-solution-hero { padding: 1.35rem 0 1.8rem; }
  .bb-solution-hero-grid { grid-template-columns: 1fr; gap: 1.05rem; }
  .bb-solution-hero-copy { max-width: 780px; }
  .bb-solution-hero-copy h1 { max-width: 16ch; }
  .bb-solution-hero-visual { min-height: 410px; }
  .bb-solution-workflow { width: min(100%, 620px); transform: none; }
}
@media (max-width: 700px) {
  .bb-solution-shell { width: min(100% - 28px, 1450px); }
  .bb-solution-hero { padding: 1.05rem 0 1.45rem; }
  .bb-solution-hero-copy h1 { font-size: clamp(2.05rem, 10.4vw, 2.9rem); }
  .bb-solution-hero-intro { margin-top: .75rem; }
  .bb-solution-hero-actions { margin-top: .95rem; }
  .bb-solution-proof { margin-top: .85rem; }
  .bb-solution-workflow { padding-top: .35rem; }
}

/* Hide complex workflow diagrams on phones — v1.38.0 */
@media (max-width: 767px) {
  .bb-solution-hero-visual {
    display: none !important;
  }

  .bb-solution-hero-grid {
    display: block;
  }

  .bb-solution-hero-copy {
    max-width: none;
  }
}