/* Shared inner-page hero for BeeBay public pages */
.bb-main-container.bb-main-with-shared-hero {
  position: relative;
}

.bb-shared-page-hero {
  position: relative;
  width: 100vw;
  margin: 0 calc(50% - 50vw) 28px;
  min-height: clamp(260px, 28vw, 340px);
  display: flex;
  align-items: center;
  padding: 34px clamp(18px, 4.4vw, 72px);
  overflow: hidden;
  background: transparent;
}

.bb-shared-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/assets/images/beebay-home-hero-brand.png?v=20260425-alpha') center center / min(100%, 1680px) auto no-repeat;
  -webkit-mask-image: radial-gradient(140% 128% at 54% 52%, #000 46%, rgba(0,0,0,.94) 64%, rgba(0,0,0,.58) 80%, rgba(0,0,0,.16) 93%, transparent 100%);
  mask-image: radial-gradient(140% 128% at 54% 52%, #000 46%, rgba(0,0,0,.94) 64%, rgba(0,0,0,.58) 80%, rgba(0,0,0,.16) 93%, transparent 100%);
  pointer-events: none;
}

.bb-shared-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--page-bg-color, #f5f7fb) 24%, transparent) 0%, transparent 18%, transparent 82%, color-mix(in srgb, var(--page-bg-color, #f5f7fb) 14%, transparent) 100%);
  pointer-events: none;
}

.bb-shared-page-hero-card {
  position: relative;
  z-index: 2;
  width: min(700px, calc(100% - 12px));
  border-radius: 28px;
  padding: 28px 28px 22px;
  background: var(--bb-hero-card-bg, linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.60)));
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  border: 1px solid var(--bb-hero-card-border, rgba(255,255,255,.58));
  box-shadow: var(--bb-hero-card-shadow, 0 20px 42px rgba(15,23,42,.12));
}

.bb-shared-page-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: var(--bb-hero-chip-bg, rgba(255,255,255,.58));
  border: 1px solid var(--bb-hero-chip-border, rgba(255,255,255,.48));
  color: var(--text-soft, #526071);
  font-size: .95rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

.bb-shared-page-hero-copy h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: #0f172a;
}

.bb-shared-page-hero-copy p {
  max-width: 620px;
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--text-soft, #526071);
}

.bb-shared-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.bb-shared-page-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--bb-hero-chip-border, rgba(255,255,255,.48));
  background: var(--bb-hero-chip-bg, rgba(255,255,255,.58));
  color: #0f172a;
  text-decoration: none;
  font-weight: 700;
  transition: color .18s ease, transform .18s ease, background .18s ease;
}

.bb-shared-page-actions a:hover {
  color: var(--bb-teal, #0f766e);
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--bb-hero-chip-bg, rgba(255,255,255,.58)) 86%, white 14%);
}

.bb-shared-page-ornaments {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.bb-shared-token,
.bb-shared-bee {
  position: absolute;
}

.bb-shared-token {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(223,231,241,.95);
  box-shadow: 0 12px 24px rgba(15,23,42,.10);
  font-weight: 900;
}

.bb-shared-token.token-pdf { top: 46px; right: 30%; color: #ef4444; }
.bb-shared-token.token-play { top: 42px; right: 16%; color: #0ea5e9; }
.bb-shared-token.token-code { top: 102px; right: 5.8%; color: #22c55e; }
.bb-shared-token.token-img { top: 138px; right: 38%; color: #8b5cf6; }
.bb-shared-bee {
  top: 128px;
  right: 12%;
  font-size: 34px;
  filter: drop-shadow(0 8px 16px rgba(15,23,42,.14));
}

.bb-has-shared-page-hero .bb-site-footer {
  margin-top: 28px;
}

@media (max-width: 980px) {
  .bb-shared-page-hero {
    min-height: clamp(230px, 34vw, 320px);
    padding: 26px 18px;
  }

  .bb-shared-page-hero::before {
    background-size: 118% auto;
    background-position: center center;
  }

  .bb-shared-page-hero-card {
    width: min(640px, 100%);
    padding: 24px 22px 20px;
  }

  .bb-shared-token.token-pdf { right: 33%; }
  .bb-shared-token.token-img { right: 42%; }
  .bb-shared-token.token-play { right: 18%; }
  .bb-shared-token.token-code { right: 6%; }
  .bb-shared-bee { right: 12%; }
}

@media (max-width: 720px) {
  .bb-shared-page-hero {
    min-height: 240px;
    padding: 22px 14px 24px;
  }

  .bb-shared-page-hero::before {
    background-size: cover;
    background-position: 62% center;
  }

  .bb-shared-page-hero-card {
    width: 100%;
    padding: 20px 16px 18px;
    border-radius: 22px;
  }

  .bb-shared-page-hero-copy h1 {
    font-size: clamp(1.8rem, 9vw, 2.5rem);
  }

  .bb-shared-page-hero-copy p {
    font-size: 0.98rem;
    line-height: 1.55;
  }

  .bb-shared-token {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    font-size: .95rem;
  }

  .bb-shared-token.token-pdf { top: 36px; right: 36%; }
  .bb-shared-token.token-play { top: 38px; right: 16%; }
  .bb-shared-token.token-code { top: 96px; right: 5%; }
  .bb-shared-token.token-img { top: 114px; right: 48%; }
  .bb-shared-bee { top: 118px; right: 23%; font-size: 28px; }
}