/* ==========================================================================
   BundleBee landing refresh — overrides & additions only.
   Loaded AFTER the Webflow shared CSS. Brand: gold #ffe864 / orange #ffac64
   on ink #121212. No external assets, no CDNs.
   ========================================================================== */

:root{
  --bb-gold:#ffe864;
  --bb-orange:#ffac64;
  --bb-ink:#121212;
  --bb-ink-2:#0e1620;
  --bb-line:rgba(255,232,100,.34);
  --bb-text:#ffffff;
  --bb-text-dim:rgba(255,255,255,.72);
}

/* Collapse the empty leftover Webflow sections so the page reads tight. */
.section_header1,
.section_team,
.section_layout192{ display:none !important; }

/* Keep the Webflow badge hidden (belt and suspenders). */
.w-webflow-badge{ display:none !important; }

/* --------------------------------------------------------------------------
   Shared building blocks
   -------------------------------------------------------------------------- */
.bb-eyebrow{
  display:inline-block;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--bb-orange);
  margin-bottom:.9rem;
}
.bb-chip{
  display:inline-block;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:.36em .82em;
  border-radius:999px;
  color:#161200;
  background-image:linear-gradient(90deg,var(--bb-gold),var(--bb-orange));
  white-space:nowrap;
}

/* --------------------------------------------------------------------------
   NEW FEATURES section  (cards reuse the .pricing18_plan brand shell)
   -------------------------------------------------------------------------- */
.bb-new-section{ padding-top:1rem; padding-bottom:2rem; }

.bb-feature-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:1.9rem;
  padding-top:52px;
  align-items:stretch;
}
.bb-feature-card.pricing18_plan{
  max-width:none;
  height:100%;
  padding:1.9rem;
  text-align:left;
  align-items:flex-start;
  justify-content:flex-start;
  background-color:rgba(255,255,255,.02);
  overflow:visible;
}
/* Tame the aggressive default card hover for a dense grid. */
.bb-feature-card.pricing18_plan:hover{
  transform:translateY(-8px);
  box-shadow:inset 0 0 22px -2px var(--bb-gold), 0 18px 40px -22px #000;
}
.bb-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  width:100%;
  margin-bottom:1.1rem;
}
.bb-icon{
  width:54px;height:54px;flex:0 0 auto;
  border-radius:15px;
  display:flex;align-items:center;justify-content:center;
  color:var(--bb-gold);
  background:radial-gradient(120% 120% at 30% 15%, rgba(255,232,100,.26), rgba(255,172,100,.06));
  border:1px solid var(--bb-line);
}
.bb-icon svg{ width:27px;height:27px;display:block; }
.bb-feature-card h3{
  margin:0 0 .55rem;
  color:var(--bb-text);
  font-size:1.34rem;
  font-weight:700;
  line-height:1.2;
}
.bb-feature-card p{
  margin:0;
  color:var(--bb-text-dim);
  font-size:1rem;
  line-height:1.52;
}

/* --------------------------------------------------------------------------
   VIDEO grid  (Axiom-style: instant, inline, muted, looped)
   Replaces the old top/middle/bottom alternating rows.
   -------------------------------------------------------------------------- */
.bb-video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:2rem;
  padding-top:8px;
  align-items:stretch;
}
.bb-video-card.pricing18_plan{
  max-width:none;
  height:100%;
  padding:1.15rem;
  text-align:left;
  align-items:stretch;
  justify-content:flex-start;
  background-color:rgba(255,255,255,.02);
}
.bb-video-card.pricing18_plan:hover{
  transform:translateY(-8px);
  box-shadow:inset 0 0 22px -2px var(--bb-gold), 0 18px 40px -22px #000;
}
.bb-video-frame{
  position:relative;
  width:100%;
  aspect-ratio:16 / 10;
  border-radius:16px;
  overflow:hidden;
  background:#000;
  border:1px solid rgba(255,232,100,.18);
}
/* older engines without aspect-ratio support */
@supports not (aspect-ratio: 1 / 1){
  .bb-video-frame{ height:230px; }
}
.bb-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.bb-video-meta{
  padding:1.1rem .5rem .4rem;
}
.bb-video-head{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:.5rem;
}
.bb-video-head strong{
  color:var(--bb-text);
  font-size:1.18rem;
  font-weight:700;
  line-height:1.2;
}
.bb-tag{
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#161200;
  background-color:var(--bb-orange);
  border-radius:999px;
  padding:.28em .7em;
}
.bb-video-desc{
  color:var(--bb-text-dim);
  font-size:.98rem;
  line-height:1.5;
  margin:0 0 1.1rem;
}
.button-main.bb-video-cta{
  display:inline-flex;
  align-items:center;
  min-width:180px;
  height:44px;
  padding:0 1.4rem;
  border-radius:100vw;
}

