.btn-brand { background: var(--brand-gradient); color: #fff; border: none; }
    .btn-brand:hover { opacity: 0.85; color: #fff; }
 
    .badge-soft {
      background: var(--brand-gradient-soft);
      color: var(--brand-purple);
      border: 1px solid rgba(124,58,237,0.18);
    }
 
    /* Gradient border card */
    .card-gb {
      background: #fff;
      border-radius: 1.25rem;
      position: relative;
      transition: .3s;
      overflow: hidden;
    }
    .card-gb::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 1.25rem;
      padding: 2px;
      background: var(--brand-gradient);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }
 
    /* Gradient fill card */
    .card-gf { background: var(--brand-gradient); border-radius: 1.25rem; }
 
    /* Icon box */
    .icon-box {
      background: var(--brand-gradient-soft);
      border-radius: 0.875rem;
      width: 52px; height: 52px;
      display: inline-flex; align-items: center; justify-content: center;
    }
 
    /* Section divider */
    .section-divider { height: 4px; background: var(--brand-gradient); border-radius: 2px; width: 60px; }
 
    /* Check circle */
    .check-circle {
      background: var(--brand-gradient);
      border-radius: 50%;
      width: 32px; height: 32px;
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }

    .card-gb:hover {
      background:linear-gradient(135deg, #00b4d8 0%, #7c3aed 50%, #ec4899 100%)!important;
    }
    .card-gb:hover .icon-box {
      background: #5cabe7;
    }

    .card-gb:hover h5,
    .card-gb:hover p{
      color: white!important;
    }