:root {
  --brand-primary: #5057BE;
  --brand-secondary: #D76285;
  --brand-accent: #F0B795;
  --brand-blue: #4C6EF5;
  --brand-dark: #1E293B;
  --brand-surface: #F8FAFC;
  --brand-surface-strong: #FFFFFF;
  --brand-gradient: linear-gradient(135deg, #5057BE 0%, #7C3AED 50%, #D76285 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(80, 87, 190, 0.12) 0%, rgba(215, 98, 133, 0.12) 100%);
  --brand-shadow: 0 16px 40px rgba(80, 87, 190, 0.16);
  --brand-radius-lg: 1rem;
  --brand-radius-xl: 1.5rem;
}

.brand-surface {
  background: var(--brand-surface-strong);
  border: 1px solid rgba(80, 87, 190, 0.12);
  border-radius: var(--brand-radius-xl);
  box-shadow: var(--brand-shadow);
}

.brand-gradient {
  background: var(--brand-gradient);
  color: #ffffff;
}

.brand-gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: rgba(80, 87, 190, 0.1);
  color: var(--brand-primary);
  font-weight: 600;
}

.brand-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.95) 100%);
  border-radius: var(--brand-radius-xl);
  box-shadow: var(--brand-shadow);
  border: 1px solid rgba(80, 87, 190, 0.12);
}

.brand-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.35rem;
  border-radius: 999px;
  background: var(--brand-gradient);
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
  box-shadow: 0 12px 24px rgba(80, 87, 190, 0.22);
}

.brand-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(80, 87, 190, 0.28);
  color: #ffffff;
  text-decoration: none;
}

.brand-link {
  color: var(--brand-primary);
  font-weight: 600;
}

.brand-link:hover {
  color: var(--brand-secondary);
}

.brand-hero {
  background: radial-gradient(circle at top left, rgba(80, 87, 190, 0.18) 0%, rgba(255,255,255,0) 36%),
              radial-gradient(circle at bottom right, rgba(215, 98, 133, 0.16) 0%, rgba(255,255,255,0) 32%),
              var(--brand-surface);
  border-radius: var(--brand-radius-xl);
  border: 1px solid rgba(80, 87, 190, 0.12);
  box-shadow: var(--brand-shadow);
}

.brand-logo-mark {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.brand-logo-wordmark {
  height: 36px;
  width: auto;
}