/* --------------------------------------------------------------------------
   "What TOP developers say" — native card grid (replaces Elfsight embed)
   -------------------------------------------------------------------------- */
.bb-devsay{ margin-top:2.4rem; }
.bb-devsay-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:1.6rem;
}
.bb-devsay-card{
  display:flex;
  flex-direction:column;
  gap:1rem;
  background-color:#121212;
  border:2px solid var(--bb-gold);
  border-radius:1.4rem;
  padding:1.7rem;
  box-shadow:inset 0 0 22px -6px var(--bb-gold);
  margin:0;
}
.bb-devsay-stars{
  color:var(--bb-gold);
  letter-spacing:.14em;
  font-size:1rem;
}
.bb-devsay-card blockquote{
  margin:0;
  color:var(--bb-text);
  font-size:1.05rem;
  line-height:1.5;
  font-weight:500;
}
.bb-devsay-foot{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin-top:auto;
}
.bb-devsay-avatar{
  width:42px;height:42px;flex:0 0 auto;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;
  color:#161200;
  background-image:linear-gradient(135deg,var(--bb-gold),var(--bb-orange));
}
.bb-devsay-name{ display:block;color:var(--bb-text);font-weight:700;font-size:.98rem;line-height:1.15; }
.bb-devsay-role{ display:block;color:var(--bb-text-dim);font-size:.82rem; }

/* The old "What TOP developers" heading gets a little breathing room. */
.video_content-wrpper h2{ margin-bottom:.4rem; }

/* --------------------------------------------------------------------------
   Hero "New: ..." banner  ->  tidy centered pill / chip
   -------------------------------------------------------------------------- */
/* Tighten the empty gap between the top nav (72px) and the hero banner. The
   Webflow default padding-top (~148px) left ~76px of dead space below the nav;
   ~110px keeps clearance while halving that gap. */
.container.intro-pad{ padding-top: 110px; }
@media (max-width: 767px){ .container.intro-pad{ padding-top: 92px; } }
.title-warpper-text{ text-align:center; width:100%; }
.title-hero-tcxt.pricing18_plan{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  max-width:none;
  width:auto;
  margin:0 auto 1rem;
  padding:.42em .95em;
  border:1px solid var(--bb-line);
  border-radius:999px;
  background-color:rgba(18,18,18,.62);
  box-shadow:inset 0 0 18px -8px var(--bb-gold);
  color:var(--bb-text-dim);
  font-size:.82rem;
  font-weight:500;
  line-height:1.2;
  letter-spacing:.005em;
  text-align:center;
  white-space:nowrap;
}
/* (removed the little gold dot that sat on the pill; the banner text stands on its own) */
.title-hero-tcxt.pricing18_plan::before{ content:none !important; display:none !important; }

/* --------------------------------------------------------------------------
   Hero product video (Axiom-style framed demo under the CTA)
   -------------------------------------------------------------------------- */
.bb-hero-vid-wrap{
  width:100%;
  max-width:1240px;
  margin:2.8rem auto 0;
}
.bb-hero-vid{
  display:block;
  width:100%;
  border-radius:16px;
  border:1px solid var(--bb-line);
  background:#000;
  box-shadow:0 0 0 1px rgba(0,0,0,.4),
             0 24px 60px -26px rgba(0,0,0,.85),
             inset 0 0 30px -12px var(--bb-gold),
             0 0 42px -18px rgba(255,232,100,.55);
}

