/* ================= Busy Cloud API (hub) ================= */
.bca-hero { padding-bottom: 90px; }
.bca-hero-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; align-items: center; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* Architecture diagram */
.arch { position: relative; width: 100%; max-width: 520px; aspect-ratio: 500 / 420; margin-left: auto; }
.arch-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.arch-lines path {
  fill: none;
  stroke: url(#lg);
  stroke-width: 2;
  stroke-dasharray: 6 8;
  animation: dash 1.2s linear infinite;
  opacity: 0.85;
  vector-effect: non-scaling-stroke;
}
@keyframes dash { to { stroke-dashoffset: -28; } }

.arch-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 76px; height: 76px;
  border-radius: 20px;
  display: grid; place-items: center; align-content: center; gap: 2px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  color: #fff; font-size: 1.35rem;
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.6);
}
.arch-node small { font-size: 0.62rem; font-family: var(--font-head); color: #b9c8f5; }
.arch-node.busy { left: 19%; top: 50%; width: 86px; height: 86px; }
.arch-node.hub { left: 50%; top: 50%; width: 104px; height: 104px; border-radius: 28px; background: #fff; border: 0; box-shadow: 0 0 60px rgba(47, 107, 255, 0.7); }
.arch-node.hub img { width: 46px; }
.arch-node.hub small { color: var(--primary); font-weight: 600; }
.hub-ring { position: absolute; inset: -14px; border-radius: 36px; border: 2px solid rgba(95, 180, 255, 0.5); animation: hubPulse 2.4s var(--ease) infinite; }
@keyframes hubPulse { from { transform: scale(0.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.arch-node.app { left: 81%; width: 70px; height: 70px; font-size: 1.15rem; animation: nodeBob 5s ease-in-out infinite; }
.arch-node.a1 { top: 14.3%; }
.arch-node.a2 { top: 38%; animation-delay: -1.2s; }
.arch-node.a3 { top: 62%; animation-delay: -2.4s; }
.arch-node.a4 { top: 85.7%; animation-delay: -3.6s; }
@keyframes nodeBob { 50% { translate: 6px 0; } }

/* Explore cards */
.explore-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.explore-card { display: flex; flex-direction: column; color: var(--ink-2); padding: 40px; }
.explore-card h3 { font-size: 1.7rem; margin: 22px 0 10px; }
.explore-card > p { color: var(--muted); }
.explore-card .check-list { margin: 10px 0 26px; }
.explore-card .link-arrow { margin-top: auto; }
.ex-top { display: flex; justify-content: space-between; align-items: center; }
.ex-icon { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--grad); color: #fff; font-size: 1.5rem; box-shadow: var(--shadow-glow); transition: transform 0.5s var(--ease-back); }
.ex-arrow { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line); color: var(--primary); transition: transform 0.45s var(--ease-back), background 0.3s, color 0.3s, border-color 0.3s; }
.explore-card:hover .ex-icon { transform: rotate(-8deg) scale(1.08); }
.explore-card:hover .ex-arrow { transform: rotate(-45deg); background: var(--primary); color: #fff; border-color: var(--primary); }

.explore-card.dark { background: linear-gradient(150deg, var(--navy-2), var(--navy)); border-color: transparent; color: #c5d0ee; }
.explore-card.dark h3 { color: #fff; }
.explore-card.dark > p { color: #a9b6dc; }
.explore-card.dark .ex-arrow { border-color: rgba(255, 255, 255, 0.2); color: #fff; }
.explore-card.dark .link-arrow { color: #9fbcff; }
.explore-card.dark.spotlight::before { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(95, 180, 255, 0.16), transparent 45%); }
.ex-code {
  margin: 10px 0 26px; padding: 18px 20px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(110, 155, 255, 0.15);
  font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.9; color: #d6e0ff;
  overflow-x: auto;
}
.ex-code .m { display: inline-block; min-width: 42px; color: #3ee39a; font-weight: 500; }
.ex-code .m.p { color: #ffb86b; }

/* Features */
.feat p { color: var(--muted); margin: 0; }

/* How it works */
.how-steps { display: flex; align-items: stretch; justify-content: center; gap: 18px; }
.how-step {
  position: relative; flex: 1; max-width: 330px;
  padding: 40px 30px 32px;
  text-align: center;
  border-radius: var(--radius-lg);
  background: #fff; border: 1px solid var(--line);
  transition: transform 0.45s var(--ease), box-shadow 0.45s;
}
.how-step:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.how-step > i { font-size: 2rem; color: var(--primary); margin-bottom: 18px; display: block; }
.how-step p { color: var(--muted); margin: 0; }
.hs-num {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad); color: #fff;
  font-family: var(--font-head); font-weight: 700;
  box-shadow: var(--shadow-glow);
}
.how-arrow { display: grid; place-items: center; color: var(--primary-300); font-size: 1.6rem; }
.how-arrow i { animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(8px); } }

/* Use cases */
.usecases { overflow: hidden; isolation: isolate; }
.usecases .bg-grid {
  position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(110, 155, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(110, 155, 255, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
}
.uc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.uc {
  padding: 30px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(110, 155, 255, 0.15);
  transition: transform 0.45s var(--ease), background 0.4s, border-color 0.4s;
}
.uc:hover { transform: translateY(-6px); background: rgba(47, 107, 255, 0.12); border-color: rgba(110, 155, 255, 0.4); }
.uc i { font-size: 1.6rem; color: #7fa6ff; margin-bottom: 16px; display: block; transition: transform 0.5s var(--ease-back), color 0.3s; }
.uc:hover i { transform: scale(1.15) rotate(-8deg); color: #fff; }
.uc p { color: #a9b6dc; margin: 0; font-size: 0.95rem; }

@media (max-width: 1024px) {
  .bca-hero-inner { grid-template-columns: 1fr; }
  .arch { margin: 20px auto 0; }
  .uc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .explore-grid { grid-template-columns: 1fr; }
  .explore-card { padding: 30px; }
  .how-steps { flex-direction: column; align-items: center; gap: 30px; }
  .how-step { max-width: none; width: 100%; }
  .how-arrow { transform: rotate(90deg); }
  .uc-grid { grid-template-columns: 1fr; }
  .arch-node { width: 58px !important; height: 58px !important; font-size: 1rem; border-radius: 16px; }
  .arch-node.hub { width: 78px !important; height: 78px !important; }
  .arch-node.hub img { width: 34px; }
}