/* =========================
   BandHub Overrides
   (carregue depois do style_buyers.css)
========================= */

/* Paleta BandHub */
:root{
  --bh-bg1:#0b1220;
  --bh-bg2:#2e1065;
  --bh-bg3:#7c3aed;

  --bh-accent:#a855f7;
  --bh-accent2:#38bdf8;

  --bh-text:#ffffff;
  --bh-muted: rgba(255,255,255,.78);
}

/* ===== HERO ===== */
.cs-hero.cs-hero--bandhub{
  background:
    radial-gradient(900px 420px at 78% 40%, rgba(168,85,247,.24), transparent 55%),
    radial-gradient(680px 340px at 22% 22%, rgba(56,189,248,.16), transparent 55%),
    linear-gradient(135deg, var(--bh-bg1) 0%, var(--bh-bg2) 55%, var(--bh-bg3) 100%);
}

.cs-pill.cs-pill--bandhub{
  background: rgba(168,85,247,.14);
  border-color: rgba(168,85,247,.25);
  color: #f5d0fe;
}

.cs-pill__dot.cs-pill__dot--bandhub{
  background: var(--bh-accent);
  box-shadow: 0 0 0 4px rgba(168,85,247,.18);
}

.cs-hero__title.cs-hero__title--bandhub{
  color: var(--bh-text);
}

.cs-hero__subtitle.cs-hero__subtitle--bandhub{
  color: rgba(255,255,255,.78);
}

.cs-meta.cs-meta--bandhub .cs-meta__card{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
}

.cs-meta__icon.cs-meta__icon--bandhub{
  background: rgba(168,85,247,.18);
  color: #f5d0fe;
}

.cs-meta.cs-meta--bandhub .cs-meta__label{
  color: rgba(255,255,255,.65);
}

.cs-meta.cs-meta--bandhub .cs-meta__value{
  color: rgba(255,255,255,.92);
}

/* mockup: trava tamanho pra nunca “explodir” */
.cs-mockup-card.cs-mockup-card--bandhub{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 28px 80px rgba(0,0,0,.35);
  width: min(520px, 100%);
  max-height: 380px;
  overflow: hidden;
}

.cs-mockup-card.cs-mockup-card--bandhub img{
  width: 100%;
  height: 380px;      /* mantém o mockup consistente */
  object-fit: cover;  /* se não quiser cortar, troque para contain */
  border-radius: 14px;
}

/* ===== PROBLEM: troca vermelho por roxo/azul ===== */
.problem.problem--bandhub .problem__badge{
  background: rgba(168,85,247,.12);
  color: #a855f7;
  border-color: rgba(168,85,247,.20);
}

.p-card.p-card--bandhub::before{
  background: #a855f7;
}

.p-card__icon.p-card__icon--bandhub{
  color: #a855f7;
  background: rgba(168,85,247,.12);
  border-color: rgba(168,85,247,.18);
}

/* ===== Personal Context ===== */
.pc-card.pc-card--bandhub{
  border-color: rgba(168,85,247,.18);
}

.pc-icon.pc-icon--bandhub{
  background: rgba(168,85,247,.14);
  color: #a855f7;
}

/* ===== Key Features icon color ===== */
.kf-icon.kf-icon--bandhub{
  background: #7c3aed;
}

/* ===== Design process line ===== */
.dp2__line.dp2__line--bandhub{
  background: rgba(168,85,247,.18);
}

/* ===== Figma section ===== */
.figma-card.figma-card--bandhub{
  border: 1px solid rgba(168,85,247,.18);
}

.figma-badge.figma-badge--bandhub{
  background: rgba(168,85,247,.14);
  color: #7c3aed;
}

.mf-pill--blue{
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border-color: rgba(255,255,255,.18);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(124,58,237,.22);
}



/* BandHub demo (desktop video 16:9) */
.demo__frame2{
  width: 100%;
  max-width: 980px;        /* bom no desktop */
  margin: 0 auto;
  border-radius: 18px;
  background: #0b1220;
  padding: 10px;
  box-shadow: 0 22px 60px rgba(15,23,42,.12);
}

.demo__video2{
  width: 100%;
  aspect-ratio: 16 / 9;    /* desktop video */
  height: auto;
  display: block;
  border-radius: 12px;
  background: #000;
  object-fit: cover;
}

/* Mobile: um pouco mais “tight” e sem ficar gigante */
@media (max-width: 768px){
  .demo__frame2{
    max-width: 92vw;
    padding: 8px;
    border-radius: 16px;
  }

  .demo__video2{
    border-radius: 10px;
  }
}