/* --------------------------------------------------------------------------
   Integrations strip
   -------------------------------------------------------------------------- */
.bb-intg-section{ padding-top:1rem; padding-bottom:2rem; }
.bb-intg-strip{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.9rem;
  margin-top:2.4rem;
}
.bb-intg-chip{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding:.7em 1.25em;
  border:1px solid var(--bb-line);
  border-radius:999px;
  background-color:rgba(255,255,255,.02);
  color:var(--bb-text);
  font-size:1rem;
  font-weight:600;
  white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bb-intg-chip::before{
  content:"";
  width:.5em;height:.5em;flex:0 0 auto;
  border-radius:50%;
  background-image:linear-gradient(135deg,var(--bb-gold),var(--bb-orange));
}
.bb-intg-chip:hover{
  transform:translateY(-2px);
  border-color:var(--bb-gold);
  box-shadow:inset 0 0 16px -6px var(--bb-gold), 0 12px 26px -18px #000;
}

/* --------------------------------------------------------------------------
   "What TOP developers say" - auto-scrolling video testimonial reel
   -------------------------------------------------------------------------- */
.bb-reel-section{ padding-top:1rem; padding-bottom:2rem; }
.bb-reel{
  position:relative;
  margin-top:2.6rem;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.bb-reel-track{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:bb-marquee 46s linear infinite;
}
.bb-reel:hover .bb-reel-track{ animation-play-state:paused; }
@keyframes bb-marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.bb-reel-card{
  flex:0 0 auto;
  width:456px;
  margin-right:1.6rem;
  display:block;
  text-decoration:none;
  color:inherit;
  border:1px solid var(--bb-line);
  border-radius:16px;
  background-color:rgba(255,255,255,.02);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bb-reel-card:hover{
  transform:translateY(-4px);
  border-color:var(--bb-gold);
  box-shadow:inset 0 0 20px -6px var(--bb-gold), 0 18px 40px -22px #000;
}
.bb-reel-frame{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  background:#000;
  overflow:hidden;
}
@supports not (aspect-ratio: 1 / 1){
  .bb-reel-frame{ height:190px; }
}
.bb-reel-vid{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.bb-reel-plat{
  position:absolute;
  top:.6rem;left:.6rem;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#161200;
  background-image:linear-gradient(90deg,var(--bb-gold),var(--bb-orange));
  border-radius:999px;
  padding:.28em .7em;
}
.bb-reel-meta{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  padding:.85rem 1rem 1rem;
}
.bb-reel-name{ color:var(--bb-text);font-weight:700;font-size:1rem;line-height:1.2; }
.bb-reel-handle{ color:var(--bb-text-dim);font-size:.85rem; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media screen and (max-width:991px){
  .bb-feature-grid,
  .bb-video-grid,
  .bb-devsay-grid{ grid-template-columns:1fr; }
  .bb-video-frame{ aspect-ratio:16 / 10; }
  .title-hero-tcxt.pricing18_plan{ font-size:.72rem; max-width:92vw; white-space:normal; line-height:1.3; padding:.45em .9em; }
}
@media (prefers-reduced-motion:reduce){
  .bb-reel-track{ animation:none; }
}

/* --------------------------------------------------------------------------
   Real video embeds (YouTube + Instagram) — replaces the muted marquee so
   visitors can actually watch the creators' videos.
   -------------------------------------------------------------------------- */
.bb-embeds{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1.4rem;
  max-width:1080px;
  margin:2rem auto 0;
  align-items:start;
}
.bb-embed-card{ display:flex; flex-direction:column; }
.bb-embed-frame{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:14px; overflow:hidden; background:#000;
  border:1px solid var(--bb-line);
  box-shadow:0 12px 32px -20px rgba(0,0,0,.85);
}
.bb-embed-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
/* Instagram reels are portrait and render their own card chrome */
.bb-embed-ig{ justify-self:center; }
.bb-embed-ig .bb-embed-frame{ aspect-ratio:auto; height:620px; width:340px; max-width:100%; }
.bb-embed-ig .bb-embed-frame iframe{ position:static; height:100%; }
.bb-embed-meta{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:.6rem; }
.bb-embed-name{ font-weight:600; color:#fff; font-size:.92rem; }
.bb-embed-plat{ font-size:.72rem; color:var(--bb-text-dim); border:1px solid var(--bb-line); border-radius:999px; padding:.15em .6em; white-space:nowrap; }
@media (max-width:479px){
  .bb-embeds{ grid-template-columns:1fr; }
  .bb-embed-ig .bb-embed-frame{ width:100%; height:560px; }
}

/* --------------------------------------------------------------------------
   Headings: every section heading solid WHITE; only the very-top hero keeps
   its brand gradient (Webflow's .text-size-h2 is the gradient class, so we
   override all of them except .hero-heading).
   -------------------------------------------------------------------------- */
.text-size-h2:not(.hero-heading){
  -webkit-text-fill-color:#fff !important;
  background:none !important;
  background-image:none !important;
  color:#fff !important;
}

/* Integrations chips now carry real protocol logos instead of a bare dot. */
.bb-intg-chip::before{ display:none !important; }
.bb-intg-logo{
  width:1.55em; height:1.55em; flex:0 0 auto; display:block;
  border-radius:6px; object-fit:contain;
  background:rgba(255,255,255,.06);
}

/* --------------------------------------------------------------------------
   Horizontal VIDEO REEL (scrollable row of real, playable YouTube/IG embeds).
   Restores the reel feel while keeping the embeds interactive.
   -------------------------------------------------------------------------- */
.bb-reelx-wrap{ position:relative; max-width:1160px; margin:2rem auto 0; }
.bb-reelx{
  display:flex; gap:1.3rem;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:.4rem .3rem 1rem;
  scrollbar-width:thin; scrollbar-color:var(--bb-gold) transparent;
}
.bb-reelx::-webkit-scrollbar{ height:8px; }
.bb-reelx::-webkit-scrollbar-thumb{ background:var(--bb-line); border-radius:999px; }
.bb-reel-item{ flex:0 0 340px; max-width:88vw; scroll-snap-align:center; display:flex; flex-direction:column; }
.bb-reel-frame2{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:14px; overflow:hidden; background:#000;
  border:1px solid var(--bb-line); box-shadow:0 12px 32px -20px rgba(0,0,0,.85);
}
.bb-reel-frame2 iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.bb-reel-ig{ flex-basis:340px; }
.bb-reel-ig .bb-reel-frame2{ aspect-ratio:auto; height:600px; }
.bb-reel-ig .bb-reel-frame2 iframe{ position:static; height:100%; }
.bb-reel-meta2{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:.55rem; }
.bb-reel-name2{ font-weight:600; color:#fff; font-size:.9rem; }
.bb-reel-plat2{ font-size:.7rem; color:var(--bb-text-dim); border:1px solid var(--bb-line); border-radius:999px; padding:.14em .6em; white-space:nowrap; }
.bb-reelx-nav{
  position:absolute; top:34%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--bb-line); background:rgba(18,18,18,.85); color:var(--bb-gold);
  font-size:1.6rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.bb-reelx-nav:hover{ border-color:var(--bb-gold); box-shadow:0 0 14px -4px var(--bb-gold); }
.bb-reelx-nav.prev{ left:-8px; }
.bb-reelx-nav.next{ right:-8px; }
@media (max-width:700px){ .bb-reelx-nav{ display:none; } }

/* Gradient the word "BundleBee" inside the (otherwise white) headings. */
.bb-grad{
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  background-image:linear-gradient(297deg, var(--bb-orange), var(--bb-gold)) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
}

/* The reel heading is sentence case in the HTML; stop Webflow from capitalizing every word. */
.bb-reel-section h2{ text-transform:none !important; }

/* --------------------------------------------------------------------------
   "Features you'll love" cards: size to content so long copy never clips
   past the rounded border (Early Block / Wallet Manager were cut off).
   -------------------------------------------------------------------------- */
.pricing18_grid-list{ align-items:start !important; }
.pricing18_grid-list .pricing18_plan{ height:auto !important; min-height:0 !important; overflow:visible !important; }
.pricing18_grid-list .pricing18_plan .pricing18_content-top{ height:auto !important; overflow:visible !important; }

/* --------------------------------------------------------------------------
   Scroll-revealed ANIMATED gradient text. Every gradient word starts solid
   gold, then when it scrolls into view the brand gold->orange gradient sweeps
   in and keeps flowing. Applied via JS to .hero-heading, .text-span-7, .bb-grad.
   -------------------------------------------------------------------------- */
.bb-agrad{
  background-image:linear-gradient(100deg, #ffac64, #ffe864 30%, #fff6d0 50%, #ffe864 70%, #ffac64) !important;
  background-size:220% 100% !important;
  background-position:45% 0;           /* NOT !important: an !important value can't be animated */
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  will-change:opacity, background-position;
}
/* JS ARMS each element to opacity:0 before it scrolls into view. Kept in a class so a
   no-JS page still shows the gradient statically (never invisible text). */
.bb-agrad.bb-armed{ opacity:0; }
/* On reveal: FADE the gradient IN (opacity 0 -> 1) with a gentle sweep, then keep a
   slow flow going. This is the "load in" — an actual fade, not just a position shift. */
.bb-agrad.in{
  animation:bb-grad-fadein 1.15s ease forwards, bb-grad-flow 7s ease-in-out 1.15s infinite;
}
@keyframes bb-grad-fadein{
  from{ opacity:0; background-position:120% 0; }
  to{   opacity:1; background-position:40% 0; }
}
@keyframes bb-grad-flow{ 0%,100%{ background-position:40% 0; } 50%{ background-position:82% 0; } }
@media (prefers-reduced-motion:reduce){
  .bb-agrad.bb-armed{ opacity:1; }
  .bb-agrad.in{ animation:none; }
}

/* Hero heading is WHITE with only the "powerful AI" accent in the brand gradient,
   never a full gold-bleed. (The scroll animation is scoped to .bb-grad only.) */
.hero-heading{ -webkit-text-fill-color:#fff !important; color:#fff !important; background:none !important; background-image:none !important; }
.hero-heading .text-span-7{ -webkit-text-fill-color:transparent !important; color:transparent !important; }

/* ==========================================================================
   TASK 1 — "The features you'll love" cards: tidy, top-aligned row.
   The four .pricing18_plan.middle.ff cards use icons of different intrinsic
   heights, which pushed each title to a different Y. Pin every icon to an
   identical box (contain, never distort) and top-align the card internals so
   the titles + copy line up cleanly across the row.
   ========================================================================== */
.pricing18_grid-list .pricing18_plan.ff{
  align-items:stretch !important;      /* stop per-card horizontal centering drift */
  justify-content:flex-start !important;
}
.pricing18_grid-list .pricing18_plan.ff .pricing18_content-top,
.pricing18_grid-list .pricing18_plan.ff .pricing18_content-top > .margin-bottom,
.pricing18_grid-list .pricing18_plan.ff .text-align-center{
  width:100%;
}
/* Identical icon box on every feature card -> titles start at the same line. */
.pricing18_plan.ff .image_feautre{
  display:block;
  width:auto !important;
  height:84px;
  max-width:96px;
  margin:0 auto .35rem;
  object-fit:contain;
}

/* ==========================================================================
   TASK 2 — CTA label swap: "Get started" at rest, "Bundle now" on hover.
   The Webflow two-line .button-text-wrap was clipping both lines at once
   ("half loaded"). Make the wrap an exact one-line window and slide the pair
   cleanly on hover. transform:none !important on the wrap kills any Webflow
   IX2 inline movement of the window; the swap rides on the child lines.
   ========================================================================== */
.button-main .button-text-wrap{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  height:1.35em;
  line-height:1.35em;
  overflow:hidden;
  grid-row-gap:0 !important;
  grid-column-gap:0 !important;
  row-gap:0 !important;
  gap:0 !important;
  transform:none !important;
}
.button-main .button-text-wrap .p-button-text{
  margin:0;
  height:1.35em;
  line-height:1.35em;
  white-space:nowrap;
  transition:transform .34s cubic-bezier(.25,.46,.45,.94);
  will-change:transform;
}
.button-main:hover .button-text-wrap .p-button-text{
  transform:translateY(-100%);
}
/* Nav pill keeps its compact size while hosting the same swap. */
.button-main.changed-nav .button-text-wrap{ height:1.25em; line-height:1.25em; }
.button-main.changed-nav .button-text-wrap .p-button-text{ height:1.25em; line-height:1.25em; font-weight:600; }
/* On mobile Webflow caps the pill at 100px, which clipped the (overflow-hidden)
   label to its middle ("...STAR..."). Let it size to the whole label instead. */
@media screen and (max-width:991px){
  .button-main.changed-nav{
    min-width:0 !important;
    max-width:none !important;
    width:auto !important;
    padding-left:1em !important;
    padding-right:1em !important;
    font-size:.82rem !important;
  }
  .button-main.changed-nav .button-text-wrap{ height:1.2em; line-height:1.2em; }
  .button-main.changed-nav .button-text-wrap .p-button-text{ height:1.2em; line-height:1.2em; }
}
@media (prefers-reduced-motion:reduce){
  .button-main .button-text-wrap .p-button-text{ transition:none; }
}

/* ==========================================================================
   TASK 3 — Flying bee beside each gradient "BundleBee" heading word.
   bee-fly.webp is an animated webp (wings already flap). It fades/flies in
   TOGETHER with the gradient reveal by keying off the sibling .bb-agrad.in,
   then keeps a gentle bob going.
   ========================================================================== */
.bb-bee{
  display:inline-block;
  width:1.5em;
  height:1.5em;
  margin-left:.16em;
  vertical-align:-.36em;
  object-fit:contain;
  opacity:0;
  transform:translate(-16px,12px) scale(.55) rotate(-10deg);
  pointer-events:none;
  -webkit-user-select:none;
  user-select:none;
}
.bb-grad.in + .bb-bee,
.bb-agrad.in + .bb-bee{
  animation:bb-bee-flyin 1.15s cubic-bezier(.22,.9,.3,1.2) .1s forwards,
            bb-bee-bob 3.2s ease-in-out 1.3s infinite;
}
@keyframes bb-bee-flyin{
  0%{   opacity:0; transform:translate(-16px,12px) scale(.55) rotate(-10deg); }
  55%{  opacity:1; }
  100%{ opacity:1; transform:translate(0,0) scale(1) rotate(0deg); }
}
@keyframes bb-bee-bob{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  50%{     transform:translate(1px,-3px) rotate(3deg); }
}
@media (prefers-reduced-motion:reduce){
  .bb-bee{ opacity:1; transform:none; }
  .bb-grad.in + .bb-bee,
  .bb-agrad.in + .bb-bee{ animation:none; }
}

/* ==========================================================================
   TASK 4 — "Get started, fast" extra CTA + a 3-second arrow/bee flourish.
   The flourish is opacity:0 until an IntersectionObserver adds .bb-show; the
   arrow nudges and the bee circles for ~3s, then .bb-show is removed and it
   fades back out (one-time).
   ========================================================================== */
.bb-gsf-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.1rem;
  margin-top:2rem;
  position:relative;
  flex-wrap:nowrap;
}
.button-main.bb-gsf-btn{
  height:56px;
  min-width:210px;
  padding:0 2.2rem;
  border-radius:100vw;
}
.bb-flourish{
  position:relative;
  flex:0 0 auto;
  width:120px;
  height:60px;
  opacity:0;
  transition:opacity .55s ease;
  pointer-events:none;
}
.bb-flourish.bb-show{ opacity:1; }
.bb-arrow-red{
  position:absolute;
  left:0;
  top:2px;
  width:110px;
  height:auto;
  color:#ff3b30;
  filter:drop-shadow(0 2px 6px rgba(255,59,48,.55));
}
.bb-flourish.bb-show .bb-arrow-red{
  animation:bb-arrow-nudge .72s ease-in-out infinite;
}
.bb-flourish-bee{
  position:absolute;
  left:0;
  top:0;
  width:34px;
  height:34px;
  object-fit:contain;
  transform:translate(78px,4px);
}
.bb-flourish.bb-show .bb-flourish-bee{
  animation:bb-bee-orbit 1.6s linear infinite;
}
@keyframes bb-arrow-nudge{
  0%,100%{ transform:translateX(0); }
  50%{     transform:translateX(-9px); }
}
@keyframes bb-bee-orbit{
  0%{   transform:translate(78px,4px)  rotate(12deg); }
  25%{  transform:translate(40px,-10px) rotate(-12deg); }
  50%{  transform:translate(2px,6px)   rotate(12deg); }
  75%{  transform:translate(40px,26px) rotate(40deg); }
  100%{ transform:translate(78px,4px)  rotate(12deg); }
}
@media (max-width:600px){
  .bb-gsf-cta{ flex-wrap:wrap; gap:.4rem; }
  .bb-flourish{ width:96px; }
  .bb-arrow-red{ width:88px; }
}
@media (prefers-reduced-motion:reduce){
  .bb-flourish.bb-show .bb-arrow-red,
  .bb-flourish.bb-show .bb-flourish-bee{ animation:none; }
}

/* --------------------------------------------------------------------------
   Hover easter egg: the top-left bee logo flaps its wings (same motion as the
   terminal brand mark), with NO glow.
   -------------------------------------------------------------------------- */
.navbar2_logo-link .navbar2_logo{ transform-origin:50% 62%; will-change:transform; }
.navbar2_logo-link:hover .navbar2_logo{ animation:bb-landing-flap .14s ease-in-out infinite; }
@keyframes bb-landing-flap{
  0%   { transform:translateY(0)    rotate(-5deg) scaleY(1); }
  50%  { transform:translateY(-2px) rotate(5deg)  scaleY(.92); }
  100% { transform:translateY(0)    rotate(-5deg) scaleY(1); }
}
@media (prefers-reduced-motion:reduce){ .navbar2_logo-link:hover .navbar2_logo{ animation:none; } }

/* --------------------------------------------------------------------------
   Hero trailer: click the video (or the badge) to unmute / hear audio.
   -------------------------------------------------------------------------- */
.bb-hero-vid-wrap{ position:relative; }
.bb-hero-vid{ cursor:pointer; }
.bb-hero-sound{
  position:absolute; left:14px; bottom:14px; z-index:3;
  display:inline-flex; align-items:center; gap:.45em;
  padding:.5em .85em; border:0; border-radius:999px; cursor:pointer;
  font:inherit; font-size:.86rem; font-weight:700; line-height:1;
  color:#161200; background-image:linear-gradient(90deg,var(--bb-gold),var(--bb-orange));
  box-shadow:0 6px 18px -8px rgba(0,0,0,.8); transition:opacity .2s ease, transform .12s ease;
}
.bb-hero-sound:hover{ transform:translateY(-1px); }
.bb-hero-sound .bb-hs-ic{ font-size:1em; }
.bb-hero-sound.on{ color:var(--bb-gold); background-image:none; background-color:rgba(0,0,0,.55); box-shadow:none; }
@media (max-width:560px){ .bb-hero-sound{ font-size:.78rem; left:10px; bottom:10px; } }

/* "New in BundleBee" heading: centered, bee kept inline next to the text. */
.bb-new-section .heading-style-h2-2{ text-align:center; }
.bb-new-section .heading-style-h2-2 .bb-bee{ vertical-align:middle; }