:root{
  --gold-1:#ffd700;
  --gold-2:#f6c453;
  --gold-3:#c9a227;
  --dark-1:#0b0b0f;
  --dark-2:#12131a;
  --muted:#c9cbd3;
}

html,body{
  height:100%;
}
body{
  background: radial-gradient(1200px 600px at 50% 20%, #1a1b23 0%, var(--dark-1) 55%, #000 100%);
  color:#eef1f7;
}

.bg-center{
  position: fixed;
  inset: 0;
  background: url('./bitwise-bg.png') center center / cover no-repeat fixed; /* cover full page */
  opacity: .35; 
  filter: saturate(1.1) brightness(.9);
  pointer-events:none;
  z-index:0;
}

#particles{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0; 
}

.card.glass{
  background: linear-gradient(180deg, rgba(18,19,26,.7), rgba(10,10,14,.65));
  border-radius: 24px;
  border: 1px solid rgba(255,215,0,.18);
  box-shadow: 0 10px 40px rgba(0,0,0,.55), 0 0 0 6px rgba(201,162,39,.06) inset;
  backdrop-filter: blur(6px);
  position: relative;
  z-index: 1;
}

.accent-bar{
  height: 6px;
  width: 160px;
  border-radius: 999px;
  background: linear-gradient(90deg,var(--gold-3),var(--gold-1),var(--gold-3));
  box-shadow: 0 2px 14px rgba(255,215,0,.5);
  margin-bottom: 10px;
}

.avatar{
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 999px;
  border: 3px solid rgba(255,215,0,.75);
  box-shadow: 0 0 0 4px rgba(255,215,0,.15), 0 12px 28px rgba(0,0,0,.6), 0 0 36px rgba(255,215,0,.18);
}

.title{
  background: linear-gradient(180deg, #fff, #f7e9ac 55%, var(--gold-1));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: .5px;
}

.divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,.7), transparent);
  margin: 1rem auto 1.25rem auto;
}

.content{color:#e9ecf5}
.content strong{color:var(--gold-1)}

.btn-gold{
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
  color:#111;
  font-weight: 700;
  border:none;
  box-shadow: 0 10px 24px rgba(255,215,0,.35), 0 2px 0 rgba(0,0,0,.2) inset;
}
.btn-gold:hover{
  background: linear-gradient(135deg, #ffe36e, var(--gold-1));
  color:#111;
  transform: translateY(-1px);
}

.btn-whatsapp{
  background: linear-gradient(135deg, #25D366, #1ebe56);
  color: #0b2b17;
  font-weight: 800;
  border: none;
  box-shadow: 0 10px 24px rgba(37,211,102,.35), 0 2px 0 rgba(0,0,0,.2) inset;
}
.btn-whatsapp:hover{
  background: linear-gradient(135deg, #49df83, #25D366);
  color: #0b2b17;
  transform: translateY(-1px);
}

.text-light-50{color:rgba(255,255,255,.55)}

@media (max-width: 576px){
  .avatar{width:96px;height:96px}
  .bg-center{background-size: 80vmin;}
}