.bond-site-header {

  max-width: 480px;

  margin: 10px auto 0;

  padding: 14px 14px 16px;

  background: #fff;

  border-radius: 14px 14px 0 0;

  border: 1px solid #e2e8f0;

  border-bottom: 3px solid #1e3a8a;

  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);

  box-sizing: border-box;

}



.bond-site-logo {

  display: block;

  text-align: center;

  margin-bottom: 14px;

  padding-bottom: 12px;

  position: relative;

  text-decoration: none;

}



.bond-site-logo img {

  display: block;

  width: 100%;

  max-width: 420px;

  max-height: 72px;

  margin: 0 auto;

  object-fit: contain;

  border-radius: 8px;

}



.bond-site-logo::after {

  content: '';

  position: absolute;

  left: 50%;

  bottom: 0;

  transform: translateX(-50%);

  width: min(100%, 420px);

  height: 3px;

  border-radius: 2px;

  background: linear-gradient(90deg, #a61e4d, #c9922a, #1e3a5f);

}



.bond-site-nav {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.bond-nav-btn {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 11px 14px;

  border-radius: 10px;

  font-size: 0.88rem;

  font-weight: 700;

  text-decoration: none;

  color: #fff !important;

  line-height: 1.3;

  transition: transform 0.15s, opacity 0.2s;

  box-sizing: border-box;

}



.bond-nav-btn i { font-size: 1.05rem; }



.bond-nav-btn:hover {

  opacity: 0.94;

  transform: translateY(-1px);

  color: #fff !important;

}



.bond-nav-whatsapp { background: linear-gradient(135deg, #1b7a2e, #25a244); }

.bond-nav-telegram { background: linear-gradient(135deg, #0088cc, #2aabee); }

.bond-nav-slip { background: linear-gradient(135deg, #5b21b6, #7c3aed); }

.bond-nav-loan { background: linear-gradient(135deg, #c2410c, #ea580c, #f97316); }



@media (max-width: 519px) {

  .bond-site-nav .bond-nav-btn {

    width: 100%;

    font-size: 0.9rem;

    padding: 12px 14px;

  }

}



@media (min-width: 520px) {

  .bond-site-header { max-width: 640px; }

  .bond-site-nav {

    flex-direction: row;

    flex-wrap: wrap;

  }

  .bond-nav-btn {

    flex: 1 1 calc(50% - 4px);

    min-width: 0;

  }

}