/* ==========================================================================
   HERO — Honeycomb backdrop, the signature geometry of the whole site
   ========================================================================== */

.fb-hero{
  position:relative;
  background:var(--fb-plum-deep);
  overflow:hidden;
  padding-top:clamp(2.75rem, 7vw, 5.5rem);
  padding-bottom:clamp(4rem, 9vw, 7rem);
}

/* Tessellated hex grid — the honeycomb, not a diagonal cut */
.fb-hero__comb{
  position:absolute;
  inset:-10% -5% -5% -5%;
  z-index:0;
  opacity:0.5;
  background-image:
    radial-gradient(circle at 78% 28%, rgba(240,164,0,0.24), transparent 45%),
    radial-gradient(circle at 15% 80%, rgba(240,164,0,0.10), transparent 40%);
}

.fb-hero__comb svg{ width:100%; height:100%; display:block; }
.fb-hero__comb .cell{
  fill:none;
  stroke:rgba(255,201,77,0.16);
  stroke-width:1.4;
}
.fb-hero__comb .cell-lit{
  fill:rgba(240,164,0,0.09);
  stroke:rgba(255,201,77,0.3);
  stroke-width:1.4;
}

.fb-hero__noise{
  position:absolute;
  inset:0;
  z-index:1;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,0.045) 1px, transparent 0);
  background-size:20px 20px;
  pointer-events:none;
}

.fb-hero .container-fb{
  position:relative;
  z-index:2;
}

.fb-hero__grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:var(--space-2xl);
  align-items:center;
}

@media (max-width: 991px){
  .fb-hero__grid{ grid-template-columns:1fr; gap:var(--space-xl); }
}

.fb-hero__copy{ color:var(--fb-cream); }

.fb-hero__copy .eyebrow{ margin-bottom:var(--space-md); }

.fb-hero h1{
  font-size:var(--fs-hero);
  font-weight:600;
  color:var(--fb-cream);
  margin-bottom:var(--space-md);
}

.fb-hero h1 em{
  font-style:italic;
  font-weight:600;
  color:var(--fb-honey-bright);
}

.fb-hero__lead{
  font-size:var(--fs-lead);
  color:rgba(255,249,236,0.78);
  max-width:540px;
  margin-bottom:var(--space-lg);
}

.fb-hero__cta-row{
  display:flex;
  gap:var(--space-sm);
  flex-wrap:wrap;
  margin-bottom:var(--space-xl);
}

.fb-hero__stats{
  display:flex;
  gap:var(--space-lg);
  flex-wrap:wrap;
  border-top:1px solid var(--fb-border-dark);
  padding-top:var(--space-md);
}

.fb-hero__stat strong{
  font-family:var(--font-display);
  font-size:1.65rem;
  font-weight:600;
  color:var(--fb-honey-bright);
  display:block;
  line-height:1;
}

.fb-hero__stat span{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--fb-slate-light);
}

/* ---- Visual: hex mark + floating case card ---- */

.fb-hero__visual{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  max-width:480px;
  margin:auto;
  aspect-ratio:1/1;
}

.fb-hero__hive{
  width:78%;
  max-width:340px;
  animation:hiveFloat 5s ease-in-out infinite;
}

.fb-hero__hive svg{ width:100%; height:auto; display:block; }

@keyframes hiveFloat{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-12px) rotate(1.5deg); }
}

/* dotted flight line looping behind the hex + a small bee travelling it */
.fb-hero__flightpath{
  position:absolute;
  inset:0;
  z-index:-1;
}
.fb-hero__flightpath path{
  fill:none;
  stroke:rgba(255,201,77,0.35);
  stroke-width:2;
  stroke-dasharray:1 10;
  stroke-linecap:round;
}
.fb-hero__flightpath .bee-dot{
  offset-path:path('M40,210 C60,90 190,40 260,70 C340,105 300,220 210,235 C120,250 90,150 170,120 C230,98 270,150 220,185');
  animation:flyPath 9s linear infinite;
}
@keyframes flyPath{
  0%{ offset-distance:0%; }
  100%{ offset-distance:100%; }
}

.fb-hero__card{
  position:absolute;
  bottom:6%;
  right:-6%;
  width:270px;
  background:var(--fb-cream);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:1.4rem;
  z-index:5;
  animation:floatCard 5s ease-in-out infinite;
  animation-delay:0.4s;
}

@keyframes floatCard{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}

.fb-hero__card-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:0.9rem;
}

.fb-hero__card-top span{
  font-family:var(--font-mono);
  font-size:0.68rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--fb-slate-light);
}

.fb-hero__card-badge{
  background:var(--fb-sage-tint);
  color:var(--fb-sage);
  font-family:var(--font-mono);
  font-size:0.66rem;
  font-weight:700;
  padding:0.22rem 0.65rem;
  border-radius:var(--radius-pill);
}

.fb-hero__card-amount{
  font-family:var(--font-display);
  font-size:1.85rem;
  font-weight:600;
  color:var(--fb-plum);
  margin-bottom:0.7rem;
}

.fb-hero__card-bar{
  height:8px;
  background:var(--fb-cream-dim);
  border-radius:var(--radius-pill);
  overflow:hidden;
}

.fb-hero__card-bar i{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--fb-honey), var(--fb-honey-bright));
  border-radius:var(--radius-pill);
  animation:fillBar 1.6s var(--ease-out) 1s forwards;
}

@keyframes fillBar{ to{ width:78%; } }

@media (max-width:991px){
  .fb-hero__visual{ max-width:340px; }
  .fb-hero__card{
    position:relative;
    right:auto;
    bottom:auto;
    width:100%;
    max-width:300px;
    margin:1.5rem auto 0;
  }
}