:root{
  /* extracted / approximated from your logo */
  --fb-cyan:  #35B3A9;
  --fb-pink:  #D06199;
  --fb-ink:   #0b0f14;

  --fb-card: rgba(255,255,255,.05);
  --fb-line: rgba(255,255,255,.10);
}

/* Brand background + typography */
body{
  background: radial-gradient(1200px circle at 20% 10%, rgba(53,179,169,.22), transparent 40%),
              radial-gradient(1000px circle at 90% 30%, rgba(208,97,153,.20), transparent 42%),
              linear-gradient(180deg, #0a0d12, #07090d);
}

/* Glass cards */
.glass{
  background: var(--fb-card);
  border: 1px solid var(--fb-line);
  border-radius: 1rem;
}

/* Brand button (Bootstrap-compatible) */
.btn-brand{
  --bs-btn-color: #0b0f14;
  --bs-btn-bg: #ffc107; /* keeps the “listen” CTA punchy */
  --bs-btn-border-color: rgba(255,255,255,.12);
  --bs-btn-hover-bg: #ffcd39;
  --bs-btn-hover-border-color: rgba(255,255,255,.12);
}

/* Accent badges */
.badge-cyan{
  background: rgba(53,179,169,.16);
  border: 1px solid rgba(53,179,169,.35);
  color: #9ef3eb;
}
.badge-pink{
  background: rgba(208,97,153,.16);
  border: 1px solid rgba(208,97,153,.35);
  color: #ffc0df;
}

/* Logo sizing */
.nav-logo{
  width: 120px;
  object-fit: contain;
}

/* Voice icon tile */
.voice-icon{
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 1.35rem;
  flex: 0 0 auto;
}

/* Optional: cheerful gradient hero block */
.hero{
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  background:
    radial-gradient(900px circle at 10% 15%, rgba(53,179,169,.24), transparent 45%),
    radial-gradient(900px circle at 90% 25%, rgba(208,97,153,.22), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
}


.voice-photo{
  width: 140px;
  height: 110px;
  border-radius: 18px;
  object-fit: cover;
  object-position: center 25%;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  flex: 0 0 auto;
}

/* On very small screens, let it span full width */
@media (max-width: 575.98px){
  .voice-photo{
    width: 100%;
    height: 180px;
    border-radius: 16px;
  }
}

/* Gold audio play button */
.btn-audio-gold{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;

  background: linear-gradient(135deg, #ffcc4d, #ffb703);
  color: #0b0f14;

  border: none;
  box-shadow:
    0 6px 18px rgba(255, 193, 7, .35),
    inset 0 0 0 1px rgba(255,255,255,.25);

  transition: transform .15s ease, box-shadow .15s ease;
}

.btn-audio-gold i{
  font-size: 1.35rem;
}

.btn-audio-gold:hover{
  transform: translateY(-1px);
  box-shadow:
    0 10px 24px rgba(255, 193, 7, .45),
    inset 0 0 0 1px rgba(255,255,255,.35);
}

.btn-audio-gold:active{
  transform: scale(.96);
}


/* Large voice image (clear & premium) */
.voice-photo-lg{
  width: 72px;
  height: 72px;
  border-radius: 18px;
  object-fit: cover;

  /* clarity & contrast */
  filter: contrast(1.08) saturate(1.15);
  image-rendering: auto;

  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);

  box-shadow:
    0 8px 22px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.12);
}

/* Companion-specific warmth */
.voice-companion{
  filter: contrast(1.05) saturate(1.25);
  box-shadow:
    0 8px 24px rgba(255, 193, 7, .25),
    inset 0 0 0 1px rgba(255,255,255,.14);
}
/* Observer-specific cool clarity */
.voice-observer{
  filter: contrast(1.10) saturate(1.05);
  box-shadow:
    0 8px 24px rgba(53, 179, 169, .22),
    inset 0 0 0 1px rgba(255,255,255,.14);
}
/* Moderator-specific balance */
.voice-moderator{
  filter: contrast(1.08) saturate(1.12);
  box-shadow:
    0 8px 24px rgba(53, 179, 169, .18),
    0 8px 24px rgba(208, 97, 153, .18),
    inset 0 0 0 1px rgba(255,255,255,.14);
}