.hero-demo {
  h2 {
    margin-bottom: 2rem;
    text-align: center;
    color: var(--semantic-color-text-primary);
  }

  .demo-section {
    margin-bottom: 3rem;
    
    h3 {
      margin-bottom: 0.5rem;
      color: var(--semantic-color-text-primary);
      font-size: 1.2rem;
      font-weight: 600;
    }
    
    p {
      margin-bottom: 1rem;
      color: var(--semantic-color-text-secondary);
      font-size: 0.9rem;
      padding: 0 1rem;
      background: var(--semantic-color-surface-elevated);
      border-radius: 0.5rem;
      padding: 0.75rem 1rem;
      border-left: 3px solid var(--semantic-color-primary);
    }
  }
}

// Ensure demo sections don't interfere with hero component styles
.demo-section {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  box-shadow: var(--semantic-shadow-card-rest);
  
  &:hover {
    box-shadow: var(--semantic-shadow-card-hover);
  }
}