:root {
  --zivox-green: #23be87;
  --zivox-green-hover: #1cb07b;
  --zivox-purple: #6741d9;
  --zivox-purple-hover: #5833c6;
  --zivox-dark: #212338;
  --zivox-bg: #f4f6fb;
  --zivox-gradient: linear-gradient(135deg, #23be87 0%, #6741d9 100%);
}

body {
  background-color: var(--zivox-bg);
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: #2b2c40;
}

.brand-title {
  font-size: 3.5rem;
  font-weight: 800;
  background: var(--zivox-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -1.5px;
  margin-bottom: 0;
}

.brand-slogan {
  color: #6e708f;
  font-size: 0.95rem;
  letter-spacing: 1.5px;
  font-weight: 600;
  text-transform: uppercase;
}

.card-custom {
  border-radius: 16px;
  border: none;
  box-shadow: 0 10px 30px rgba(35, 190, 135, 0.08);
  background: #ffffff;
}

.dark-item {
  background-color: var(--zivox-dark);
  color: #ffffff;
  border-radius: 10px;
  padding: 14px 20px;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
}

.dark-item:hover {
  transform: translateY(-2px);
}

.btn-zivox-green {
  background-color: var(--zivox-green);
  color: #ffffff;
  border: none;
  font-weight: 600;
}
.btn-zivox-green:hover {
  background-color: var(--zivox-green-hover);
  color: #ffffff;
}

.btn-zivox-purple {
  background-color: var(--zivox-purple);
  color: #ffffff;
  border: none;
  font-weight: 600;
}
.btn-zivox-purple:hover {
  background-color: var(--zivox-purple-hover);
  color: #ffffff;
}

.btn-outline-zivox-green {
  border: 2px solid var(--zivox-green);
  color: var(--zivox-green);
  font-weight: 600;
}
.btn-outline-zivox-green:hover {
  background-color: var(--zivox-green);
  color: #ffffff;
}

.btn-outline-zivox-purple {
  border: 2px solid var(--zivox-purple);
  color: var(--zivox-purple);
  font-weight: 600;
}
.btn-outline-zivox-purple:hover {
  background-color: var(--zivox-purple);
  color: #ffffff;
}

@media (max-width: 768px) {
  .brand-title {
    font-size: 2.5rem;
  }
  .dark-item {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
  }
}