/* HERO */
    .hero {
      background: #9cb5f5;
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: repeating-linear-gradient(
        0deg,
        rgba(255,255,255,0.4),
        rgba(255,255,255,0.4) 1px,
        transparent 1px,
        transparent 12px
      );
      opacity: .4;
    }

    .hero h1 {
      font-size: 2.4rem;
      font-weight: 700;
    }

    .hero p {
      max-width: 520px;
      color: #555;
    }

    .hero-illustration img {
      max-width: 280px;
    }

    /* CARD */
    .content-personal-info {
      margin-top: -25px !important;
    }
    .card-custom {
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0,0,0,.05);
      border: none;
    }

    .avatar {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: #3b5bdb;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 1.2rem;
      margin-top: -60px !important;
    }

    .info-label {
      color: #6c757d;
      font-size: .9rem;
    }

    .info-value {
      font-weight: 500;
    }

    .btn-edit {
      border-radius: 10px;
      padding: 8px  !important;
    }

    @media (max-width: 768px) {
      .hero {
        text-align: center;
      }

      .hero p {
        margin: auto !important;
      }
    }



/* Feature cards */
.cards{
  background-color: #fff;
  padding: 20px !important;
  border-radius: 8px;
}
.feature-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px !important;
  margin: 0 10px !important  ;
  height: 100%;
  border: 1px solid #e5e7eb;
  cursor: pointer;
}

.feature-card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.feature-card h5 {
  font-size: 15px;
}

.feature-card p {
  font-size: 13px;
  color: #6b7280;
}

/* Affiliate */
.affiliate-tabs {
  margin: 15px 0 !important;
}

.tab {
  border: none;
  background: none;
  padding: 6px 12px;
  font-size: 14px;
  color: #6b7280;
}

.tab.active {
  color: #2563eb;
  border-bottom: 2px solid #2563eb;
}

/* Search */
.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-bar input {
  flex: 1;
  padding: 8px 12px !important;
  border-radius: 6px;
  border: 1px solid #d1d5db;
}

.filter-btn {
  background: none;
  border: none;
  color: #2563eb;
}